Create and publish google chrome extension in 3 simple steps using JavaScript

How to create a google chrome extension using javascript

Creating a chrome extension is pretty easy but getting it into chrome store is much harder. Chrome extensions are small programs (using HTML, JavaScript, jQuery), written basically to add additional functionality to the Chrome browser.

There are 3 main parts in a Chrome extension. These are:

1. manifest.json.
2. A JavaScript file.
3. An HTML file.

Manifest.json

first, we need to create manifest.json

This declares the name and version of the extension and links to the scripts being used. It is also where you declare the permissions that you need.

As you write your extensions, and you see which commands you are using, these will have the permissions required in the developer documentation.

For example,

{
    "name": "Link Checker",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "any description",
    "content_scripts": [
        {
            "matches":["<all_urls>"],
            "js" : ["content.js"]
        }
    ],
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": ["tabs", "<all_urls>"],
 
    "browser_action": {
    "default_title": "EMI store Link Checker"
    }

}

Background.js

The background.js file is where you’ll probably build most of your extensions.

chrome.browserAction.onClicked.addListener(sendM);
function sendM(tab){
chrome.tabs.sendMessage(tab.id,tab.url);
}

Content.js

 This is the exact code that I wrote as a snippet, but I saved it as a content.js file

//write your own login in this file

chrome.runtime.onMessage.addListener(getM);

function getM(message,sender,sendResponse){
url=message;
alert(url);
}

Save all this file in the same folder (eg. inside extension folder).

How to run your chrome extension?

In order to run your extension you have to:

1.visit chrome://extensions.

2.switch on Developer mode.

3.click Load Unpacked.

4.choose the extension folder (the one with the manifest.json in it. eg. extension folder).

How to publish extension in the Chrome Web Store

To publish your app to the Chrome Web Store, follow these steps:

1. Create your app’s zip file
2. Create a developer account
3. Upload your app
4. Pick a payments system
5. Get app constraints and finish your app’s code
6. Get the app ID
7. Get the OAuth token
8. Finish the app
9. Provide store content
10. Pay the developer signup fee
11. Publish your app

Click here for more details.

A tutorial video (Source youtube EvilTester - Software Testing)

In the video, you will see the complete process and how to debug the extension when errors occur. This includes:

• how to convert existing JavaScript code into a Chrome Extension.
• the basic structure of an extension, manifest.json, background script, and content scripts.
• permissions in extensions: contextMenus, activeTab.
• how to create context menus for extensions.
• how to change where context menus are displayed: contexts, editable.
• why use a persistent background script.
• how to dynamically inject content scripts into a page using executescript.
• how to use listeners with context menus.