Modified Chrome Extension Dialog or other solution to notify users?
So I created a chrome extension when clicked, it opens a popup for users to save the current tab as a screenshot.
Screenshot:
The problem is that when I switch to another tab and go back to the tab where the extension window is open, the window is no longer there (although it still does screenshots). Because of this, no one knows if the extension actually created a screenshot and even the desktop notification is not shown in this case, since after switching to other tabs and returning back, the window became invisible.
Is there a way to make this pop up modal or some other solution so that users can know the screenshot was taken even if they navigate to other tabs and return to the tab where the extension was used?
source to share
If you are looking for some modal window code, you can take it as a link and customize as per your requirement.
Output
The idea is to render processing text that mimics a modal dialog.
Demonstration
manifest.json
Added simple modal via content script with image gif
.
{
"name": "Add Model Window",
"description": "http://stackoverflow.com/questions/14423923/chrome-extension-modal-dialog-or-other-solution-to-notify-users",
"version": "1",
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"modal.js"
]
}
],
"web_accessible_resources": [
"spinner_progress.gif"
]
}
modal.js
Target HTML to be generated
The idea is to insert <iframe>
on the page and add a cosmetic bar for customized text.
<div style="position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255); opacity: 0.5; z-index: 2000; height: 1083px; width: 100%;">
<iframe style="width: 100%; height: 100%;"></iframe>
</div>
<div style="position: absolute; width: 350px; border: 1px solid rgb(51, 102, 153); padding: 10px; background-color: rgb(255, 255, 255); z-index: 2001; overflow: auto; text-align: center; top: 149px; left: 497px;">
<div>
<div style="text-align:center"><span><strong>Processing... Please Wait.</strong></span>
<br>
<br>
<img src="/img/spinner_progress.gif">
</div>
</div>
</div>
Code for HTML using basic DOM operations.
wrapperDiv = document.createElement("div");
wrapperDiv.setAttribute("style","position: absolute; left: 0px; top: 0px; background-color: rgb(255, 255, 255); opacity: 0.5; z-index: 2000; height: 1083px; width: 100%;");
iframeElement = document.createElement("iframe");
iframeElement.setAttribute("style","width: 100%; height: 100%;");
wrapperDiv.appendChild(iframeElement);
modalDialogParentDiv = document.createElement("div");
modalDialogParentDiv.setAttribute("style","position: absolute; width: 350px; border: 1px solid rgb(51, 102, 153); padding: 10px; background-color: rgb(255, 255, 255); z-index: 2001; overflow: auto; text-align: center; top: 149px; left: 497px;");
modalDialogSiblingDiv = document.createElement("div");
modalDialogTextDiv = document.createElement("div");
modalDialogTextDiv.setAttribute("style" , "text-align:center");
modalDialogTextSpan = document.createElement("span");
modalDialogText = document.createElement("strong");
modalDialogText.innerHTML = "Processing... Please Wait.";
breakElement = document.createElement("br");
imageElement = document.createElement("img");
imageElement.src = chrome.extension.getURL("spinner_progress.gif");
modalDialogTextSpan.appendChild(modalDialogText);
modalDialogTextDiv.appendChild(modalDialogTextSpan);
modalDialogTextDiv.appendChild(breakElement);
modalDialogTextDiv.appendChild(breakElement);
modalDialogTextDiv.appendChild(imageElement);
modalDialogSiblingDiv.appendChild(modalDialogTextDiv);
modalDialogParentDiv.appendChild(modalDialogSiblingDiv);
document.body.appendChild(wrapperDiv);
document.body.appendChild(modalDialogParentDiv);
source to share
Popups in Chrome are closed by design when you go outside the popup area (well, not only because of an issue - but that's OT). There is no way to open it.
Alternative ways could be:
- to inform the user through desktop notification
- open another tab (after the extension is done with its task) with a successful message
- shows warning
- shows a modal version on a page with screens.
- experimental infobars
There may be other ways, but I think they are the most useful.
source to share