How to Create a Chrome Extension to Edit Websites
Tags: javascript, webdev, frontend, development
Published: 2021-12-23 21:49:32

---
title: How to Create a Chrome Extension to Edit Websites
published: true
date: 2021-11-26 00:15:00 UTC
tags: javascript, webdev, frontend, development
canonical_url: https://www.benjaminrancourt.ca/how-to-create-a-chrome-extension-to-modify-websites
cover_image: https://www.benjaminrancourt.ca/images/pexels-deepanker-verma-1482061.jpg
---

## Context

Have you ever been on a website that you would like to have a different layout? Or that some functionalities were just missing and could simply be implemented?

You can choose to go to another similar site, but sometimes, there may be no suitable alternative and you are stuck with it... 😕

Imagine you were a developer for the company that maintains that website, you could simply improve it to suit your needs... Unfortunately, you are probably not an employee or you may be not allowed to change it... 🙁

Fortunately, there is something you can do and it's simpler than you think: you could **create a Google Chrome extension**. Continue to read this tutorial to learn how to. 🤓

## What will you learn?

In this tutorial, in about five minutes, you should learn:

1. How to create a minimal Chrome extension
2. How to **load it** into your browser
3. How your extension can modify the HTML of a website

I'm pretty sure that in under 15 minutes, you'll have a simple Chrome extension working in your browser. Are you ready? 🙃

## Example of a website you may want to alter

But before beginning, let's see a fictitious example of a case you would like to modify the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) of a website, with the homepage of [www.cinoche.com](https://www.cinoche.com/).

> I really want to **point out** that I have nothing against this website, I just needed to have a concrete example of a website I could edit. As I love to watch movies, this site was one of the first websites I thought of. In fact, I ❤️ Cinoche.com. 😉

![](https://www.benjaminrancourt.ca/images/2021-11-24-cinoche-before.jpg)
_Screenshot of Cinoche.com._

You might not notice it, but there is a big space in the right section where the news are displayed. What is causing this incorrect layout? An advertisement was present but was removed by the [uBlock Origin](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm) extension. Since it didn't remove the `div` parent, the `flex` layout no longer works... 😟

## Create the manifest.json file

Inside an empty folder, create a `manifest.json` file with the content below. It's the file that gives the browser **information about your extension** (and the users if you publish it). This is the **only required** file that every browser extension needs to function.

```json
{
  "manifest_version": 3,
  "name": "Make Cinoche Great Again",
  "version": "1.0.0"
}

```

_The first version of the manifest.json file, where the three required attributes._

These attributes tell us:

- **manifest\_version** : the version of the manifest. `3` is the latest version available.
- **name** : the name of our extension.
- **version** : the version of our extension.

And we are done! All necessary code has been written! In our case, our extension is pretty useless for now, but we can go ahead and add it to Chrome! 😅

## Load your extension into your browser

Now go to [chrome://extensions](chrome://extensions/) and click on the " **Load unpacked**" button to select the directory of your custom extension. To see the three buttons, the "Developer mode" on the right must be enabled.

![](https://www.benjaminrancourt.ca/images/chrome-extensions-page.jpg)
_Screenshot of my chrome://extensions page, with only one extension._

You should now see your extension on the same page! Congratulation! 🥳

![](https://www.benjaminrancourt.ca/images/chrome-extension-with-our-extension.jpg)
_Your extension should now appear on the chrome://extensions page._

If you need to edit any file in the selected directory, you'll need to click on the update button to reload the extension into Chrome. Otherwise, your changes won't appear on your extension.

Now, let's see how we could add some functionalities to our extension. 😃

## Inject a script to modify a website

Do you remember our [example website](https://www.cinoche.com/)? If you go there and open the [DevTools](https://developer.chrome.com/docs/devtools/) (with `F12`), you can type this simple line of code to fix our bug:

```javascript
document.querySelector('div.featured-box-right').remove();
```

_In my example, it doesn't take a lot of code to improve our experience, right? 😆_

If you have tried it, you have seen the layout has been arranged but, if you refresh the page, your changes wouldn't be saved... 😭

How could we inject our little script on each page of the website? Let's put the previous code inside a new file named `cinoche.js`. But now, we have to tell the extension that this code exists and needs to be injected on every page.

Reopen the `manifest.json` of your extension and add a **[content\_scripts](https://developer.chrome.com/docs/extensions/mv3/content_scripts/)** attribute that looks like:

```json
{
  "content_scripts": [
    {
      "js": ["cinoche.js"],
      "matches": ["https://www.cinoche.com/*"]
    }
  ],
  
  // ...
}
```

This attribute tells our extension to inject a JavaScript file named `cinoche.js` (`js`) when the current URL [matches](https://developer.chrome.com/docs/extensions/mv3/content_scripts/#matchAndGlob)`https://www.cinoche.com/*`.

You should now have a file that looks like below:

```json
{
  "content_scripts": [
    {
      "js": ["cinoche.js"],
      "matches": ["https://www.cinoche.com/*"]
    }
  ],
  "manifest_version": 3,
  "name": "Make Cinoche Great Again",
  "version": "1.1.0"
}

```

> **Note** : you may have noticed that I've incremented its version. Doing this make it easier to know if your extension has been successfully reloaded and that you have the latest changes.

You may now reload your extension on [chrome://extensions](chrome://extensions) and come back to [www.cinoche.com](https://www.cinoche.com/) to see the final result:

![](https://www.benjaminrancourt.ca/images/2021-11-24-cinoche-after.jpg)
_Screenshot of Cinoche.com, after our extension has removed the empty div._

As our extension injects our script into every page of the domain, you should add protection to make sure your script doesn't fail:

```javascript
const featureBoxRight = document.querySelector('div.featured-box-right');

if (featureBoxRight) {
  featureBoxRight.remove();
}

```

_Our script now makes sure that the feature box exists before trying to remove it._

> **One last tip** : the auto-injected script is equivalent to opening the DevTools and pasting it there. So, if there is any error or logs, you will see them in the console. 🤖

## Conclusion

In this tutorial, you should have learned the basics to create a Chrome extension. If you want to learn more about that, you should read the [official documentation on Chrome Developers](https://developer.chrome.com/docs/extensions/mv3/).

There are a lot more attributes and customizations that you could add to your extension, but you'll learn them from me in another tutorial! 🧐

Good luck! ✌️