How do all types of Chrome extension scripts work?

Question

I am new to Chrome extensions and would like to understand how all types of scripts / pages work.

Here is my understanding:

First, there are "content scripts" that should be used to actually modify the pages.

Secondly, there is a "background script" designed to operate as a server to which you send and receive messages, but does not modify the DOM of pages; therefore, it can perform tasks such as working with storage and linking between scripts, but not changing the page.

Finally, there are “pop-up scripts” that are separate from both content and background scripts, but you can still send / receive messages between them.
Pop-up scripts can NOT directly modify the page (the same as the background script), they can only send messages to the other two.
You do not declare them at all in the manifest file, you can just go straight and use them in your popup html file.

In the end, only content scripts can ultimately actually change the page.

Am I right?

Answer 1

Documentation for expanding one Chrome Link to the rule for all, one link to find them,
One link to list them all and in the dark bind() them ¹ :

→ Architecture Overview <<

(impression from the performer)

He must answer many of your questions. However, this will be a poor SO answer, so the summary from me:

Background page / scripts : Only one page exists per extension. It is invisible and can never be displayed on a tab. It is usually open while Chrome is open, although there are exceptions. Since it is always present and has the highest level of access to the Chrome APIs, it is often used for the main logic / event routing between parts of the extension. In short, background work.

Page / Scripts :. A variation of background pages that are unloaded if there is no code. This saves memory, but introduces complexity in terms of maintaining state. Chrome remembers which events to listen on (via addListener ) and load the page again when they happen. Hence the event page.

In addition, the extension may have other, visible pages. You can simply open them in a tab (they will have the address chrome-extension://extensionidgoeshere/page.html ) and they will have the same level of access to the Chrome API. However, two types of user interface are special for extensions:

Browser / Page Action pop-up: A small window opened by clicking on the corresponding user interface element. Unfortunately, it is also very fragile - it will close as soon as it loses focus. Other than that, it's just an extension page.

Options Page: Available in two versions. Version 1 Parameters page is only a tab open when parameters are called for expansion; The version 2 version page can optionally be shown in a special field inside chrome://extensions/ . Again, besides this, this is just a page with extension privileges.

Finally, having multiple pages is fun, but if you want to interact with existing pages / tabs, you will need to embed scripts in them.

Content scripts are scripts that run next to pages; for compatibility reasons, they work in an isolated world . For security reasons, they are severely limited in accessing the Chrome API. But they share the DOM with the page, and therefore can modify it.

Page - level scripts are something you will hardly find in the documentation (as "DOM injected scripts" ), but they are very useful for overcoming the barrier between the JavaScript extension and native JavaScript. A good overview of them is presented in this answer by the magnificent Rob W.

Having identified all the relevant parts of the extension, the documentation page also briefly mentions how to communicate between them. For a more detailed look at this aspect, see this answer (again Rob W) and the Exchange Documentation .

---

¹ Seriously, however, every novice extension developer should read this, and this page is not important documentation. Good job google.