America-Online-Web-Search, Browser Extension, Google Chrome, Javascript

Google Chrome Extension – America Online (aol.com) Web Search, an Omnibox extension

Google Chrome Omnibox Search extension that enables you to search America Online (aol.com) from the Omnibox.  To use, simply type ‘aol’, a space, and your search query into the Omnibox and it will open your search results up in a new tab. While America Online has web search that also sports the ‘Powered By Google’ badge, America Online has had web search features for quite some time and I believe they supplement their results with their own. The ranking is different at the very least.

manifest.json


{
	"name" : "America Online Web Search",
	"short_name": "aol Search",
	"description" : "To use, type 'aol' & space, and a query term into the Omnibox. timothytocci.com",
	"version" : "0.1",
	"background" : {
		"scripts" : ["background.js"]
	},
	"omnibox" : {
		"keyword" : "aol"
	},
	"icons" : {
		"16" : "aol_16.png",
		"32" : "aol_32.png",
		"48" : "aol_48.png",
		"128" : "aol_128.png"
	},
	"manifest_version" : 2
}

background.js


chrome.omnibox.onInputEntered.addListener(function (text) {
	var createProperties = {
		url : "http://search.aol.com/aol/search?q="
		 + encodeURIComponent(text)
	};
	chrome.tabs.create(createProperties);
});
chrome.omnibox.onInputStarted
.addListener(function () {
	var suggestion = {
		description : "Search using America Online Web Search for the query: %s "
	}
	chrome.omnibox.setDefaultSuggestion(suggestion);
});

Install America Online Web Search Extension (chrome store)

Advertisements
Standard
Amazon-Web-Search, Browser Extension, Google Chrome, Javascript

Google Chrome Extension – Amazon Web Search, an Omnibox extension

Google Chrome Omnibox Search extension that enables you to search the web using Amazon from the Omnibox.  While still experimental at Amazon and powered by Google; if Amazon turns its computing might towards web search – we’re all in for great results. To be fair, Amazon’s web search experiment is named Amazon Smart Search (which is easily confused with its commercial endeavors) (besides, how would ‘___ query term here’ look to you every day while using it?) – not Amazon Web Search (which is used in the extension). Also, I feel its fair to mention that there’s almost twice as many paid results (ads) on these result pages.

To use, simply type ‘aws’, a space, and your search query into the Omnibox and it will open your search results up in a new tab.

manifest.json


{
	"name" : "Amazon Web Search",
	"short_name": "aws Search",
	"description" : "To use, type 'aws' & space, and a query term into the Omnibox. timothytocci.com",
	"version" : "0.1",
	"background" : {
		"scripts" : ["background.js"]
	},
	"omnibox" : {
		"keyword" : "aws"
	},
	"icons" : {
		"16" : "aweb_16.png",
		"32" : "aweb_32.png",
		"48" : "aweb_48.png",
		"128" : "aweb_128.png"
	},
	"manifest_version" : 2
}

background.js


chrome.omnibox.onInputEntered.addListener(function (text) {
	var createProperties = {
		url : "http://www.amazon.com/gp/bit/apps/web/SERP/search?&query="
		 + encodeURIComponent(text)
	};
	chrome.tabs.create(createProperties);
});
chrome.omnibox.onInputStarted
.addListener(function () {
	var suggestion = {
		description : "Search using Amazon Web Search for the query: %s "
	}
	chrome.omnibox.setDefaultSuggestion(suggestion);
});

Install Amazon Web Search Extension (source zip)

File: aws.zip
CRC-32: 242f84bc
MD4: 7fffda73151dbf33aba8c5fae00a3ee8
MD5: 8f575adb94b0cfb32ac8094d78dafa03
SHA-1: 874a58947df97fdd3da00583e6b11ed941de0c81

Standard
Browser Extension, Google Chrome, Javascript, Vimeo-Search

Google Chrome Extension – Vimeo (vimeo.com) Search, an Omnibox extension

Google Chrome Omnibox Search extension that enables you to search Vimeo (vimeo.com) from the Omnibox.  To use, simply type ‘vim’, a space, and your search query into the Omnibox and it will open your search results up in a new tab.

manifest.json


