Possible to have multiple content scripts for different functions?

Question

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);

Answer 1

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"]
    }
  ],