How to Create a Chrome Extension to Edit Websites

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 of a website, with the homepage of 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. 😉

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 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.

{
  "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 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.

Screenshot of my chrome://extensions page, with only one extension.

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

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? If you go there and open the DevTools (with F12), you can type this simple line of code to fix our bug:

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 attribute that looks like:

{
  "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 matcheshttps://www.cinoche.com/*.

You should now have a file that looks like below:

{
  "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 and come back to www.cinoche.com to see the final result:

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:

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.

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! ✌️