Inject scripts into the active tab

This tutorial builds an extension that simplifies the styling of the Chrome extension and Chrome Web Store documentation pages, so that they're easier to read.

In this guide, we explain how to do the following:

  • Use the extension service worker as the event coordinator.
  • Preserve user privacy through the "activeTab" permission.
  • Run code when the user clicks the extension toolbar icon.
  • Insert and remove a stylesheet using the Scripting API.
  • Use a keyboard shortcut to execute code.

Before you start

This guide assumes that you have basic web development experience. Check out Hello World for an introduction to the extension development workflow.

Build the extension

To start, create a new directory called focus-mode to hold the extension files. You can download the complete source code on GitHub.

Step 1: Add the extension data and icons

Create a manifest.json file. Copy and paste the following code:

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png"