{
	"name" : "Vimeo Search",
	"short_name": "vim Search",
	"description" : "To use, type 'vim' & space, and a query term into the Omnibox. timothytocci.com",
	"version" : "0.1",
	"background" : {
		"scripts" : ["background.js"]
	},
	"omnibox" : {
		"keyword" : "vim"
	},
	"icons" : {
		"16" : "vim_16.png",
		"32" : "vim_32.png",
		"48" : "vim_48.png",
		"128" : "vim_128.png"
	},
	"manifest_version" : 2
}

background.js


chrome.omnibox.onInputEntered.addListener(function (text) {
	var createProperties = {
		url : "http://vimeo.com/search?q="
		 + encodeURIComponent(text)
	};
	chrome.tabs.create(createProperties);
});
chrome.omnibox.onInputStarted
.addListener(function () {
	var suggestion = {
		description : "Search Vimeo for the query: %s "
	}
	chrome.omnibox.setDefaultSuggestion(suggestion);
});

Install Vimeo Search Extension (chrome store)

Standard
Browser Extension, Google Chrome, Javascript, You-Tube-Search

Google Chrome Extension – You-Tube (youtube.com) Search, an Omnibox extension

Google Chrome Omnibox Search extension that enables you to search YouTube from the Omnibox.  To use, simply type ‘yt’, a space, and your search query into the Omnibox and it will open your search results up in a new tab.

manifest.json


{
	"name" : "You-Tube Search",
	"short_name": "yt Search",
	"description" : "To use, type 'yt' & space, and a query term into the Omnibox. timothytocci.com",
	"version" : "0.1",
	"background" : {
		"scripts" : ["background.js"]
	},
	"omnibox" : {
		"keyword" : "yt"
	},
	"icons" : {
		"16" : "yt_16.png",
		"32" : "yt_32.png",
		"48" : "yt_48.png",
		"128" : "yt_128.png"
	},
	"manifest_version" : 2
}

background.js


chrome.omnibox.onInputEntered.addListener(function (text) {
	var createProperties = {
		url : "http://www.youtube.com/results?search_query="
		 + encodeURIComponent(text)
	};
	chrome.tabs.create(createProperties);
});
chrome.omnibox.onInputStarted
.addListener(function () {
	var suggestion = {
		description : "Search YouTube for the query: %s "
	}
	chrome.omnibox.setDefaultSuggestion(suggestion);
});

Install You-Tube Search Extension (chrome store)

Standard
Browser Extension, Google Chrome, Google-Groups-Search, Javascript

Google Chrome Extension – (Google) Groups Search, an Omnibox extension

Google Groups Search is an Omnibox browser extension that allows you to search Google Groups from the browser. To use, type ‘ggs’ & space, and a query term into the Omnibox. The search result for your query will open up in a new tab.

manifest.json


{
	"name" : "Groups Search",
	"short_name": "ggs Search",
	"description" : "To use, type 'ggs' & space, and a query term into the Omnibox. timothytocci.com",
	"version" : "0.1",
	"background" : {
		"scripts" : ["background.js"]
	},
	"omnibox" : {
		"keyword" : "ggs"
	},
	"icons" : {
		"16" : "ggs_16.png",
		"32" : "ggs_32.png",
		"48" : "ggs_48.png",
		"128" : "ggs_128.png"
	},
	"manifest_version" : 2
}

background.js


chrome.omnibox.onInputEntered.addListener(function (text) {
	var createProperties = {
		url : "https://groups.google.com/forum/#!search/"
		 + encodeURIComponent(text)
	};
	chrome.tabs.create(createProperties);
});
chrome.omnibox.onInputStarted
.addListener(function () {
	var suggestion = {
		description : "Search Google Groups for the query: %s "
	}
	chrome.omnibox.setDefaultSuggestion(suggestion);
});

Install (Google) Groups Search Search Extension (chrome store)

Standard
Browser Extension, Google Chrome, Javascript, Mozilla-Open-Directory-Search

Google Chrome Extension – Mozilla Open Directory (dmoz.org) Search, an Omnibox extension

Google Chrome Omnibox Search extension that enables you to search Mozilla Open Directory (dmoz.org) from the omnibox.  To use, simply type ‘dmoz’, a space, and your search query into the omnibox and it will open your search results up in a new tab.

