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

Question

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

截屏：

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

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

Answer 1

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

输出

点击查看大图

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

示范

清单.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 中的弹出窗口会按设计关闭（嗯，不仅是由于问题- 但它是 OT）。没有办法让它保持打开状态。

替代方法可能是：

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

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