How To Create A Basic Chrome Extension.

Brij Patel
Mar 28 · 3 min read

To begin with, extensions are somewhat like small software programs that customize the browsing experience and as a developer it’s in our DNA to either solve some real time problems or make our work easy by customizing it a little bit.

So what I have developed is not something fancy though but good enough to lure you towards developing some more extensions, I call my extension “Wikify” you can add it to chrome by clicking here.

Wikify is basically used for faster access of some topics which would have to search on google and open Wikipedia , Wikify simplifies the process for you.For all those reader who want hands-on experience click here

For starters make a folder and name it, we will be using sublime text editor,open that folder in sublime.Let’s begin, to create any extension first of all we need to specify the manifest file which is of JSON format.

{
"manifest_version" :2,
"name" :"Wikify",
"version" :"1.0",
"description" : "Search on Wikipedia",
"icons" : {
"128" : "icon128.png",
"48" : "icon48.png",
"16" : "icon16.png"
},
"background" : {
"scripts" : ["eventpage.js"],
"persistent" : false
},
"permissions" : [
"tabs",
"contextMenus"
]
}

If your extensions needs any permission you need to specify in manifest some other permissions other than this are “storage”,“notifications” etc.”contextMenus” is an important permission which almost any extension has, functionality of ”contextMenus” include right to provide access to extension on right clicking certain text or image or video in my case text.

Also there is an other ingredients in our manifest like eventpage.js. What is it? and what it does? So eventpage is a java-script file which will take the selected text from user and search that specific word on Wikipedia

eventpage.js (Part-1)

var menuitem={
"id" : "wikit",
"title" : "Wikify",
"contexts" : ["selection"]
};
chrome.contextMenus.create(menuitem);

Magic of above code is that it creates the row with title “Wikify” in the context menu which pops up when user selects some text from a web-page, what next? Our next step will be to perform some action when user clicks on our extension , so let’s build that function

function fixedEncodeUri(str){

return encodeURI(str).replace(/%5B/g,'[').replace(/%5D/g,']');
}chrome.contextMenus.onClicked.addListener(function(clickData){
if(clickData.menuItemId == "wikit" && clickData.selectionText){
var wikiurl="https://en.wikipedia.org/wiki/" +fixedEncodeUri(clickData.selectionText);
var createdata={
"url" :wikiurl,
"type" : "popup",
"top" : 5,
"left" : 5,
"width" : screen.availWidth/2,
"height" : screen.availHeight/2
};
chrome.windows.create(createdata,function(){});
}
})

There you go! Our extension is ready to display it’s skills,let’s test it.

To load our extension :

  1. Open the extensions page in your chrome browser here’s the link.
  2. Enable Developer Options on top right corner.
  3. Click on Load Unpacked Button.
  4. Select your folder in which you have your manifest.json file.
  5. Congratulations! you just created your first chrome extension!

Working :

Soon I will be posting a article on deploying your extension till then keep learning and keep developing!!

If you enjoyed reading this article some claps would be appreciated thanks!