How to make Javascript as Chrome Extension

The usage of chrome extensions has been increasing because chrome extension actually replaces many works in a single icon. Instead of extension, It can be said as Chrome app. Yeah app for chrome browser. These applications really make our work more easier. I am using many chrome Extensions like Page rank checker, Screen capture and more. As i am a blogger, I would like to check page rank for all websites i visit. Instead of opening page rank checker website and checking for a particular website page rank, Chrome extension helps to see page rank of a website by single click. Like that Screen capture extension helps me to take scree shot of any webpage in one click. Are you thinking you can’t do it ?? No, You can do it. Developing extension is not a tougher one, you can make javascript as chrome extension. If you have little knowledge on Javascript / Jquery then you can also create such extension. You can make javascript as chrome extension by simple way. This article helps to make javascript as chrome extension. Before getting into topic let me tell what is an extension.

Javascript chrome extension

Also See: How to Create Android apps for Websites

What is an Extension:

Basic definition of extension is, Adding a part in something to enhance its features or to make it more flexible. Like that chrome extensions helps to enhance chrome browser features like downloading apk files from playstore, which helps to download apk files from chrome in a single click. These stuffs are known as extensions.

Things you need:

You don’t need any compiler to develop chrome extension. Chrome extension is just a combination of HTML, CSS, Javascript/ Jquery. If you are little familiar with these languages then you can develop your own extension. I suggest to have Notepad++ for developing extension. You can do it in Notepad also if you have correct java script.

How to make Javascript as Chtrome Extension:

Here we go to develop javascript as chrome extension. First step for making javscript as chrome extension is to have right javascript. To test your Javascript in chrome, Press F12 and click on Console to inject javascript in a website. Paste your javascript in console and hit enter to test it.

There must be 4 important files to make Javascript as Chrome Extension

1) manifest.json

2) background.js

3) bookmarklet.js

4) Images

1) Manifest.json:


 

{
 "background": {"scripts": ["background.js"]},
 "browser_action": {
 "default_icon": "icon-128.png",
 "default_title": "Extension Default Name"
 },
 "name": "Extension Name ",
 "description": " Extension Description ",
 "homepage_url": "http://www.cybertwitt.com",
 "icons": {
     "16": "icon-16.png",
     "48": "icon-48.png",
     "128": "icon-128.png" },
 "permissions": [
     "tabs",
     "http://*/*",
     "https://*/*"
 ],
 "version": "1.0",
 "manifest_version": 2
}

This is the most important file for developing chrome extension. Chrome extension runs on manifest.json file. This file contains all information about extension, other files and images used in extension and also Version of extension and description must be included in this file. To make manifest.json file for your extension, Just copy the below code and save it as “manifest.json” Don’t forget to change default_title, name in manifest.json code.

Also See: Facebook Hacking tool Secrets

2) Background.js:

This is the second important one for extension, As name represents, This file helps to run background process. To make javascript as chrome extension, We are going to use this file to link javascript file. Just copy the below code and paste in it Notepad++ or Notepad and save it as Backgorund.js

background.js


chrome.browserAction.onClicked.addListener(function(tab) {
 chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});

“chrome.browserAction.onClicked” This line enables onclick function. When a user clicks on extension icon, This code executes java script.  “{file: “bookmarklet.js”}” This code represents javascript file. If you are changing this file name don’t forget to change your javacript file name.

3) Bookmarklet.js:

This file takes javascript. Just place javascript code in this file and save it as bookmarklet.js.

bookmarklet.js


// Your Javascript code goes here //


4) Images:

You have to create your own images for your extension icon. Just google about your extension in image search, Find some images, Edit it and make it as extension icon. Save the images as image.png, image1.png, image2.png as in mainfest.jason. Make default image in 40 x 40 Pixels. Save all the 4 files (manifest.json, backgroun.js, bookmarklet.js, images)  in a folder.

How to run extension in Chrome:

  • Now you have developed chrome extension with your own javascript. To run this extension in your chrome browser
  • Open Chrome Browser –> Menu –> Tools –> Extension and tick developer mode
  • Click on Load Unpack Extension to install in it browser
  • Now you can see javascript as an extension in chrome browser
  • Open  particular website where you want to run javascript and click on extension icon

Also See: Tips to Find Crush on Facebook

How to upload extension in Chrome app Store:

To upload extension in Chrome app store go to https://chrome.google.com/webstore/developer/dashboard and follow the procedure to upload extension in Chrome app store. You have to pay one time payment $5 to upload extension in chrome app store. If you are not ready to invest $5 for your extension, You can publish your extension in web through Cybertwitt. Just mail your extension files to  submitextension@cybertwitt.com. We will publish your extension as in Chrome app store so that a user can Install your extension without any trouble. 

Just think a Javascript that can be injected in a webstie and start developing your own chrome extesnion. If you are with any doubts, Feel free to ask.

Leave a Reply