What is the difference between a background page/script and a popup page?

Question

What is the difference between a background page and a popup page?
What is a content script?

Answer 1

Chrome extensions have many different terms that may look like similar. I will do my best to clarify those terms:

Background page/script: Basically a page (ManifestV2) or a service worker (ManifestV3) that runs in background of the application, without displaying anything. This context will be granted every permissions you have requested in the manifest file. It should be used to access core-features as adding items to the context menu, read favorites, display a browser/page action.

Popup page: The name says it all, it creates a popup page. One particularity is that it will look like a "bubble" over the page. It can be quite helpful if a feature is not related to any specific url. Like the background page, the popup page will be granted every features requested.

Content script: A content script is basically a script that you can inject in the current page. Althought you cannot access custom variables directly, you may alterate the DOM and behavior of any page to add features into it. Note: you must request permissions on every domains on which a content script is injected.

To get you started, I would advise you to follow this tutorial:

Getting Started: Building a Chrome Extension

Almost anything you need to know about chrome extension development is already documented here. As a chrome extension developer, I find it really easy to use and up to date.

Answer 2

I want to provide some further nuance to the accepted answer on this post and answer a question I had while building a browser extension with Manifest V3.

Content Scripts versus everything else

First and foremost, it is important to understand the distinction between content scripts and all other parts of a browser extension. Content scripts are injected into pages where an extension has requested and been granted permission to access, per the extension's manifest.json.

Most extensions will have at least one content script since generally the purpose of most browsers extensions is to alter the DOM and behavior of certain webpages.

Importantly, a content script is scoped to the page where it is injected and, with some important exceptions, is limited to the context of that page, so it cannot persist data across tabs and origins or surface data outside the page. (See Anatomy of an extension#Content scripts for more details.)

In contrast, background scripts and popup/options/sidebar pages all run in their own dedicated context in the browser and have access to WebExtension APIs which grant them elevated permissions to data and events in the browser. Notably (if granted permission) these scripts and pages can talk to any tab running in the browser and display their own UI hosted locally.

Sometimes you will need to offload logic from your content script to one of these background scripts or extension pages. This is typically needed when you need to pass data across tabs, run a script off in a service worker not associated with the webpage, or surface data in a custom UI such as a popup or standalone webpage.

When to use a background script versus a popup/options/sidebar page?

If you think of the distinction between content scripts and background script/pages as similar to the distinction between a frontend and backend context of a traditional web app/site, it may not be obvious which type of background script/page to use to run non-content script code.

Short answer – It doesn't particularly matter since both background scripts and popup/options/sidebar pages all inherit the same permissions and access to WebExtension APIs. If you are already building a popup or options UI, you can simply put all logic for message passing and other functions in a popup.js or options.js file.

Better answer – It ultimately comes down to a separation of concerns. Popup/options/sidebar pages are UI pages and code running on them should be UI-related code. Code that is not associated with a UI and just needs to run "in the background" can naturally be put in a background script.

However, it is also important to note that in Manifest V3, background scripts are non-persistent service workers that are loaded in response to browser events and unloaded upon code completion. Background scripts in V3 cannot run code indefinitely like popup/options/sidebar pages and must be attached to an event, most commonly a message from a content script or extension page.

Further reading

Anatomy of an extension (MDN)