可能有多个内容脚本为不同的功能

Possible to have multiple content scripts for different functions?

本文关键字：功能 脚本 可能有      更新时间：2023-09-26

我是新来的，但我正试图创建一个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);

如何为每个函数注入一个内容脚本并没有错。但是，您可以通过不使用tabs.query()来获取活动选项卡来简化它。tabs.executeScript()使用的默认选项卡是当前活动的选项卡(即您从tabs.query()获得的选项卡)。

根据您的设计和您想要做的事情，在为每个功能注入脚本或为启动所需功能发送消息的脚本之间，哪个是更好的选择。如果它们是相对罕见的函数(特别是由用户操作引起的，就像您的函数一样)，那么为每个函数注入脚本通常是更好的选择(我在我的一个扩展中就是这样做的)。这当然比在大量网站上注入很少使用的脚本要好，当脚本只是在那里开始做一些事情时，它接收到来自后台脚本的消息。例如，一个等待用户与浏览器UI(不是内容UI)交互的扩展，然后从后台脚本向内容脚本发送消息以执行任务。在这种情况下，最好等到需要时再注入内容脚本。

显然，如果用户交互将从网页内开始，而不是浏览器UI，那么脚本需要注入到所有相关页面。当你这样做，你将需要使用内容脚本和后台脚本之间的消息传递，如果后台脚本需要做的事情，需要更广泛的访问后台脚本有扩展api。

manifest.json描述内容脚本注入

没有更多关于如何将内容脚本添加到清单的信息。json(例如，方案(s)，域名，页面(即url)，脚本名称等)，我们不能告诉你确切地如何做到这一点，除了阅读文档。我要说的是，您使用两个清单注入相同的内容脚本是不寻常的。json和tabs.executeScript() . json。这样做本身并没有什么错。如果这是正确的事情，将取决于代码和网站。

文档中可能不清楚的一件事是content_scripts键是一个对象数组。每个物体描述一组注射。对象中的所有文件都被注入到与该对象中提供的URL模式匹配的页面中。您可以在content_scripts数组中拥有任意多的描述注射组的对象。

下面的示例使用manifest加载多个内容脚本，并将不同的内容脚本加载到不同的页面。json(改编自Chrome的内容脚本页面)。

在所有匹配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"]
    }
  ],
相关文章：