Build your first Chrome extension

See the finished thing first (2 minutes)Download the starter kit, read-and-keep.zip, and unzip it. Go to chrome://extensions (type it into the address bar), turn on Developer mode at the top right, click Load unpacked and choose the unzipped read-and-keep folder. Highlight a sentence on any article, right-click it and choose Save "..." to notes, then pin the extension from the puzzle-piece menu and open its popup: your note is there, and the badge on the icon counts it. That's what you're about to build. Click Remove on its card before you load your own, or you'll get two right-click items.

Now build it yourself. Make a folder for the project with an icons folder inside it:

mkdir "$HOME\Documents\read-and-keep\icons"
cd "$HOME\Documents\read-and-keep"

mkdir -p ~/Documents/read-and-keep/icons
cd ~/Documents/read-and-keep

Copy the four PNGs from the kit's icons folder into your own icons folder. Keep the rest of the kit to check your work against. You'll type the code yourself, one piece at a time, so you know what every line does.

Now create manifest.json in the read-and-keep folder:

{
  "manifest_version": 3,
  "name": "Read & Keep",
  "version": "0.1.0",
  "description": "See how long a page takes to read, and save the bits you highlight as notes. Everything stays in your browser.",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "action": {
    "default_title": "Read & Keep",
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "32": "icons/icon32.png"
    }
  }
}

• manifest_version: 3 is the current extension format (Manifest V3). The only value Chrome accepts now is 3.
• name (75 characters max) and description (132 max) show on the extensions page and in the store.
• icons are for the extensions page and the store. action is the button in your toolbar: its icon, its hover text and the page that opens when you click it (the popup).

Create popup.html next to it. This is a throwaway hello page; you'll replace it in step 3:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Read &amp; Keep</title>
  </head>
  <body style="width: 240px; font: 14px system-ui, sans-serif">
    <p>Hello. My first extension works.</p>
  </body>
</html>

Now load it. In Chrome, go to chrome://extensions (type it into the address bar; it isn't a clickable link). Turn on Developer mode in the top-right corner, click Load unpacked and choose your read-and-keep folder. In Edge, the same page is edge://extensions, with the same Developer mode toggle and Load unpacked button.

Click the puzzle-piece Extensions button in the toolbar and pin Read & Keep, so its icon sits next to the address bar. Then click the icon.