Create extensions in no time

#extensions #webdev #browser #tutorial

Have you ever dreamed of your own browser extension? Have you ever wished there was an extension that does this and that? Well, just create one! You only need a manifest.json to get started.

Create/use the extension

Create a folder with the name of your extension and add a manifest.json file in the folder.

In the manifest add { } and create a name key in there:

{
  "name": "tutorial"
}

after that we need a manifest_version, version key:

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0"
}

Version is just the version of your extension so it doesn't matter if its 1.0.0, 0.1.0 or 34.110.01

Now open your browser, go to edge://extensions/ and activate developer mode on.

Finally drag n' drop your folder in the extensions window and search your extension in the extension list (Click "Reload" on your extension if you change anything):

Add basic functionality

Popup window if extension is clicked

You can achieve that with just simply adding "action" > "default_popup" to the manifest

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0",
  "action": {
    "default_popup": "popup/popup.html"
  }
}

and creating an popup.html and style.css file in the popup directory:

tutorial/
├── popup/
│   ├── popup.html
│   └── style.css
└── manifest.json

In the popup.html create a simple popup with HTML/CSS for example:
popup.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Tutorial</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

style.css:

* {
  padding: 0;
  margin: 0;
}

body {
  background: #222;
  color: white;
  font-family: sans-serif;
}

h1 {
  padding: 40px;
  width: max-content;
}

it should now look like this (DO NOT FORGET THO CLICK RELOAD ON THE EXTENSION IN THE EXTENSIONS PAGE):

Inject JavaScript/CSS to a page

Just add "content_scripts" > "js" / "css" to the manifest

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0",
  "action": {
    "default_popup": "popup/popup.html"
  },
  "content_scripts": [
    {
      "js": ["inject/inject.js"],
      "css": ["inject/inject.css"],
      "matches": ["*//*.example.com/*"]
    }
  ]
}

Folder structure now:

tutorial/
├── popup/
│   ├── popup.html
│   └── style.css
├── inject/
│   ├── inject.js
│   └── inject.css
└── manifest.json

For this tutorial I will make the background on example.com black and add a Hello World text:
inject.css:

html, body {
  background-color: black !important;
}

Now just reload the extension and go to example.com

For JavaScript it's the same and if you want to add HTML to a page just add this to your inject.js:

const p = document.createElement("p");
p.innerText = "Hello World";
p.style.color = "white";
p.style.padding = "40px";
p.classList.add("CLASS NAME FOR STYLING IN INJECT.CSS")
document.body.appendChild(p);

Now would you look at that:

Add icon to extension

Add "icons" to manifest:

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0",
  "action": {
    "default_popup": "popup/popup.html"
  },
  "content_scripts": [
    {
      "js": ["inject/inject.js"],
      "css": ["inject/inject.css"],
      "matches": ["https://example.com/"]
    }
  ],
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  }
}

After that add your icon files like that:

tutorial/
├── icons/
│   ├── icon-16.png
│   ├── icon-32.png
│   ├── icon-64.png
│   └── icon-128.png
├── popup/
│   ├── popup.html
│   └── style.css
├── inject/
│   ├── inject.js
│   └── inject.css
└── manifest.json