在后台脚本中触发对话框

Question

我有一个 chrome 扩展程序，我会根据某些情况定期发出警报。

问题是 Javascript 中的默认警报非常难看，我正在尝试用更漂亮的东西替换它。

问题是当前警报是从后台脚本触发的。 Google 不允许我们在后台包含任何外部库 html。

鉴于此问题，我该如何用更现代的 UI 警报替换默认警报？

我想用 SweetAlert 之类的东西替换默认警报。

我的 background.js 目前是这样的：

 // on some alarm trigger
 function showpopup() {

        console.log(" in show popuup");
        console.log(Date());
        alert("ugly alert");
}

我还探索了从我的后台文件中注入另一个 js 文件的选项。

function showpopup() {
        console.log(" in show popuup");
        console.log(Date());
        var s = document.createElement('script');
        // added "script.js" to web_accessible_resources in manifest.json
        s.src = chrome.extension.getURL('script.js');
        s.onload = function() {
            this.remove();
        };
        (document.head || document.documentElement).appendChild(s);
}

我的script.js目前只是发出警报

alert("ugly alert now in script.js");

我不知道如何在这个 javascript 文件 script.js 中创建我自己的对话框。

Answer 1

问题是哪里您的警报会显示？

在 browser/OS 对话框中 window? 这就是 alert() 和朋友所做的；如您所见，它丑陋且死板。此外，它在技术上具有挑战性：它是一种旧机制，会停止执行 JS 代码直到关闭，这可能导致 API 故障； Firefox WebExtensions 特别不支持从后台页面调用它。

在后台页面？根据定义，它是不可见的。您可以在此处添加 DOM 个带有警报的节点，但您不会看到它。您的问题不是加载库，而是在哪里显示结果。

（看不见，所以这里没有图！）

在当前打开的选项卡中？ 劫持任意页面以显示您自己的 UI 很难，容易崩溃，需要严格的权限并在安装时发出用户警告，并不总是有效。不推荐。

新鲜 window? 可能（参见 chrome.windows API），但几乎 "modern UI" 根本没有（在至少你可以隐藏 URL 栏）。

在浏览器操作弹出窗口中？ Still not possible to trigger 它在 Chrome 中打开，所以就这样了。

通知用户此类事情的实际标准是chrome.notifications API。它提供有限的定制，但这是 "modern" 方法，考虑到您的扩展在警报时间没有 UI 表面已经打开。

Answer 2

您可以通过

将您的代码插入标签内容

JS: chrome.tabs.executeScript()
CSS: chrome.tabs.insertCSS()

第二种可能是使用内容脚本 (content.js)。但是你将不得不使用消息传递在 background.js 和 content.js 之间进行通信。

在后台脚本中触发对话框

Trigger a dialog box in background script

google-chrome-extension

google-chrome-devtools

google-chrome-app