Build a chrome extension in 10 minutes or less
Tags: chromeextension
Published: 2019-10-14 12:20:06

Do you use chrome? Need to check your email? Block some ads? Perhaps you needed a price tracker, or a way to stay more productive. If you've answered yes to any of these, then chrome extensions are for you!

I have always enjoyed customizing my chrome browser with extensions. They are practical and tailor my space to my needs. Whether it's for productivity, convenience, ad blocking, developer tools, and much more. 

For those who don't know, chrome extensions are small software programs that are built on Javascript, HTML, and CSS. They are designed to add functionality and behavior based on a user's preferences and needs.

In order to make one, we'll follow [google's own tutorial](https://developer.chrome.com/extensions/getstarted) on making a simple chrome extension, which will be able to change the background color whenever we visit a URL containing _developer.chrome.com_.

If you'd like to install the already completed extension, you can download it [here](https://developer.chrome.com/extensions/examples/tutorials/get_started_complete.zip). 

##Let's get started

Start by creating a directory and opening it in your preferred text editor. Create a file called _manifest.json_. Each extension must have a manifest file, which contains important information about the extension. 
Place the following code in the file:

```json
  {
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["storage"],
    "manifest_version": 2
  }
```

Great!
Next step is to let chrome find your extension and load it. Type _chrome://extensions_ into your browser, toggle on developer mode on the top right of the extension management page, and click load unpacked on the top left. It should eventually look like this:


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6qrvajc9qsit7dqeq9dx.png)

Huzzah! Chrome has recognized the extension. Now it's time to give it some instruction. 
Create a file called background.js in your extension directory. This script will tell the extension which file to reference and how that file should behave. We need to register the background file in the manifest file like so:

```json
  {
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "manifest_version": 2
  }

```
From the tutorial:
>The extension is now aware that it includes a non-persistent background script and will scan the registered file for important events it needs to listen for. This extension will need information from a persistent variable as soon as its installed. Start by including a listening event for runtime.onInstalled in the background script. Inside the onInstalled listener, the extension will set a value using the storage API. This will allow multiple extension components to access that value and update it.

Let's add this to our _background.js_ file:

```javascript
 chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#3aa757'}, function() {
      console.log("The color is green.");
    });
  });

```

Now we need a UI. Create a _popup.html_ file in the extension directory. Store this HTML code in the file:

```HTML
 <!DOCTYPE html>
  <html>
    <head>
      <style>
        button {
          height: 30px;
          width: 30px;
          outline: none;
        }
      </style>
    </head>
    <body>
      <button id="changeColor"></button>
    </body>
  </html>
```

Now we have a button to change the color of the background!

>Like the background script, this file needs to be designated as a popup in the manifest under page_action.

```json
  {
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["storage"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html"
    },
    "manifest_version": 2
  }
```

Now we'll need some icons. Download them [here](https://developer.chrome.com/extensions/examples/tutorials/get_started/images.zip) and place the folder with the images inside the extension directory. These images will be used as icons for the toolbar as well as for other areas like the extension management page. Therefore, we will need to alter the permissions under page action => default_icon, and again separately under "icons" for the extension management page, permissions warning, and favicon. 
```json
  {
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["storage"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

```
As of now, the extension still has no functionality. We need to add conditions as to when the user can interact with the _popup.html_.

This extension will only be interactive when we are at a URL containing _developer.chrome.com_. We will need to supply this instruction to the _background.js_ script. For this, we will use the [declarativeContent](https://developer.chrome.com/declarativeContent) API:
```Javascript
  chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#3aa757'}, function() {
      console.log('The color is green.');
    });
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
      chrome.declarativeContent.onPageChanged.addRules([{
        conditions: [new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {hostEquals: 'developer.chrome.com'},
        })
        ],
            actions: [new chrome.declarativeContent.ShowPageAction()]
      }]);
    });
  });

```
We also need to add the permission to use the API in the _manifest.json_ file:

```json
  {
    "name": "Getting Started Example",
  ...
    "permissions": ["declarativeContent", "storage"],
  ...
  }

```

At this point, users will be able to click the extension icon and bring up a popup whenever they navigate to a URL containing _developer.chrome.com_. 

>The last step for the popup UI is adding color to the button. Create and add a file called popup.js with the following code to the extension directory

```Javascript
  let changeColor = document.getElementById('changeColor');

  chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
  });

```

>This code grabs the button from popup.html and requests the color value from storage. It then applies the color as the background of the button. Include a script tag to popup.js in popup.html.

```HTML
<!DOCTYPE html>
<html>
...
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>
```

Reload the extension to view the green button.

##Layer Logic

Let's add this code to our popup.js:
```Javascript
  let changeColor = document.getElementById('changeColor');
  ...
  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = "' + color + '";'});
    });
  };
```

>The updated code adds an onclick event the button, which triggers a programatically injected content script. This turns the background color of the page the same color as the button. Using programmatic injection allows for user-invoked content scripts, instead of auto inserting unwanted code into web pages.

In order to permit access to the tabs API, we need to add it to our permissions in the _manifest.json_ file. 

```json
{
    "name": "Getting Started Example",
  ...
    "permissions": ["activeTab", "declarativeContent", "storage"],
  ...
  }


```

If you go to any URL containing _developer.chrome.com_, you can now change the background to green! However, we can take it a step further. 

>Start by creating a file in the directory called _options.html_ and include the following code
```HTML
  <!DOCTYPE html>
  <html>
    <head>
      <style>
        button {
          height: 30px;
          width: 30px;
          outline: none;
          margin: 10px;
        }
      </style>
    </head>
    <body>
      <div id="buttonDiv">
      </div>
      <div>
        <p>Choose a different background color!</p>
      </div>
    </body>
    <script src="options.js"></script>
  </html>
```
Register the options page in the _manifest.json_ file:

```json
    {
    "name": "Getting Started Example",
    ...
    "options_page": "options.html",
    ...
    "manifest_version": 2
  }

```
Reload the extension and hit **Details**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2x9c0rcpk1gt9zatpx21.png)
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/y0tbyu8d35f6rt7ccado.png)

If you click Extension options to view the options page, it will appear blank. 




Create a file called _options.js_ and let's add the options logic:

```Javascript
  let page = document.getElementById('buttonDiv');
  const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
  function constructOptions(kButtonColors) {
    for (let item of kButtonColors) {
      let button = document.createElement('button');
      button.style.backgroundColor = item;
      button.addEventListener('click', function() {
        chrome.storage.sync.set({color: item}, function() {
          console.log('color is ' + item);
        })
      });
      page.appendChild(button);
    }
  }
  constructOptions(kButtonColors);
```
We are now provided with four color options which we can change either in the extension icon on the top right or in the extension management page within the details. 

>When the user clicks a button, it updates the color value in the extension's global storage. Since all of the extension's files pull the color information from global storage no other values need to be updated.

And there you have it! A simple chrome extension, built in a matter of minutes. 

Google's chrome APIs documentation is available [here](https://developer.chrome.com/apps/api_index) for you to check out and go deeper with your future endeavors.