javascript Chrome扩展程序模态对话框或其他通知用户的解决方案？

Chrome extension modal dialog or other solution to notify users?

提问by dev02

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

因此，我创建了一个 chrome 扩展程序，单击时会打开一个弹出窗口，供用户将当前选项卡保存为屏幕截图。

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 ?

无论如何，是否可以制作此弹出窗口或其他一些解决方案，以便用户即使转到其他选项卡并返回使用扩展名的选项卡，也能够知道屏幕截图已创建？

回答by Sudarshan

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

清单文件.json

Added a simple modal window through content script with a gifimage.

通过带有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

模态.js

Target HTML to be formed

要形成的目标 HTML

The idea is to paste an <iframe>on the page and add a cosmetic panel for customized text.

这个想法是<iframe>在页面上粘贴一个并为自定义文本添加一个装饰面板。

<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.

使用基本 DOM 操作的 HTML 代码。

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);

回答by Ragnarokkr

Popups in Chrome closes by design when you click outside the popup area (well, not only, due to an issue- but it's OT). There's no way to keep it opened.

当您在弹出区域外单击时，Chrome 中的弹出窗口会按设计关闭（嗯，不仅是由于问题- 但它是 OT）。没有办法让它保持打开状态。

Alternative ways could be:

替代方法可能是：

• to inform the user via desktop notification
• open another tab (once the extension has done with its job) with a successful message
• shows an alert
• shows a modal on the screenshot-ed page.
• experimental infobars

• 通过桌面通知通知用户
• 使用成功消息打开另一个选项卡（一旦扩展完成其工作）
• 显示警报
• 在屏幕截图页面上显示一个模式。
• 实验信息栏

Probably there are other ways of course, but I guess these are the most usable.

当然可能还有其他方法，但我想这些是最有用的。