Module

Setup and Running

Progress 1/8
1/8

Setup

We are going to create a new GitHub repo for this project, no starter code needed.

  • Navigate to GitHub desktop
  • Click on the repository dropdown
  • Select Add > Create new repository
  • Give it a Name and optionally a description
  • Click create repository
  • Open in your preferred IDE (such as VS Code)

Create a file called manifest.json, make sure to give it a name and description.

1
2
3
4
5
6
7
8
9

{
    "name": "YOUR NAME HERE",
    "description": "YOUR DESCRIPTION HERE",
    "version": "1.0",
    "manifest_version": 3,
    "action": {
      "default_popup": "index.html",
    },
}

This is a setup file that tells your browser some basic info about your extension. You are telling it to use index.html as the popup, the name, description, and version of your extension along with the version of the manifest you want to use (the different manifest versions just change what parameters you have access too). There are a lot of different things you can add to the manifest.

  • Images for your extension
  • Background scripts
  • Permissions
  • Much more

Next lets create the base popup HTML. Create a file called index.html, give it a title (this can be the same as the manifest name).

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EXTENSION NAME</title>
</head>
<body>
    <h1>My super cool extension</h1>
</body>
</html>

This is telling the browser what you want the popup to look like. In the head tag you are specifying the metadata.

  • What character set to use.
  • How big the popup should be (default width).
  • What the title of the popup should be (this is more useful with websites but still important to set).

Next in the body tag we are defining the content of the extension. For now we are just adding some text.

Set up your Browser

We will be using chrome as an example but it should be similar for most other browsers.

  • Navigate to your extensions page chrome://extensions/
  • Make sure to toggle it into developer mode (top right corner)
  • Select Load unpacked and select the root folder (outermost folder) of your GitHub repo
  • You should see your extension in the extension list

Running the project

You should see your extension in your extension list (you might need to pin it). All you need to do to “run” your extension is to click on its icon. For debugging you can right-click on the icon and select Inspect popup to open dev tools. Whenever you make a change make sure to go to the extensions page and click the reload icon at the bottom of your extensions card.

Make sure you reload your extension after changing anything or you will not see the changes.