A Minimal Google Chrome Extension Hello World Example

Most "Hello, World" tutorials do to much. I get the urge. You want to start showing off what's cool about whatever the thing is. But, right at the start, we're better served by cutting things down to their bare minimum. In that spirit, here's what you need to make a google chrome extension:

1 - Make A Folder

Make a new folder on your desktop called make-green

2 - Make A manifest.json File

Make a new file in the make-green folder called manifest.json with this for the contents:


{
  "manifest_version": 3,
  "name": "Green Background Maker",
  "version": "0.0.1",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["extension.js"]
    }
  ]
}

3 - Make An extension.js File

Make another new file in the make-green folder called extension.js and put this line in it:


document.body.style.backgroundColor = '#123412'

4 - Turn On Developer Mode

Open Chrome's Settings/Preferences and select Extensions. At the top right switch on the toggle for "Developer mode" which will add some more buttons in a menu below it.

5 - Load The Extension

Click the "Load unpacked" button that showed up when you turned on "Developer mode". That brings up a file browser. Navigate to your make-green directory and click "Select" to install the extension and put it in action.

Once it's in place every page you visit will get a green background.

Next Steps

There's loads of other stuff you can do. You'll probably want to look at background scripts and the various permissions. This will get you started in the mean time.

TODO

  • Create images of the developer mode button
  • Link up options in Next Steps