# How To Build A Chrome Extension

> Learn how to build a Chrome extension step by step. From setting up your environment to publishing on the Chrome Web Store, get tips and insights.

- Author: Marius Bongarts
- Published: 2022-08-06
- Updated: 2024-08-11
- Reading time: 4 min
- URL: https://web-highlights.com/blog/how-to-build-a-chrome-extension/

---

#### Create a Chrome extension by following this step-by-step guide.

I remember when I created my first Chrome extension. I was looking for an extension that acts as the text highlighter Medium.com.

![Medium Text Highlighter](https://web-highlights.com/blog/content/images/2022/08/image-1.webp)

Several extensions in the Chrome Web Store function as a text marker, but none of them worked according to my conceptions. That was when I followed an article like this to create my first, very own, Chrome extension.

I realized that creating extensions is pretty straightforward so I decided to develop my own [Web Highlights Chrome Extension](https://chrome.google.com/webstore/detail/web-highlights-%20-bookmark/hldjnlbobkdkghfidgoecgmklcemanhm?hl=de) , which now has more than 1000 users. 😊

Being able to create your own extensions gives you the possibility to customize web pages according to your own needs.

> “A browser extension is a small software module for customizing a web browser.” — wikipedia.org

In this article, we will build a very simple chrome extension that allows you to change the background color of any element on the current page by double-clicking it.

### Let’s get started

First of all, we need to create a `manifest.json` file. The manifest is the entry point of our extension, which defines metadata, such as name and version, as well as additional functionalities.

Let’s create a `manifest.json` and add some metadata:

```json
{
  "name": "Background Color Changer",
  "version": "1.0.0",
  "manifest_version": 3
}
```

[View this code on GitHub Gist](https://gist.github.com/MariusBongarts/25955af16fedc0ee4497eff39cd5ac39)

The first three values `name` , `version` and `manifest_version` are sufficient to create our first chrome extension.

#### Install the extension

Open your Chrome browser and navigate to **chrome://extensions** .

Enable Developer Mode by clicking the toggle switch next to **Developer mode** . Click the **Load unpacked** button and select the directory with our `manifest.json` .

![Load unpacked](https://cdn-images-1.medium.com/max/800/1*kNC5dq0wU2x5lMlo3PZ6cw.png)

Congratulations! You’ve just created your first Chrome Extension!

#### Add some functionality

We have just installed our own extension. Still, currently, it doesn’t do anything because we haven’t added functionality to our `manifest.json` .

To make our text-highlighter work, we need functionality to read the DOM and make changes to it. For that, we will create content scripts. The chrome developer documentation defines content scripts as follows:

> Content scripts live in an isolated world, allowing a content script to make changes to its JavaScript environment without conflicting with the page or other extensions’ content Scripts.

Let’s create a `content.js` file with an alert to ensure that our extension successfully loads the script. This file will act as our content script.

```js
alert('Hello world from content.js');
```

[View this code on GitHub Gist](https://gist.github.com/MariusBongarts/75c83227aab6ac527e0402340af4cf2f)

The `content.js` script is the entry point of our extension. Let’s adjust our `manifest.json` to inject our script:

```json
{
  "name": "Background Color Changer",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "content.js"
      ]
    }
  ]
}
```

[View this code on GitHub Gist](https://gist.github.com/MariusBongarts/f646138dd2bf5aaa7fad3a93e80f52e7)

To use our statically declared scripts we need to register them under the `content_scripts` field. This field needs to define the _required_ attribute `matches` to specify on which pages the content script will be injected into. For that, you can set several match patterns. We will use the special pattern `<all_urls>` to match any URL that starts with a permitted scheme- for example `http` or `https` .

We also define the optional field `js` . Here we define our scripts to be injected into matching pages.

Let’s update our extension by pressing the refresh button of the extension on `chrome://extensions` . We can now navigate to any page and, if done correctly, an alert should appear when the page is loaded.

To be honest a really annoying extension. So let’s add the code for our very simple background color changer:

```js
const COLOR_PICKER_ID = "myColorPicker";

function createColorPicker() {
  const inputElement = document.createElement("input");
  inputElement.type = "color";
  inputElement.style.position = "absolute";
  inputElement.id = COLOR_PICKER_ID;
  inputElement.style.display = `none`;
  inputElement.onclick = (e) => e.stopImmediatePropagation();
  return inputElement;
}

document.body.appendChild(createColorPicker());

function getColorPicker() {
  return document.getElementById(COLOR_PICKER_ID);
}

function showColorPicker(x, y) {
  const colorPicker = getColorPicker();
  colorPicker.style.display = `block`;
  colorPicker.style.left = `${x}px`;
  colorPicker.style.top = `${y}px`;
}

function hideColorPicker() {
  getColorPicker().style.display = `none`;
}

const renderColorPicker = (clickEvent) => {
  showColorPicker(clickEvent.clientX, clickEvent.clientY);
  getColorPicker().onchange = (event) => {
    clickEvent.target.style.backgroundColor = event.target.value;
    hideColorPicker();
  };
};

document.addEventListener("dblclick", (event) => {
  renderColorPicker(event);
});
```

[View this code on GitHub Gist](https://gist.github.com/MariusBongarts/dcbe16e82bb5ca200af5adbaf605d2cb)

This script will listen for a double click on the current page to show a color picker at the given position.

Again, let’s update our extension by pressing the refresh button. We can now change the background of any element on the page by double-clicking it.

### Conclusion

Creating a simple Chrome extension is straightforward. If you want to dig deeper into creating extensions, have a look at this article:

> [**Build A Text Web-Highlighter as a Chrome Extension**](https://web-highlights.com/blog/build-a-text-web-highlighter-as-a-chrome-extension/) — Learn to build a Chrome extension with Web Components. I always loved the web highlighter, which appears when selecting text in an article on Medium.com. I thought that it would be nice to have such functionality on each website on the internet. I began to look for a chrome (Marius Bongarts)

I hope you could follow along with this article. Have a look at the [GitHub repository](https://github.com/MariusBongarts/medium-chrome-extension) to see the final version of our portfolio application.

I am always happy to answer questions, and I am open to criticism. Feel free to contact me at any time 😊

Get in touch with me via [LinkedIn](https://www.linkedin.com/in/marius-bongarts-6b3638171/) or follow me on [Twitter](https://twitter.com/MariusBongarts) .