Home Software 01 Github 02 Colabs 03 Shell Basics 04 Apis 05 Webscraping 06 Nbdev 07 Javascript Packag... 08 Cloud Functions 09 Browser Extension Css Css Animations Javascript Llm Paradigms Protocols Websites

Don't Look! I'm changing!

URL Copied

⚠ī¸ This writing is a work in progress.⚠ī¸

BinderBinderBinderOpen Source Love svg3

NPM LicenseActiveGitHub last commit

GitHub starsGitHub watchersGitHub forksGitHub followers

TweetTwitter Follow

note: There is a lot of quoting and paraphrasing on this page in particular. Be sure to check the links you want to learn more.

notice: Chrome's V2 Documentation on their Extensions were used extensively in the writing of this piece. Refer to the above link for something more complete.

warning: A new Chrome Extension Versioning exists and so information is effectively now old and may be depricated.

Extensions are browser-event based programs that enhance the Chrome browsing experience.

browserAction/ Popup - What we all think of when we think of an extension. A small box in the corner that opens a popup when clicked.

Background scripts - No User interface. Do not execute on the bhe webpage. Can be triggered by an event.

content scripts - Can modify a webpage. runs inline on the browser.

options page - A dedicated page a developer can create that lets users set up options for the extension.

themes - Change the look of the browser

Extensions are made of different, but cohesive, components:

  1. Create the manifest.json

  2. Add instruction

  3. Introduce a user interface

  4. Layer logic

  5. Give users options

  6. Take the next step


Create the manifest.json

The directory holding the manifest file can be added as an extension in developer mode in its current state.


chrome://extensions => More Tools => Extensions => Enable Developer Mode then click LOAD UNPACKED

Add instruction

A background page is loaded when it is needed, and unloaded when it goes idle. Some examples of events include:

Although the extension has been installed, it has no instruction.

Introduce a background script by creating a file titled background.js for storing data

undefined undefined


manifest.json This is the only file that must be present in every extension.

This manifest can also contain pointers to several other types of files:


Introduce a user interface

Extensions can have many forms of a user interface, but this one will use a popup. Create a popup.html.

Like the background script, this file needs to be listed in the manifest under page_action.

Toolbar icons are also included under page_action section via the default_icons field.

undefined undefined

Available APIS

Content scripts

A content script is a part of your extension that* runs in the context of a particular web page*

(as opposed to background scripts which are part of the extension,

or scripts which are part of the web site itself


Background scripts can access all the WebExtension JavaScript APIs, but they can't directly access the content of web pages. So if your extension needs to do that, you need content scripts.

Load the extension.

Of note but not covered: https://meetingdolphin.com/blog/chrome-extension-submission


"background": { "page": "background.html" }": Specifies a background page for the extension. A background page contains the logic that the extension runs in the background.

"commands": Defines keyboard shortcuts for the extension. "reload": A command name. "description": A brief description of the command. "suggested_key": The recommended key combination for triggering the command. Here, it's "Alt+Shift+R".

"options_ui": Specifies the options page for the extension. "page": "options.html": The HTML file that represents the options page. "chrome_style": true: Indicates whether to apply Chrome's styling to the options page.

"browser_action": Defines a button in the Chrome toolbar for the extension. "default_icon": "icon19.png": The default icon for the toolbar button. "default_title": "Reload Extensions": The tooltip text when you hover over the button.

"action": Describes the default action of the extension, which replaces the browser action or page action in MV3. "default_icon": Specifies icons for the default action. "default_popup": "popup.html": The popup that shows when the action icon is clicked.

"content_scripts": Lists the scripts and stylesheets that should be injected into web pages. "js": [ "writer.fd84a220.js" ]: JavaScript file to be injected. "matches": [ "" ]: The script will be injected into all URLs. "css": [ ]: No CSS files to be injected (empty array).

"externally_connectable": Specifies which sites the extension can communicate with. "matches": [ "https://.chatgptwriter.ai/", "http://localhost:3000/*" ]: The extension can communicate with the ChatGPT Writer site and a local server running on port 3000.

"permissions": A list of permissions the extension requests. Permissions determine what the extension can access or do. For example, "tabs" allows the extension to interact with browser tabs, "management" allows managing other extensions, and so on.

"host_permissions": [ "" ]: The extension requests permissions to interact with all URLs.