[Chrome Extension] Context menu – Select and go!

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

This:
chrome context menu extension

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

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

{
  // 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"
}

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:

{
  "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" }
}

In background.html copy this string:

<script src="rightclick.js"></script>

In rightclick.js write:

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);
  }
});

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.
chrome context menu extension
Done!

Select a text in any page and click to see result!
chrome context menu extension

enjoy!

Ref: albertopasca.it