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

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()).

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

显然,如果用户交互将从网页内部而不是浏览器UI开始,则需要在所有相关页面上注入脚本.如果这样做,您将需要在内容脚本和后台脚本之间使用消息传递,如果后台脚本需要执行某些操作,这需要后台脚本对扩展API的更广泛访问.

描述manifest.json中的内容脚本注入

如果没有关于如何将内容脚本添加到manifest.json(例如方案,域,页面(即URL),脚本名称等)的更多信息,我们无法告诉您具体如何操作,除了阅读文档.我会说,使用manifest.json和tabs.executeScript().注入相同的内容脚本是不常见的.这样做没有任何内在错误.如果是正确的事情将取决于代码和网站.

文档中可能未清楚的一点是content_scripts密钥是一个对象数组.每个对象描述一组注射.对象中的所有文件都将注入到与该对象中提供的URL模式匹配的页面中.您可以根据需要在content_scripts阵列中使用尽可能多的对象来描述注射组.

以下示例使用manifest.json(改编自Chrome的Content Scripts页面上的 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"]
    }
  ],