Create extensions in no time
Tags: extensions, webdev, browser, tutorial
Published: 2023-09-13 17:05:41

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:
```json
{
  "name": "tutorial"
}
```
after that we need a manifest_version, version key:
```json
{
  "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.
![developer mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8oso0mhl5x0hm7c3non.png)

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):
![extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgodn95g6zxf6k1civyl.png)

---

# Add basic functionality

## Popup window if extension is clicked

You can achieve that with just simply adding "action" > "default_popup" to the manifest
```json
{
  "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:
```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:
```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)**:

![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0blqm2j4zbsdgsscakub.png)

---

## Inject JavaScript/CSS to a page

Just add "content_scripts" > "js" / "css" to the manifest
```json
{
  "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:
```css
html, body {
  background-color: black !important;
}
```

Now just reload the extension and go to [example.com](https://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:
```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:

![example.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbmnp9tb7kbglc39olgs.png)



---

## Add icon to extension

Add "icons" to manifest:
```json
{
  "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
```

![Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08z155q70xthttwov7dv.png)

![Icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/190bruxmnog6my92lryh.png)