Chrome扩展模式对话框或其他解决方案通知用户？

Question

所以我在点击时创建了一个chrome扩展程序，为用户打开一个弹出窗口，以将curent标签保存为屏幕截图。

截图：

问题是，当我转到其他选项卡并返回到扩展窗口打开的选项卡时，窗口不再存在（尽管它仍然执行屏幕截图创建）。因为这个人无法知道扩展是否实际创建了屏幕截图，甚至在这种情况下桌面通知也没有显示，因为在切换到其他标签并返回后窗口变为无效。

有没有制作这个弹出模式或其他解决方案，以便用户能够知道即使他们转到其他标签并返回使用扩展名的标签，也会创建截图？

Answer 1

如果您正在寻找一些模态窗口代码，您可以将其作为参考并根据您的要求进行自定义。

输出

Click For Larger Image

这个想法是为了处理模态对话框的处理文本模仿。

示范

的manifest.json

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

定位要形成的HTML

我们的想法是在页面上粘贴<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>

使用基本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);

Answer 2

当您在弹出区域外单击时，Chrome中的弹出窗口会按设计关闭（好吧，不仅仅是因为issue - 而且它是OT）。没有办法让它打开。

替代方式可能是：

• 通过桌面通知告知用户
• 打开另一个标签（扩展完成其作业后），并显示成功消息
• 显示提醒
• 在屏幕截图页面上显示模式。
• experimental infobars

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