From dmoz.org – “The Open Directory Project is the largest, most comprehensive human-edited directory of the Web. It is constructed and maintained by a vast, global community of volunteer editors.”

manifest.json


{
	"name" : "Mozilla Open Directory Project Search",
	"short_name": "dmoz Search",
	"description" : "To use, type 'dmoz' & space, and a query term into the Omnibox. timothytocci.com",
	"version" : "0.1",
	"background" : {
		"scripts" : ["background.js"]
	},
	"omnibox" : {
		"keyword" : "dmoz"
	},
	"icons" : {
		"16" : "dmoz_16.png",
		"32" : "dmoz_32.png",
		"48" : "dmoz_48.png",
		"128" : "dmoz_128.png"
	},
	"manifest_version" : 2
}

background.js


chrome.omnibox.onInputEntered.addListener(function (text) {
	var createProperties = {
		url : "http://www.dmoz.org/search?q="
		 + encodeURIComponent(text)
	};
	chrome.tabs.create(createProperties);
});
chrome.omnibox.onInputStarted
.addListener(function () {
	var suggestion = {
		description : "Search Mozilla Open Directory Project (dmoz) for the query: %s "
	}
	chrome.omnibox.setDefaultSuggestion(suggestion);
});

Install Mozilla Open Directory Search Extension (chrome store)

Standard
Browser Extension, Google Chrome, Javascript, Opera, Share-It

Google Chrome Extension Share-it New Feature Update – An Options Page

The Google Chrome extension Share-it now has an Options page that enables you to choose which menu items are visible. Users simply can check which menu items to use and which to hide on the options page instead of navigating a menu of irrelevant menu items that they do not use. Preferences in an add-on are stored within the localstorage object in the browser in order to persist across start ups and closings. Developing an options page for your add-on isn’t a very difficult task, however, there are a couple of coding issues  to be aware of.

Share-it context menu running in Google Chrome

Share-it Context Menu

Share-it context menu options page running in Google Chrome

Share-it Options Page

Opera Next Is In The Loop

Something else to note is that I now also test Share-it on Opera Next where it runs superbly. I plan on eventually submitting this to the Opera store for consumption . For now, however, there is a link to download the .nex file at the bottom of this post if you want to use in now. Opera Next is based on the open source Chromium browser which Google Chrome is also based on. The context menu API is basically the same throughout as it allows for a shared code-base for context menu add-on development.

Share-it Context Menu running on Opera Next

Share-it Context Menu running on Opera Next

Caveats Developing an Options page or Popup page

There are a couple of tricky issues you should keep in mind if you are developing an options page for your add-on. First relates to scripting in pages inside of your add-on. There can be no inline script in your pages. Just keep your JavaScript in a separate file and make sure you are careful with your scripting not to create any inline script. Usually this means listening for click events and handling them using the event itself (similar to the way you would do it with Actionscript and Flex if you’ve ever done any Flash coding). The second issue relates to message and object passing. The JavaScript executing in your page isn’t in global scope for security reasons. There’s a special function to call, chrome.extension.getBackgroundPage(), that you have to call in order to gain access to the background page (app.js in this add-on). If you run into problems developing your page you should inspect the running page itself. The generated background page inspector will not show errors for secondary parts of the add-on (remember, not in global scope). Check out the source code below if you’re curious.

Source Code:

manifest.json

{
  "name": "Share-it",
  "description": "Adds context menu items to share the current page on a number of websites",
  "version": "0.4",
  "permissions": ["contextMenus"],
  "background": {
    "scripts": ["app.js"]
  },
  "options_page": "options.html",
  "icons" : {
		"16" : "favicon.ico",
		"32" : "peopleicon32.png",
		"48" : "peopleicon48.png",
		"128" : "peopleicon128.png"
	},
  "manifest_version": 2
}

app.js

