Question

我是新手，但我正在尝试创建一个chrome扩展来操作网页上的DOM。目前，我有两个按钮，每个按钮将执行不同的任务。以下是否有意义？此外，如果我有多个内容脚本，我如何将它们都添加到manifest.json

中

popup.js：

function injectTheScript() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        // query the active tab, which will be only one tab
        //and inject the script in it
        chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
    });
}
function injectTheScript1() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        // query the active tab, which will be only one tab
        //and inject the script in it
        chrome.tabs.executeScript(tabs[0].id, {file: "content_script1.js"});
    });
}

document.getElementById('clickactivity').addEventListener('click', injectTheScript);
document.getElementById('clickactivity1').addEventListener('click', injectTheScript1);

Answer 1

每个函数注入一个内容脚本的方式没有任何问题。但是，您可以通过不使用tabs.query()来获取活动选项卡，使其更简单一些。用于tabs.executeScript()的默认标签是当前有效标签（即您从tabs.query()获得的标签）。

在为每个功能注入脚本或者为发起所需功能而发出消息的脚本之间选择哪个更好，这取决于您的设计以及您尝试执行的操作。如果它们是相对罕见的函数（特别是由用户操作引发的，就像你的那样），那么为每个函数注入一个脚本通常是更好的选择（这是我在其中一个扩展中所做的事情）。当脚本只是从后台脚本receives a message开始执行某些操作时，它肯定比在很多网站上注入很少使用的脚本更好。例如，等待用户与浏览器UI（而不是内容UI）交互的扩展，然后该消息从后台脚本向内容脚本发送消息以执行任务。在这种情况下，最好等到注入内容脚本直到需要它为止。

显然，如果用户交互将从网页内部开始，而不是从浏览器UI开始，则需要在所有相关页面上注入脚本。执行此操作时，如果后台脚本需要执行某些操作，则需要在内容脚本和后台脚本之间使用message passing，这需要后台脚本对扩展API的更广泛访问权限。

在 manifest.json

中描述内容脚本注入

如果没有关于如何将内容脚本添加到 manifest.json （例如方案，域，页面（即URL），脚本名称等）的更多信息，我们除了read the docs之外，我们无法告诉你如何做到这一点。我会说，使用 manifest.json 和tabs.executeScript()注入相同的内容脚本是不常见的。这样做没有任何内在错误。如果是正确的事情将取决于代码和网站。

文档中可能未清楚的一点是content_scripts键是一个对象数组。每个对象描述一组注射。对象中的所有文件都将注入与URL patterns provided in that object匹配的页面中。您可以根据需要在content_scripts数组中包含尽可能多的描述注射组的对象。

以下示例使用 manifest.json （改编自Chrome's Content Scripts page上的cod）加载多个内容脚本并将不同的内容脚本加载到不同的页面上。

在与https://www.google.com/*匹配的所有网页中，它会注入 myGoogleStyles.css ， jquery.js 和 myGoogleScript.js 。
在匹配http://www.example.com/*的所有网页中，它会注入 myExampleStyles.css ， jquery.js 和 myExampleScript.js ：

"content_scripts": [
    {
      "matches": ["https://www.google.com/*"],
      "css": ["myGoogleStyles.css"],
      "js": ["jquery.js", "myGoogleScript.js"]
    },
    {
      "matches": ["http://www.example.com/*"],
      "css": ["myExampleStyles.css"],
      "js": ["jquery.js", "myExampleScript.js"]
    }
  ],

可以为不同的功能提供多个内容脚本吗？

1 个答案:

在 manifest.json