What is the purpose of a background page?

Question

I've read the docs but can't see what the purpose of a background page is. I'm not talking about background scripts (I know what they are for), I'm referring to background HTML pages.

Background HTML pages seem to be "invisible" pages in the extension, so why would we need to mark up a page in HTML if it's not going to be seen or used? Thanks.

Intended

Answer 1

Chrome document seems to have a bit more info and an example on background pages.

The explanation from Chrome:

Background Pages
A background page will be generated by the extension system that includes each of the files listed in the scripts property.

If you need to specify HTML in your background page, you can do that using the page property instead.

The explanation from MDN:

background
If you specify only "scripts", then an empty page will be created for your scripts to run in.

If you need some particular content in the page, you can define your own page using the "page" option.

If you use this property, you can still specify background scripts using "scripts" if you want, but you can also include your own scripts from the page, just like in a normal web page.

Update

Understanding Google Chrome Extensions
Background Pages

Background Pages come in two flavours: with markup or without markup. Background pages are the controllers of our application and exist through all the time our application is alive. They can be consumed by any tab at any time as long as the Background Page has registered an event listener. You can go to the Extensions section in the Setting part of Chrome and you will see a page that lives there.

Background pages usually just have either javascript inside them (which might as well be markupless) or iframes that help bootstrap some evals for applications. If you specify the background page as an html, they will be rendered as that, but if you just specify scripts in the "background" option of the manifest file, Google Chrome will generate one for you. Currently, I just use one option over the other to organize my scripts.

How to use it In the manifest file, you either specify an .html page under the page directive inside the "background" option, or under the scripts directive in the same option. You can set up this as an array.

When to use it I find background pages useful in 3 scenarios:

• When multiple tabs consume your application and you need to have a common gateway for the interaction.
• When you need communication between your content script and a page action/browser action for any reason.
• When you need a specific task made in the background.

Lewan

Thanks. It's still not clear why we'd need an actual background HTML page. The idea of background scripts makes sense (to maintain long term state etc.), but I still can't see what the background HTML page is for. Can anyone explain why we might need a background HTML page, or give (or point to) and example of how we might use one? – Intended

I added more info to my post. I hope that helps :) – Lewan

Can anyone point to a WebExtension that actually uses a background HTML page? Everything I try with background HTML pages does not work. (I have been able to get other test WebExtensions running with background scripts.) I looked through all the example WebExtensions at github.com/mdn/webextensions-examples and none of them appear to use a background HTML page (i.e. none of them set the "page" attribute of the "background" key in manifest.json to anything.) – Intended

Lord Null - I'm also not satisfied with why background pages exist. Though I'm guessing it's more a technical artifact rather than a design choice - since the js runtime is done in the context of a page for browsers. It feels like it was just easier for them to leverage that than try to expose a separate medium. – Pyrology

Answer 2

The background page permit to import javascript files in a same context (the require or import language keywords are not yet enabled in Firefox Web Extensions).

Imagine a javascript file called main.js that needs to call a function in an other javascript file called foo.js.

How can you import the function from foo.js in main.js without import or require functions? (Disclaimer: one way is to have a background page that includes all the required scripts that you need).

Greatly

Doesn't the "scripts" part of the "background" manifest.json key include background scripts into the WebExtension? Why the need for an HTML page to include needed scripts? (developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/…) – Intended

Answer 3

Old question, but background.scripts is merely a wrapper over background.pages. Specifying "scripts": ["script1.js", "script2.js"] is exactly the same as specifying "page": "background.html", where the code for background.html is as follows:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
</body>
</html>

Open your extension in the debugger to see the page HTML. Even if you specified background.scripts, your scripts can still alter the DOM. The page itself mostly exists to allow access to global variables.

Owe