DEV Community

Cover image for Create extensions in no time
Waradu
Waradu

Posted on • Edited on

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"
}
Enter fullscreen mode Exit fullscreen mode

after that we need a manifest_version, version key:

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0"
}
Enter fullscreen mode Exit fullscreen mode

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

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

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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

tutorial/
├── popup/
│   ├── popup.html
│   └── style.css
└── manifest.json
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

style.css:

* {
  padding: 0;
  margin: 0;
}

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

h1 {
  padding: 40px;
  width: max-content;
}
Enter fullscreen mode Exit fullscreen mode

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

example

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/*"]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Folder structure now:

tutorial/
├── popup/
│   ├── popup.html
│   └── style.css
├── inject/
│   ├── inject.js
│   └── inject.css
└── manifest.json
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Now would you look at that:

example.com

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Icon

Icons

Top comments (1)

Collapse
 
pandadev_ profile image
PandaDEV •

Please describe in part 2 how to also inject HTML besides CSS and JS