Today a simple tutorial to show a right click context menu on a selection on web pages with Chrome Browser!

This:

First of all you need to read chrome developer reference (http://goo.gl/ND5z2) .

You can start reading from manifest files format (manifest.json):

[code lang=”xml” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]{
// Required
"name": "My Extension",
"version": "versionString",
// Recommended
"description": "A plain text description",
"icons": { … },
"default_locale": "en",</code>

// Pick one (or none)
"browser_action": {…},
"page_action": {…},
"theme": {…},
"app": {…},

// Add any of these that you need
"background_page": "aFile.html",
"chrome_url_overrides": {…},
"content_scripts": […],
"content_security_policy": "policyString",
"file_browser_handlers": […],
"homepage_url": "http://path/to/homepage",
"incognito": "spanning" or "split",
"key": "publicKey",
"minimum_chrome_version": "versionString",
"nacl_modules": […],
"offline_enabled": true,
"omnibox": { "keyword": "aString" },
"options_page": "aFile.html",
"permissions": […],
"plugins": […],
"requirements": {…},
"update_url": "http://path/to/updateInfo.xml"
}[/code]

After that, open notepad and create 3 files in a folder:
– manifest.json
– rightclick.js
– background.html
and an optional icon file
– icon.png (http://goo.gl/3kK92)

In manifest.json copy/paste this code:

[code lang=”xml” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]{
"name": "YouTube Free Search",
"description": "Search as you want from any web pages!",
"version": "0.1",
"permissions": ["contextMenus"],
"background_page": "background.html",
"icons": { "16": "icon.png",
"48": "icon.png",
"128": "icon.png" }
}[/code]

In background.html copy this string:

[code lang=”php” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]<script src="rightclick.js"></script>[/code]

In rightclick.js write:

[code lang=”java” autolinks=”false” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”false”]function sendSearch(selectedText) {
var serviceCall = ‘http://www.youtube.com/results?search_query=’ + selectedText;
chrome.tabs.create({url: serviceCall});
}
chrome.contextMenus.create({
title: "Find ‘%s’ on YouTube!",
contexts:["selection"],
onclick: function(info, tab) {
sendSearch(info.selectionText);
}
});[/code]

Yeah!!

You can change serviceCall url with any search string you want like:
Google -> ‘http://www.google.com/q=’ + selectedText;
Facebook -> https://www.facebook.com/search/results.php?q=’ + selectedText;
Bing -> http://it.bing.com/search?q=’ + selectedText;
etc… etc…

Now,
open Google Chrome -> Tool -> Extensions -> Load unpacked extension.

Done!

Select a text in any page and click to see result!

enjoy!

Ref: albertopasca.it