对于不同的功能可能有多个内容脚本？ [英] Possible to have multiple content scripts for different functions?

问题描述

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

$ b

popup.js：

 函数injectTheScript（）{
 chrome.tabs.query（{active：true，currentWindow：true}，function（tabs）{
 // query活动选项卡，它将只有一个选项卡
 //并在其中注入脚本
 chrome.tabs.executeScript（选项卡[0] .id，{file：content_script.js}）; 
}）; 
 
函数injectTheScript1（）{
 chrome.tabs.query（{active：true，currentWindow：true}，function（tabs）{
 //查询活动选项卡，这将只是一个标签
 //并在其中注入脚本
 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中的内容脚本注入

没有更多的信息您希望如何将您的内容脚本添加到您的 manifest.json （例如方案，域，页面（即URL），脚本名称等），我们无法准确告诉您如何除了阅读文档以外。我会说，使用 manifest.json 和 tabs.executeScript（）注入相同的内容脚本是很平常的。这样做没有任何内在的错误。如果这是正确的事情将取决于代码和网站（s）。

文档中可能没有清楚的一点是 content_scripts 键是一个Array of对象。每个对象描述一组注射。该对象中的所有文件都被注入到符合所提供的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：[
{
匹配：[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]
}
]，


I am new to this, but I am trying to create a chrome extension to manipulate DOMs on the webpage. Currently, I have two buttons and each button will do different tasks. Does the following make sense? Also if I have multiple content scripts, how can I add them both into the 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);

解决方案

There is nothing wrong with how you are injecting one content script per function. You could, however, make it a little simpler by not using tabs.query() to obtain the active tab. The default tab used for tabs.executeScript() is the currently active tab (i.e. the one you are getting from tabs.query()).

Which is the better choice between injecting a script per functionality or one script which you message to initiate the desired function depends on your design and what you are attempting to do. If they are functions that are relatively rare (in particular instigated by user action, as yours are), then injecting a script per function is often the better choice (it is something I do in one of my extensions). It is certainly better than having a rarely used script be injected on a large number of websites when the script is only there to start to do something when it receives a message from the background script. For example, an extension that waits for user interaction with the Browser UI (not content UI) which then sends a message from the background script to the content script to perform a task. Definitely in that case, it is better to wait to inject the content script until it is needed.

Obviously, if the user interaction is going to start from within the webpage, not the browser UI, then the script needs to be injected on all relevant pages. When you do so you will need to use message passing between the content script and background script if the background script needs to do something which requires the wider access a background script has to the extension APIs.

Describing content scripts injections in manifest.json

Without more information as to how you want your content scripts added to your manifest.json (e.g. scheme(s), domains, pages (i.e URLs), the script names, etc.) we can't tell you exactly how to do so, other than to read the docs. I will say that it would be unusual for you to be injecting the same content scripts using both your manifest.json and tabs.executeScript(). There is nothing inherently wrong with doing so. If it is the correct thing to do will depend on the code and site(s).

One of the things that might not have been clear from the documentation is that the content_scripts key is an Array of Objects. Each object describes one group of injections. All files in the object are injected into the pages that match the URL patterns provided in that object. You can have as many objects describing groups of injections as you desire in the content_scripts array.

The following example both loads multiple content scripts and loads different content scripts onto different pages, using manifest.json (adapted from cod on Chrome's Content Scripts page).

Into all pages matching https://www.google.com/*, it will inject myGoogleStyles.css, jquery.js, and myGoogleScript.js.
Into all pages matching http://www.example.com/*, it will inject myExampleStyles.css, jquery.js, and 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"]
    }
  ],

这篇关于对于不同的功能可能有多个内容脚本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！