在后台脚本中触发对话框答案

【问题标题】：Trigger a dialog box in background script在后台脚本中触发对话框
【发布时间】：2018-04-30 00:08:28
【问题描述】：

我有一个 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 中创建我自己的对话框。

【问题讨论】：

您不能以这种方式将代码注入活动页面，但是您不需要 - 签出 chrome.tabs.executeScript。基本上，您需要使用后台脚本中的该命令或通过在清单“content_scripts”部分中指定来将脚本注入页面。然后在那个脚本中你需要一个消息监听器 chrome.runtime.onMessage.addListener。然后，您将在后台脚本中使用 chrome.runtime.sendMessage 来调用活动选项卡中的脚本。这应该足以提供帮助。

标签： google-chrome-extension google-chrome-devtools google-chrome-app

【解决方案1】：

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

在浏览器/操作系统对话窗口中？ alert() 和朋友们就是这样做的；如您所见，这是丑陋且不灵活的。此外，它在技术上具有挑战性：它是一种旧机制，会停止执行 JS 代码直到关闭，这可能会导致 API 故障； Firefox WebExtensions 具体不支持从后台页面调用它。

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

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

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

在新窗口中？可能（请参阅chrome.windows API），但根本不是“现代 UI”（至少您可以隐藏 URL 栏）。

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

通知用户此类事情的实际标准是chrome.notifications API。它提供有限的自定义，但考虑到您的扩展程序在警报时没有打开 UI 界面，这是一种“现代”方法。

【讨论】：

【解决方案2】：

您可以通过

将代码插入标签内容

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

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

【讨论】：

谢谢。有效。我复制了 sweetalert 的 JS 代码并使用 executeScript 触发了该脚本。