6

This article uses two terms "background page" and "background script"

I think of background script as of background field with scripts in Manifest.json

But what is the background page and how they differ?

John Kent
  • 386
  • 2
  • 11

2 Answers2

13

According to documentation:

The background script is the extension's event handler; it contains listeners for browser events that are important to the extension. It lies dormant until an event is fired then performs the instructed logic. An effective background script is only loaded when it is needed and unloaded when it goes idle.

You can configure if the background script remains dormant until needed or is always active with the persistentkey in the backgroundmanifest entry. For example:

"background": {
    "persistent": true,
    "scripts": ["myBackground.js"]
}

If you declare your background scripts using the scripts key (as above), Chrome will create an empty HTML page that includes the script(s) included in the script key of the background manifest entry. So in the case above, Chrome would create a background page like:

<html>
    <head>
    </head>
    <body>
        <script src="myBackground.js"></script>
    </body>
</html>

If you declare a background page instead, you decide what to include in the webpage, and you have to include your script tags in the page, since you cannot have both page and scripts keys in the background manifest entry.

The main difference (and advantage) of declaring a background page is that you can include whatever HTML elements you want in it. They will not be seen (background pages are never displayed), but they work as in any other webpage. For example, in the following background page I've included an audio tag to play music while the extension is running:

manifest.json

"background": {
    "persistent": true,
    "page": "myBackgroundPage.html"
}

myBackgroundPage.html

<html>
    <body>
        <audio id="mySong" src="mySong.mp3" autoplay loop></audio>
        <script src="myBackground.js"></script>
    </body>
</html>

You could have achieved the same result using only a script and including in it something like:

var myAudio = document.createElement('audio');
myAudio.src = 'mySong.mp3';
myAudio.autoplay = true;
myAudio.loop = true;
document.body.appendChild(myAudio);

but in cases like this I think that creating your own background page is more convenient.

Iván Nokonoko
  • 4,888
  • 2
  • 19
  • 27
3

Extension scripts run in pages, not in abstract space, so a background script is just a script that runs inside the background page, which is a separate hidden page with its own chrome-extension:// or moz-extension:// URL.

When you declare "background": { "scripts": [....] } in manifest.json, it effectively creates an automatic dummy html page like chrome-extension://blabla/_generated_background_page.html with script elements pointing to the script files you've listed. You can see it by inspecting the background page in devtools, which should be your primary go-to tool.

wOxxOm
  • 65,848
  • 11
  • 132
  • 136