â ī¸ This writing is a work in progress.â ī¸
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:
Create the manifest.json
Add instruction
Introduce a user interface
Layer logic
Give users options
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.
undefinedchrome://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:
The extension is first installed or updated to a new version.
The background page was listening for an event, and the event is dispatched.
A content script or other extension sends a message.
Another view in the extension, such as a popup, calls runtime.getBackgroundPage.
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 undefinedManifest
manifest.json This is the only file that must be present in every extension.
It contains basic metadata such as its name, version and the permissions it requires.
It also provides pointers to other files in the extension.
This manifest can also contain pointers to several other types of files:
Background scripts: Implement long-running logic.
Icons for the extension and any buttons it might define.
Sidebars, popups, and options pages: HTML documents that provide content for various user interface components.
Content scripts: JavaScript included that will be injected into web pages.
Web-accessible resources: Make (images, HTML, CSS, or JavaScript) accessible to pages and content scripts.
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 undefined section via the undefined field.
undefined undefinedAvailable APIS
alarms - Use the chrome.alarms API to schedule code to run periodically or at a specified time in the future.
browserAction - Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can have a tooltip, a badge, and a popup.
contextMenus - Use the chrome.contextMenus API to add items to Google Chrome's context menu. You can choose what types of objects your context menu additions apply to, such as images, hyperlinks, and pages.
desktopCapture - Desktop Capture API that can be used to capture content of screen, individual windows or tabs.
devtools.inspectedWindow - Use the chrome.devtools.inspectedWindow API to interact with the inspected window: obtain the tab ID for the inspected page, evaluate the code in the context of the inspected window, reload the page, or obtain the list of resources within the page.
devtools.network - Use the chrome.devtools.network API to retrieve the information about network requests displayed by the Developer Tools in the Network panel.
devtools.panels - Use the chrome.devtools.panels API to integrate your extension into Developer Tools window UI: create your own panels, access existing panels, and add sidebars.
events - The chrome.events namespace contains common types used by APIs dispatching events to notify you when something interesting happens.
fileSystemProvider - Use the chrome.fileSystemProvider API to create file systems, that can be accessible from the file manager on Chrome OS.
fontSettings - Use the chrome.fontSettings API to manage Chrome's font settings.
notifications - Use the chrome.notifications API to create rich notifications using templates and show these notifications to users in the system tray.
pageAction - Use the chrome.pageAction API to put icons in the main Google Chrome toolbar, to the right of the address bar. Page actions represent actions that can be taken on the current page, but that aren't applicable to all pages. Page actions appear grayed out when inactive.
pageCapture - Use the chrome.pageCapture API to save a tab as MHTML.
permissions - Use the chrome.permissions API to request declared optional permissions at run time rather than install time, so users understand why the permissions are needed and grant only those that are necessary.
tts - Use the chrome.tts API to play synthesized text-to-speech (TTS). See also the related ttsEngine API, which allows an extension to implement a speech engine.
webRequest - Use the chrome.webRequest API to observe and analyze traffic and to intercept, block, or modify requests in-flight.
automation - The chrome.automation API allows developers to access the automation (accessibility) tree for the browser. The tree resembles the DOM tree, but only exposes the semantic structure of a page. It can be used to programmatically interact with a page by examining names, roles, and states, listening for events, and performing actions on nodes.
processes - Use the chrome.processes API to interact with the browser's processes.
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
undefinedBackground 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.
Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions.
If the label "Developer mode" has a + button by it, click it. More buttons and information appear.
Click the Load unpacked extension button. A file dialog appears.
In the file dialog, navigate to your extension's folder and click OK.
If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page, as the following screenshot shows. Otherwise, an Error button that reveals a popup help you out.
Finally, Click vertical ellipsis (in the top right of the broswer) > Hover over "More tools" > Select "Extensions" (or just click that link)
Of note but not covered: https://meetingdolphin.com/blog/chrome-extension-submission
Random
"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": [ "
"externally_connectable": Specifies which sites the extension can communicate with. "matches": [ undefined, undefined ]: 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": [ "