Background
In this post we will see how to create chrome plugins. We will see a simple demo plugin example in which when we click on the plugin icon we will will see the URL of current active TAB.
Getting Started
Create a directory where you will create files needed for your plugin. Lets call it "chrome_plugin" directory.
- First and foremost what you need is a file called manifest.json. This file essentially tell chrome browser details about your plugin like it's name, it's version, what permission it needs and the actual code files.
For our demo this file looks something like below -
{
"manifest_version": 2,
"name": "Open Source For Geeks Chrome Test Plugin",
"description": "This extension will just show current active Tab URL",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
Contents of manifest.json file are basically json with plugin details. As you must have notices by now it references two essential resources -
- icon.png
- popup.html
- Go ahead and put icon.png and create a file called popup.html is the same directory - "chrome_plugin".
If you do not have the icon you can use the one above. It's 20*20 pixels icon.
- Next edit popup.html with following contents -
<!doctype html> <html> <head> <title>OSFG Chrome Demo Plugin</title> <script src="popup.js"></script> </head> <body> <h1>Current Site URL : </h1> <br/> <div id="currentTabUrl"></div> </body> </html>
Again a simple HTML file but note it asks to load a popup.js javascript file.
- Go ahead create a file called popup.js and add following contents to it -
function getCurrentActiveTabUrl(callback) {
var tabQueryInfo = {
active: true,
currentWindow: true
};
chrome.tabs.query(tabQueryInfo, function(tabs) {
var currentTab = tabs[0];
var url = currentTab.url;]
console.log(url);
console.assert(typeof url == 'string', 'currentTab.url should be a string');
callback(url);
});
}
function renderOutput(outputText) {
document.getElementById('currentTabUrl').innerHTML = "<a href='" + outputText + "'>" + outputText + "</a>";
}
document.addEventListener('DOMContentLoaded', function() {
getCurrentActiveTabUrl(function(url) {
renderOutput(url);
});
});
Take some time to see the javascript code above. It essentially reads the current active TAB url and shows it in the popup in an anchor tag. And there you go your first chrome plugin is all set to be deployed.
NOTE : Most of the chrome APIs are asynchronous. So you cannot do something like -
var currTabUrl;
chrome.tabs.query(queryInfo, function(tabs) {
currTabUrl= tabs[0].url;
});
alert(currTabUrl); // Will show "undefined" as chrome.tabs.query is async.
Deploying your chrome plugin
Deploying your plugin is again quite simple
- Go to chrome://extensions/ URL is your chrome browser. Here you should see list of existing chrome extensions you are using.
- Make sure "Developer Mode" check box is selected.
- Now click on "Load Unpacked Extension" and select the folder you have plugin in - "chrome_plugin" directory is this case.
- Now open any tab. You should see the plugin with icon you had put in the directory just besides Omnibox. Go to any URL and then click on the plugin icon.
You can download this sample chrome plugin code from here.
Appending custom methods to chrome right click Menu
Lets see how we can add custom functions to right click menu. Here is what we are going to do - we will add a new option on right click which enables to search selected text in google maps.
The new manifest.json file looks like the following -
{
"manifest_version": 2,
"name": "Chrome Test Plugin",
"description": "This extension will just show current active Tab URL",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"contextMenus"
]
}
Notice couple of differences here
- There is a new permission added called contextMenus. This basically lets you operator om chrome context menus.
- There is a new key added called background that basically tells chrome about background processes. You can specify scripts or page here.
function searchgooglemaps(info)
{
var searchstring = info.selectionText;
chrome.tabs.create({url: "http://maps.google.com/maps?q=" + searchstring})
}
chrome.contextMenus.create({title: "Search Google Maps", contexts:["selection"], onclick: searchgooglemaps});
And you are done. Reload the extension.
When you click on "Search Google Maps" you should see a new Tab opening with google maps and a search location of your desired selected String.
Related Links
