🔬Chrome Extension Types

Content script

Content scripts are files that run in the context of web pages. Using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them, and pass information to their parent extension.

When do you need it?

1. You need to access data from the web page

2. You need to inject custom elements (Or UI) into the web page

Example: Tailwind breakpoint responsive display (It injects a widget into the web page, which is done through content script)

Content script sidebar

This is similar to Content script. The only difference is that the content of your extension will be displayed in a sidebar.

Example: Meta Explorer

Side Panel

You can use the native chrome side panel for your extension.

Example: Tango

Popup

A popup is an action that displays a window letting users invoke multiple extension features. It's triggered by a keyboard shortcut or by clicking the extension's action icon. Popups automatically close when the user focuses on some portion of the browser outside of the popup. There is no way to keep the popup open after the user has clicked away.

Example: Wappalyzer

Iframe

You can use an iFrame to put your content in. By doing so you can avoid UI conflicts with the parent page and can also push changes faster as you don't have to go through the review process for every change. But it has it's drawbacks as well.

There are 2 options

• Load content from a live web app

• Load content from local extension files

Note

In some of your extensions you might use multiple types together.

For example: Tailwind breakpoint responsive display extension has both content scripts and popup. Configuration and customisation is provided in the popup and the actual functionality is provided through the content script.