Search the site:

Copyright 2010 - 2019 @ DevriX - All rights reserved.

How to Create Your First Chrome Extension

How to Create Your First Chrome Extension@2x

Chrome Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

Chrome Extension Baseline

Chrome extensions are an easy way to manipulate pages the way you want. They are also used to extend the functionality of a webpage by writing a custom code that will execute the needed process.

To start things off, you need to understand how to set up the baseline of your extension codebase. For an easier start, here is the official overview from Chrome: https://developer.chrome.com/extensions/overview

Let’s say you need a third-party page to run a piece of code to execute a certain command., You have the code ready as an extension. But how can you tell the browser that this is your extension and it needs to be imported? To fully describe how extensions work, let’s see an example with an extension for Asana.

File Structure

1. Manifest.json File

First, you need to create a manifest.json file. What does this file do and what should you write in it? Basically, the manifest.json file in our config file is how the browser loads different permissions and resources. Here you point out to the browser what version you are loading, the extension’s name, author and description. These can be viewed in the browser when the extension is loaded properly.

You need to add the following lines of code into your manifest.json file:

{
"name": "DX Asana Goodies",
"version": "1.1",
"author": "Mariyan Dimitrov & Martin Spatovaliyski",
"description": "extension for the cool teammates!",
"manifest_version": 2,
"web_accessible_resources": [
"resources/**"
],
"content_scripts": [{
"js": ["jQuery.js", "popup.js"],
"css": ["style.css"],
"matches": [ "https://app.asana.com/*" ]
}],
"default_icon": {
"16": "img/16.png",
"32": "img/32.png",
"128": "img/128.png"
},
"icons": {
"16": "images/salimeyes16.png",
"32": "images/salimeyes32.png",
"48": "images/salimeyes48.png",
"128": "images/salimeyes128.png"
}
}

2. Importing Extension Icon

The extension needs a visible browser icon so you need the following:

default_icon – This property is responsible for the icon the user sees in his/her extension toolbar when the extension is active.

icons – This is the property responsible for the icon the user sees when he/she accesses the Chrome extensions page and importing your plugin.

3. content_scripts – Loading All Assets in Your Extension

The extension also uses scripts and they should be added as:

js/css – All styles and scripts that can be included: the order of loading the scripts will be followed by the order of the scripts (as described, we want jQuery to load first and our custom JavaScript second).

matches – Here you specify for which website(s) the resources should be loaded.

The content_scripts will start loading as soon as a match is found from the matches array. In our example, this will be loaded only on app.asana.com. One thing to be noted though, the JavaScript files are loaded on interactive/DOM ready state.

4. Accessible Resources

Sometimes you may want your extension to load resources like pictures, mp3 files or any other type of files. Where should you store those mp3, pictures and etc.?

To load and give access to resources, you need to tell the manifest.json file that these files are actually there and can be used. You do that by adding the following piece of code in your JSON file. By using **, you are telling your extension to look for all files in the resources folder recursively.

 {
"web_accessible_resources": [
"resources/**"
]
}

Next step is to use the linked resources and that is done by using the function chrome.extension.getURL();. In our case we could actually assign the mp3 file into a variable and then use it later on like this:

let musicURL = chrome.extension.getURL(‘/resources/’ + memeName + ‘/music.mp3’ );
let music = new Audio(musicURL);
music.play();

Loading the Created Extension

When you start developing your extension, you need to include it in your browser and see how it behaves when you are writing lines of code. To do that, follow these steps:

  1. Open the Extension Manager page by going to chrome://extensions.
    You can also open it by clicking on the Chrome menu, hovering over More Tools then selecting Extensions.
  2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
  3. Click the Load unpacked button located in the top left corner of our window and select the extension’s folder.
  4. Activate your extension by clicking on the toggle button on the bottom right corner of your extension card.
Loading the created Chrome extension in developer mode

Loading the created Chrome extension in developer mode

Debugging the Loaded Extension

When your extension is up and running you need to test and debug it. That means to reload the extension every time when you do a change, especially when changing the manifest.json file. That way, you are changing how the whole extension should behave and what resources should be loaded within it.

For easier debugging, Google has thoughtfully created functionality to reload the extension on the go by clicking the circular arrow on the bottom right corner of our extension card in chrome://extensions.

Many times through your work, you will make mistakes and you’ll need to learn from them. All of the errors (following this implementation) will be logged in the console of your Chrome browser which will keep a backlog with them.

Further FAQ

  • Do I need Google / Chrome permission to run an extension?
    • No. These are custom extensions that we run locally. It is like changing the HTML of a site locally. It is not violating any rules.
  • Are there any paid extensions?
    • Yes, there are many paid extensions. Some of them are single purchase and some of them are with a subscription plan.

Chrome extensions personalize your browser experience and make it more productive. They are easy to build and add, and a lot of fun to develop.

Mariyan Dimitrov

Mariyan Dimitrov

Mariyan Dimitrov is a Full-Stack Web Developer at DevriX. He is passionate about writing clean and well-structured JavaScript code, especially for frameworks like React.js or Vue.js. Mariyan is constantly evolving his skills as a developer and available to answer your questions on his articles.

Browse more at:DevelopmentTutorials

Leave a Reply

Your email address will not be published. Required fields are marked *