Chrome Extension

This repo is a collection of learnings as I build my first Chrome extension.

Introduction

Chrome Extension Docs

Chrome extensions enhance the browsing experience by customising the UI, observing browser events, and modifying the web.

Extensions are built in HTML, CSS, and JavaScript. They have access to Web APIs and Chrome Extension APIs.

For a full list of capabilities, please consult Chrome Extension Docs - Develop.

Extension Composition

Extensions are made up of different parts, each playing their own role.

1. Manifest - the manifest.json is the only required file, and it must be located in the root directory. It defines information such as metadata, permissions, resources, and files.
2. Service Workers - these run in the background and handle browser events such as removing a bookmark.
3. Content Scripts - run JavaScript in the context of the web page e.g. DOM manipulation of the current tab.
4. Toolbar Action - execute code when the user clicks on the extension toolbar icon or show a popup using the Action API.
5. Side Panel - display custom UI in the browser's side panel.
6. DeclarativeNetRequest - intercept, block, or modify network requests.

Testing Extensions (Loading Unpacked Extensions)

To test extensions locally, you'll need to navigate to chrome://extensions and enable Developer Mode.

Once enabled, you'll be able to click 'Load Unpacked' and select the folder containing your code.

Note that you'll also have to reload your extension if you update the manifest, service workers, or content scripts.

For basic debugging of your extension, you can add console logs, open your extension, and right-click into dev tools to see the output.