在后台脚本中触发对话框

Question

我有一个镀铬扩展程序，我会定期根据某些内容发出警告。

问题是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

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

在浏览器/操作系统对话框窗口中？那是alert()和朋友们所做的事情;就像你看到自己一样，它丑陋且缺乏灵活性。此外，它在技术上具有挑战性：它是一种旧的机制，可以在关闭之前停止执行JS代码，这可能导致API出现故障; Firefox WebExtensions特别不支持从后台页面调用它。

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

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

在当前打开的标签中？劫持任意页面以显示您自己的用户界面很难，容易中断，在安装时需要严格的权限和用户警告，不会一直有效。不推荐。

在一个新的窗口中？可能（参见chrome.windows API），但很难＆＃34;现代用户界面＆＃34;根本（至少你可以隐藏URL栏）。

在浏览器操作弹出式窗口中 Still not possible to trigger它会在Chrome中打开，以便显示出来。

用于通知用户此类事情的<事实标准是 chrome.notifications API 。它提供有限的定制，但这是＆＃34;现代＆＃34;考虑到您的扩展程序在警报时没有打开UI表面。

Answer 2

您可以通过

将代码插入标签内容

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

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