Background Scripts vs Content Scripts in Chrome Extensions

I read about Background page and Content scripts at developer.chrome.com but I'm confused with them, I cannot understand when to use background scripts and when to use content scripts. For example:

manifest.json:

{
    "name": "Hello World",
    "version": "2.0",
    "manifest_version": 2,
    "background": 
    {
        "scripts": ["background.js"]
    },
    "content_scripts":
    [
        {
            "matches": ["http://*/*", "https://*/*"],
            "js": ["js/myScript.js"]
        }
    ],
    "permissions": ["tabs", "http://*/*"],
    "browser_action":
    {
        "default_icon": "icon.png"
    }
}

If background.js is:

// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
  alert("test");
});

It works well, but if I put the same code above in myScript.js, it doesn't work.

So I don't know which script should be located in background.js, and which should be located in content scripts.

Solution 1:

Actually, Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

A common need for extensions is to have a single long-running script to manage some task or state. Background pages to the rescue.The background page is an HTML page that runs in the extension process. It exists for the lifetime of your extension, and only one instance of it at a time is active.

Solution 2:

I know this question was ages ago, but I recently got into Chrome extension development and had the exact question as you. So I hope my answer will shed some light on this confusion.

You have specified myScript.js as your content script. The reason that you code didn't work when put inside the content script is because it needs to listen for the browser button click event. However, content script only has limited access to Chrome api, mostly chrome.runtime event. It can't detect chrome.browserAction.onClick event.

The background script, on the other hand, has access to a full array of Chrome apis.

When to use background script as opposed to content script depends on your extension goal. Do you want to simply change the presentation of a web page? Then you only need content script, not background script. For example, if you want to make an extension to toggle dark mode on any web page, you can do without background script.

What if you want to save your user preferences for a list of sites on which your extension will automatically toggle dark mode? Then add a background script that: - stores their preferences to Chrome storage.

• detect when the user has landed on a site in the list
• send a message to the content script to instruct it to toggle the dark mode.

That's not the best example, but my point is background script is needed when you need to process common functions and persist user experience.