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

Question

所以我创建了一个 chrome 扩展，当点击打开一个弹出窗口供用户将当前选项卡保存为屏幕截图。

截图:

问题是当我转到其他选项卡并返回到打开扩展窗口的选项卡时，该窗口不再存在(尽管它仍然执行屏幕截图创建)。因此无法知道扩展程序是否真的创建了屏幕截图，甚至在这种情况下桌面通知也不会显示，因为在切换到其他选项卡并返回后窗口变得不可见。

有没有办法使这个弹出模式或其他一些解决方案，以便用户能够知道屏幕截图已创建，即使他们转到其他选项卡并返回到使用扩展名的选项卡？

Answer 1

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

输出

Click For Larger Image

这个想法是全神贯注于模态对话框的处理文本模拟。

演示

list .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"
    ]
}

模态.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);