Chrome extension modal dialog or other solution to notify users?

Question

So I have created a chrome extension when clicked opens a popup for users to save curent tab as screenshot.

Screenshot:

The probelm is that when I go to some other tab and come back to tab where extension window was open, the window is no more there (though it still performs screenshot creation). Because of this one is not able to know whether extension actually created the screenshot and even the desktop notification doesn't show in this case since window went invisile after switching to other tabs and coming back.

Is there anyway to make this popup modal or some other solution so that users are able to know that screenshot was created even if they go to other tabs and come back to tab where extension was used ?

Answer 1

If you are looking for some modal Window code you can take this as a reference and customize to your requirements.

Output

Click For Larger Image

The idea is to engross a processing text mimic of a modal dialog.

Demonstration

manifest.json

Added a simple modal window through content script with a gif image.

{
    "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 formed

The idea is to paste an <iframe> on the page and add a cosmetic panel 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);