DEV Community

Cover image for How to build a chrome plugin
JennyJudova (they/them)
JennyJudova (they/them)

Posted on

How to build a chrome plugin

Chrome plugins are fun and can be a useful and personalised way to start your day.

Best part is the are actually relatively simple to do.

All you need is html, css, and js.

Basic Setup

The basic setup is so basic I found myself staring at my computer saying what?

Create manifest.json file chrome's documentation is actually great and in depth if you want to learn more but for this plug in the manifest will be bare bones:

{
  "manifest_version": 2,
  "name": "Chrome plugin template Devto",
  "description": "Chrome plugin template Devto",
  "version": "1",
  "author": "Jenny Judova",
  "browser_action": {
    "default_title": "Fun with Flags"
  },
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Print Hello World

Now let's do the thing and print 'Hello World.'

In the manifest.json chrome_url_overrides we stated that the new tab override html file is called newtab.html so lets create that file.

newtab.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
</head>

<body>
  <h1>Hello World!</h1>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

This is great but how do we check if it worked? We can't really go to localhost for this. Instead, do this:
1 - go to chrome://extensions/
2 - make sure that the developer mode toggle is on
3 - click on load unpacked button
4 - choose the folder with your project
5 - click โ€˜selectโ€™
6 - open new tab

gif showing the step-by-step process of uploading the plugin to chrome
Hello World displayed in a new tab

BOOM!

Now let's make this extension do something like show flags and countries. Don't judge Fun with Flags I chose the flag API as it does not require a token.

How to make an API call

Let's create a file called newtab.js and link it up in newtab.html by adding

<script type="text/javascript" src="newtab.js"></script>
Enter fullscreen mode Exit fullscreen mode

Just before the closing the body tag. Let's do a sanity check and in newtab.js add

function init() {

  console.log('HI')

}

window.addEventListener('DOMContentLoaded', init)
Enter fullscreen mode Exit fullscreen mode

A simple .fetch should do the trick for the API call. Like so:

  function getAllFlags() {
    fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
      .then(response => response.json())
      .then(response => {
        flags = response
        chrome.storage.local.set({ data: flags });
      })
      .catch(err => console.log(err))
Enter fullscreen mode Exit fullscreen mode

We have the information about flags now lets display them in the UI by adding a function to display them and some css, for this it's worth looking at the project's github.

How to use chrome.storage.local

The way the extension works at the moment is that every time you open a new tab a new api call takes place. Considering most of us open a dozen tabs every hour it might be more efficient to store the request response in chrome.storage.local and to check if it has data before running the call to the api.

To achieve this we have to use
chrome.storage.local.set and chrome.storage.local.get

Also make sure to avoid this common pitfall - check that your manifest.json has

  "permissions": [
    "storage"
  ]
Enter fullscreen mode Exit fullscreen mode

To save something to local storage lets add this line to the fetch request

chrome.storage.local.set({ data: flags });

so the whole thing will look like:

fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
        .then(response => response.json())
        .then(response => {
          console.log('empty')
          flags = response
          chrome.storage.local.set({ data: flags });
        })
        .catch(err => console.log(err))
Enter fullscreen mode Exit fullscreen mode

Lets add a function that will check local storage.

  function checkLocalStorage() {
    chrome.storage.local.get('data', function (result) {
      result.data == undefined ? isLocalStorageFull = false : isLocalStorageFull = true
      getAllFlags(isLocalStorageFull)
    });
  }
Enter fullscreen mode Exit fullscreen mode

Let's also update the getAllFlags function to:

  function getAllFlags(isLocalStorageFull) {
    if (isLocalStorageFull) {
      chrome.storage.local.get('data', function (result) {
        flags = result.data
        displayFlags(flags)
      })
    } else {
      fetch('https://restcountries.eu/rest/v2/all?fields=name;flag;region;nativeName;')
        .then(response => response.json())
        .then(response => {
          flags = response
          chrome.storage.local.set({ data: flags });
          displayFlags(flags)
        })
        .catch(err => console.log(err))
    }
  }
Enter fullscreen mode Exit fullscreen mode

Essentially this is our plug in done. Feel free to add your own css or copy paste from the finished app here.

This is what we end up with.

Fun with Flags plug in that has the title and underneath it a grid showing flags and their countries

Top comments (2)

Collapse
 
titanhero profile image
Lex

This post is very cool, I always wanted make, extensions or plugins for firefox and chrome, but I don't know so much about js, only the basic, so this post is very cool to give me an idea of how this works๐Ÿ˜โœŒ๏ธ๐Ÿ‘

Collapse
 
jennyjudova profile image
JennyJudova (they/them)

Definitely try it! Vanilla JS is all you need :)