62

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.

Aryan Beezadhur
  • 4,503
  • 4
  • 21
  • 42
Dark Light
  • 933
  • 1
  • 10
  • 20
  • The excellent explanation I found on this Youtube video - https://www.youtube.com/watch?v=ew9ut7ixIlI – dheeraj Oct 01 '20 at 14:09

2 Answers2

67

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.

gignu
  • 1,763
  • 1
  • 14
  • 24
The Alpha
  • 143,660
  • 29
  • 287
  • 307
  • Hi Sheikh, thank for your quick answer. But it's just theory. I want to ask some specific case: I need to handle click on browser_action icon, which content script or background? or I want to refresh (F5) page,........I should use background or content_scripts? Thank – Dark Light Oct 19 '12 at 10:20
  • 3
    @DarkLight, yes you can use content script, see [this answer](http://stackoverflow.com/questions/6499471/trigger-chrome-browseraction-onclicked-with-a-function) and [also this](http://stackoverflow.com/questions/10041595/chrome-extensions-how-can-i-perform-an-action-when-chrome-browseraction-oncli) and [this one](http://developer.chrome.com/extensions/browserAction.html). – The Alpha Oct 19 '12 at 10:38
  • Hi @TheAlpha, I have 1 question. In terms of performance or processing they both make any difference. If I have to process some big script, which is better place to do background or content script? Or both ways can create some lapses? – pvnarula Mar 29 '16 at 18:50
  • It depends on your need, for big script to process something common a background script is better. – The Alpha Mar 29 '16 at 18:55
  • "they can read details of the web pages the browser visits, or make changes to them" [content scripts are actually quite a bit more restricted than this quote would have one believe](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#Content_script_environment) – Mattwmaster58 Jan 01 '21 at 22:34
35

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.

bytrangle
  • 979
  • 11
  • 9