How To Create Your Own Google Chrome Extension

September 7, 2019 Sumit 1 Comment

Developing your own Google Chrome extension is surprisingly easy. You might think you need all types of development skills and coding knowledge, but it’s no more difficult than creating or tweaking a web page. If you know HTML/CSS and are somewhat familiar with Javascript, you can have a simple extension up and running in no time. Even if you have minimal knowledge of web development, the learning curve here is nowhere near what I thought it would be.

In this post, we’re going to create a super simple extension to help you keep up with new posts on Black Web 2.0, but it can easily be modified to work for any website.

The absolute first and most important step you need to take is to install the BETA version of Chrome. As of this writing, extensions don’t work for the “stable” version of Chrome. Get Google Chrome (BETA).

Once that’s up and running, create a new directory to work from. A Chrome extension is a simple ZIP file with a .crx extension. The one file every extension must have is “manifest.json.” This file provides the metadata for your extension, defines its permissions, and any other files it needs to operate. Here is ours:

{
“name”: “Black Web 2.0”,
“version”: “1.0”,
“description”: “Black Web 2.0 for Chrome”,
“browser_action”: {
“default_icon”: “favicon.ico”,
“default_title”: “Black Web 2.0: A Different Perspective”
},
“background_page”: “background.html”,
“permissions”: [
“tabs”
]
}

Most of these are self-explanatory. The “permissions” attribute tells Chrome what features and URL’s we need access to. In this case “tabs” say we want to create new tabs in the browser. You can also see where we define “default_icon” and “default_title” which define an image to represent our extension in the toolbar and a tooltip.

The next thing we need to do is make our extension do some work. We create a “background.html” file in the same directory that looks like this:

<html>
<head>
<script>
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({url: “http://blackweb20.com/”});
});
</script>
</head>
</html>

In our case, this file is very simple as all we’re doing is telling Chrome to open a new tab with a specified URL. The method “chrome.browserAction.onClicked.addListener” tells chrome to execute the specified function whenever our extension is clicked. The function we specify calls “chrome.tabs.create” to actually create the new tab and take you directly to the Black Web 2.0 homepage.

To get our extension running in the browser:

Navigate to chrome://extensions
Expand the Developer drop down and click “Load unpacked extension”
Navigate to the directory where you put your code and click Ok
Assuming there are no errors, you should see a new icon in your toolbar.

While you’re still tweaking your code, you can always Reload your extension for testing. There is no need to restart your entire browser every time you make a change. Once your extension has been loaded, a “Reload” link appears in chrome://extensions.

The final step is, of course, packaging up your shiny new extension for distribution. If you get your extension submitted into the extension gallery, do don’t have to worry about this step. Google handles it all for you. In the case where you want to distribute your extensions on your own, you’ll need to do a couple of things:

Head back to chrome://extensions
Click the Pack extension button
Specify the root directory of your extension. This is the directory where you put all your files. (ignore the private key field)
Hit Ok and you get a .crx file and a .pem file.

Do not lose your .pem file as it contains your private key. Do not share this file with anyone. You need it if you intend to provide your extension with an update feature or if you want to submit your extension to the official Google extensions gallery.

As I said, this is a super simple example. There are many ways it could be spiced up a little and made more useful. For instance, we could grab the RSS feed and allow users to preview the latest posts with the click of a button. You could also add a badge to show how many posts are available. We could even make the button direct us to the most discussed post or most viewed post. For more information on developing your extensions, visit Google Code.

Have you created any Chrome extensions? Have any ideas for extensions that don’t yet exist? Tell us about it.