Google chrome extension 在后台脚本中触发对话框

我有一个chrome扩展，在那里我会定期根据一些东西发出警报

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

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

考虑到这个问题，我如何用更现代的UI警报替换默认警报

我想用类似的东西替换默认警报

My 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中创建自己的对话框

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

在浏览器/OS对话框窗口中？这就是

alert（）

和朋友所做的；在你看来，这是丑陋和僵化的。此外，它在技术上也具有挑战性：它是一种旧机制，在关闭之前停止执行JS代码，这可能导致API出现故障；Firefox WebExtensions特别不支持从后台页面调用此功能

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

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

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

在一个新窗口中？可能（请参阅

chrome.windows

API），但几乎没有“现代UI”（至少可以隐藏URL栏）

在浏览器操作弹出窗口中？它将在Chrome中打开，因此退出

告知用户这些事情的事实标准是的。它提供了有限的定制，但这是“现代”方法，因为您的扩展在警报时没有打开的UI界面

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

在浏览器/OS对话框窗口中？这就是

alert（）

和朋友所做的；在你看来，这是丑陋和僵化的。此外，它在技术上也具有挑战性：它是一种旧机制，在关闭之前停止执行JS代码，这可能导致API出现故障；Firefox WebExtensions特别不支持从后台页面调用此功能

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

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

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

在一个新窗口中？可能（请参阅

chrome.windows

API），但几乎没有“现代UI”（至少可以隐藏URL栏）

在浏览器操作弹出窗口中？它将在Chrome中打开，因此退出

告知用户这些事情的事实标准是的。它提供了有限的定制，但这是“现代”方法，因为您的扩展在警报时没有打开的UI界面

---

您可以通过将代码插入选项卡内容

JS:

chrome.tabs.executeScript（）

CSS:

chrome.tabs.insertCSS（）

---

第二种可能是使用内容脚本（content.js）。但是，您必须使用消息传递在background.js和content.js之间进行通信。

您可以通过

JS:

chrome.tabs.executeScript（）

CSS:

chrome.tabs.insertCSS（）

---

第二种可能是使用内容脚本（content.js）。但是，您必须使用消息传递在background.js和content.js之间进行通信。

您不能以这种方式将代码注入活动页面，但您不需要-签出chrome.tabs.executeScript。基本上，您需要使用来自后台脚本的命令或在清单“content_scripts”部分中指定的命令在页面中注入脚本。然后在该脚本中，您需要一个消息侦听器chrome.runtime.onMessage.addListener。然后，您将在后台脚本中使用chrome.runtime.sendMessage调用活动选项卡中的脚本。这应该足够多的指针来帮助你了。你不能用这种方式将代码注入到活动页面中，但是你不需要-checkout chrome.tabs.executeScript。基本上，您需要使用来自后台脚本的命令或在清单“content_scripts”部分中指定的命令在页面中注入脚本。然后在该脚本中，您需要一个消息侦听器chrome.runtime.onMessage.addListener。然后，您将在后台脚本中使用chrome.runtime.sendMessage调用活动选项卡中的脚本。这应该是足够的帮助，谢谢。成功了。我复制了sweetalert的JS代码，并使用executeScript.Thank触发了该脚本。成功了。我复制了sweetalert的JS代码，并使用executeScript触发了该脚本。