/** app.js */
var defaultentries = [
	{
	"menu":"facebook.com",
	"active":1
	},{
	"menu":"twitter.com",
	"active":1
	},{
	"menu":"plus.google.com",
	"active":1
	},{
	"menu":"linkedin.com",
	"active":1
	},{
	"menu":"digg.com",
	"active":1
	},{
	"menu":"stumbleupon.com",
	"active":1
	},{
	"menu":"tumblr.com",
	"active":1
	},{
	"menu":"friendfeed.com",
	"active":1
	},{
	"menu":"fark.com",
	"active":1
	},{
	"menu":"blinklist.com",
	"active":1
	},{
	"menu":"plurk.com",
	"active":1
	},
];
var entries = {};
if (!localStorage.getItem("entries")) {
	localStorage.setItem("entries", JSON.stringify(defaultentries));
}
entries = JSON.parse(localStorage.getItem("entries"));
function isActive(menu){
	console.log("isActive");
	var elen = entries.length;
	console.assert(!elen == 0);
	for(i=0;i<elen;i++){
		if(entries[i]["menu"] == menu){
			console.log(entries[i]["menu"]);
			if(entries[i]["active"] == 1){
				return true;
			}else{
				return false;
			}
		}
	}
}
function setActive(menu){
	console.log("setActive");
	var elen = entries.length;
	console.log(menu);
	console.assert(!elen == 0);
	for(i=0;i<elen;i++){
		if(entries[i]["menu"] == menu){
			entries[i]["active"] = 1;
		}
	}
	localStorage.setItem("entries", JSON.stringify(entries));
}
function setInactive(menu){
	console.log("setInactive");
	var elen = entries.length;
	console.log(menu);
	console.assert(!elen == 0);
	for(i=0;i<elen;i++){
		if(entries[i]["menu"] == menu){
			entries[i]["active"] = 0;
		}
	}
	localStorage.setItem("entries", JSON.stringify(entries));
}
/* Create the context menu */
var hp = chrome.contextMenus.create({"title": "Share-it"});

if(isActive("facebook.com")){
	chrome.contextMenus.create({"title": "facebook.com", "contexts":["page"], "parentId": hp, "onclick": facebookIt});
}
function facebookIt(i, t){
	var createProperties = {url: "http://www.facebook.com/sharer.php?u="+ encodeURI(t.url) + "&src=" + encodeURIComponent("Share-it")};
	chrome.tabs.create(createProperties);
}

if(isActive("twitter.com")){
	chrome.contextMenus.create({"title": "twitter.com", "contexts":["page"], "parentId": hp, "onclick": twitterIt});
}
function twitterIt(i, t){
	var createProperties = {url: "https://twitter.com/share?url="+ encodeURI(t.url) + "&text=" + encodeURIComponent(t.title)};
	chrome.tabs.create(createProperties);
}

if(isActive("plus.google.com")){
	chrome.contextMenus.create({"title": "plus.google.com", "contexts":["page"], "parentId": hp, "onclick": googleplusIt});
}
function googleplusIt(i, t){
	var createProperties = {url: "https://plusone.google.com/_/+1/confirm?hl=en&url="+ encodeURI(t.url)};
	chrome.tabs.create(createProperties);
}

if(isActive("linkedin.com")){
	chrome.contextMenus.create({"title": "linkedin.com", "contexts":["page"], "parentId": hp, "onclick": linkedinIt});
}
function linkedinIt(i, t){
	var createProperties = {url: "http://www.linkedin.com/cws/share?url="+ encodeURI(t.url)};
	chrome.tabs.create(createProperties);
}

if(isActive("digg.com")){
	chrome.contextMenus.create({"title": "digg.com", "contexts":["page"], "parentId": hp, "onclick": diggIt});
}
function diggIt(i, t){
	var createProperties = {url: "http://digg.com/submit?url="+ encodeURI(t.url) + "&title=" + encodeURIComponent(t.title)};
	chrome.tabs.create(createProperties);
}

if(isActive("stumbleupon.com")){
	chrome.contextMenus.create({"title": "stumbleupon.com", "contexts":["page"], "parentId": hp, "onclick": stumbleuponIt});
}
function stumbleuponIt(i, t){
	var createProperties = {url: "http://www.stumbleupon.com/submit?url="+ encodeURI(t.url)};
	chrome.tabs.create(createProperties);
}

