Skip to content

Browser Extensions development introductions

Jump to bottom
jkodevelop edited this page May 30, 2021 · 1 revision

Everything starts from manifest.json file and permissions specified inside.

This is what is available from browser extensions controls.

webextension-anatomy

Background Page

This script runs as long as the extension is enabled.

Usage (not limited to):

  1. check tabs url changes then update or redirect
  2. check tabs url then show different extensions popup
  3. handling messaging between different extensions layers. (eg. content_script communicate with background, save the data in localStorage)
  4. data tracking
  5. update extensions icons (eg. To alert a user there is an context action for particular active web page)

Content Scripts

This script allows accessing DOM of the active web pages. Cannot call out directly to other spaces but can communicate with background scripts.

Loaded and run in context of particular url, controlled by manifest.json declarations

content_scripts[{ "matches":[<url1>,<url2>] }]

Usage (not limited to):

  1. extract DOM data from web page of matched url
  2. send/receive messages to/from background/content scripts for storage or further actions
  3. change DOM content (eg. add border/highlights, censoring or add to content)

Browser Action / Page Action

This allows for control on the extension in toolbar for user interactions using popup or sidebar.

popup

Usage (not limited to):

  1. display data for user
  2. allow user interactivity
  3. send messages to content scripts for DOM manipulation based on user actions

More Info

please refer to documentations:

sources:

Clone this wiki locally