if(isActive("tumblr.com")){
	chrome.contextMenus.create({"title": "tumblr.com", "contexts":["page"], "parentId": hp, "onclick": tumblrIt});
}
function tumblrIt(i, t){
	var createProperties = {url: "http://www.tumblr.com/share?v=3&u="+ encodeURI(t.url) + "&t=" + encodeURIComponent(t.title)};
	chrome.tabs.create(createProperties);
}

if(isActive("friendfeed.com")){
	chrome.contextMenus.create({"title": "friendfeed.com", "contexts":["page"], "parentId": hp, "onclick": friendfeedIt});
}
function friendfeedIt(i, t){
	var createProperties = {url: "http://www.friendfeed.com/share?url="+ encodeURI(t.url) + "&title=" + encodeURIComponent(t.title)};
	chrome.tabs.create(createProperties);
}

if(isActive("fark.com")){
	chrome.contextMenus.create({"title": "fark.com", "contexts":["page"], "parentId": hp, "onclick": farkIt});
}
function farkIt(i, t){
	var createProperties = {url: "http://cgi.fark.com/cgi/fark/farkit.pl?u="+ encodeURI(t.url) + "&h=" + encodeURIComponent(t.title)};
	chrome.tabs.create(createProperties);
}

if(isActive("blinklist.com")){
	chrome.contextMenus.create({"title": "blinklist.com", "contexts":["page"], "parentId": hp, "onclick": blinklistIt});
}
function blinklistIt(i, t){
	var createProperties = {url: "http://www.blinklist.com/index.php?Action=Blink/Addblink.php&Url="+ encodeURI(t.url) + "&Title=" + encodeURIComponent(t.title)};
	chrome.tabs.create(createProperties);
}

if(isActive("plurk.com")){
	chrome.contextMenus.create({"title": "plurk.com", "contexts":["page"], "parentId": hp, "onclick": plurkIt});
}
function plurkIt(i, t){
	var createProperties = {url: "http://plurk.com/?qualifier=shares&status=" + encodeURIComponent(t.title) + "%20%2D%20" + encodeURI(t.url)};
	chrome.tabs.create(createProperties);
}

options.html


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Share-it Options</title>
	<script type="text/javascript" src="options.js"></script>
</head>
<body>
<ul id="menu"></ul>
<div class="summary">Changes will take place the next time you start your browser.
Or if you don't want to close the browser you could uncheck and recheck the enabled box next to this extension on the Extensions tab page.</div>
</body>
</html>

options.js


window.onload = function () {
	ckb = chrome.extension.getBackgroundPage().entries;
	var list = document.getElementById("menu");
	for(i = 0; i < ckb.length; i++){
		console.log(ckb[i]["active"]);
		if(ckb[i]["active"] == 1){
			var li = document.createElement("li");
			var temp = "<input class="\&quot;butt\&quot;" type="\&quot;checkbox\&quot;" checked="checked" value="\&quot;&quot;" />" + ckb[i]["menu"] + "";

			li.innerHTML = temp;
			list.appendChild(li);
		}else{
			var li = document.createElement("li");
			var tempp = "<input class="\&quot;butt\&quot;" type="\&quot;checkbox\&quot;" value="\&quot;&quot;" />" + ckb[i]["menu"] + "";
			li.innerHTML = tempp;
			list.appendChild(li);

		}
	}
	as = document.getElementsByClassName("butt");
	for(i=0;i<as.length;i++){
		as[i].addEventListener("click",function(evt){
			if(evt.target.checked == true){

				chrome.extension.getBackgroundPage().setActive(evt.target.value);
			}else{
				chrome.extension.getBackgroundPage().setInactive(evt.target.value);
			}
		},false)
	}
}

Version 0.5 update – fixed the graphics display in newest Chrome browser

If you downloaded an extension from somewhere other than the Google Store (or the Opera Store), Chrome will not let you install it on the fly (Opera will install it, however, you’ll have to go to the extensions page to enable it). You have to go to the browser menu and choose Tools->Extensions to open up the Extensions tab. Then drag the extension from wherever it is on the file-system to the open Extensions page. This should start the install process. If you ever feel funny about a packed extension that was downloaded you can unzip them to inspect the code (if you don’t have 7zip you’ll have to change the file extension to .zip – do it on a copy).

Related:

Chrome Browser:

Opera Next Extension Development:

References From Google Developer:

Standard