Spot! A Chrome search extension

Previous week I released Spot, a Chrome extension aimed to make the Chrome browsing experience a bit more efficient and keyboard friendly.

About Spot

If you're like me and have on average about 20 tabs open at anytime you know it's a problem to navigate to the tab you're searching for. At the same time I often discover after clicking through about 10 of them that I didn't have the website open to begin with. Then the searching begins through bookmarks and/or history.

Having played that game once too many and having tried a couple of Chrome extensions to help me deal with this issue I realized there was nothing out there that was light and solved all my problems in one extension, so I started work on Spot

Spot is a search extension for Chrome along the lines of Spotlight on OS X only in a browser environment. With one search Spot searches through different section of the browsers active tabs, history and bookmark. The results are presented in a compact result list which can be easily navigated by keyboard. Depending on the entry you select a new tab will be opened or Spot will select an active tab.
When using the keyboard shortcut ' .' to open the search popup you can jump quickly to any website which previously might have taken you a lot of clicks.

Spot Search Parsers

Spot is modular build. The main Spot parser is responsible for delegating the search query to specific search parsers that have registered them selves for search work.

In the first release the only active parser is the tab search parser. However in the release scheduled for this week the bookmark parser will be added. Regular releases are planned and trough those new search parsers will be added.
Because of the use of parsers Spot will be able to search through a lot of things, think of GMail, Facebook and Twitter for example. All from the same search window.

Anything to add? Feel free to comment on this issue. To close a screencast of the first release of Spot

Local storage tip

Okay short tip on localStorage. In the most basic form you can use localStorage to just very simply store values for your extension and get them back later (session id for example).

Now let's say we want to store the session id we got from the cookie in the previous post.

localStorage.session_cookie=request.cookie;Of course when the user logs out from the service we're writing an extension for we also want to clear our session id and switch to logged out status in our extension.

An easy way of doing such logic is check localStorage if the session_cookie key is set. In order to do that we need to properly remove our session_cookie.

Well that's no problem, you might think, just do something like localStorage.session_cookie=false.

At first glance that's the logical thing to do, however this can lead to unexpected behavior as you're not actually removing the key in this way.

The real way to go about removing localStorage keys?

localStorage.removeItem("session_cookie");Doing it this way makes, the following work as expected

if (localStorage.session_cookie) {

alert("I'm logged in!");

} else {

alert("I'm logged out");

}

There's a lot more to localStorage and Web Storage checkout this link

Accessing site cookies from a Chrome extension

If you tried to play around with this you probably discovered that when you console.log() or alert() document.cookie from the background script in you extension you're greeted with a "false" message. Maybe you even left it at that (probably not as you're reading this) and decided that access is restricted for security reasons.
Well, you would be half right in thinking that. Access to site cookies isn't posible from the background script, how ever it's no problem from a content_script. Consider the following contents_scripts section in you manifest.json file.

"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["cookie.js"]
}
],

And with that goes a permissions section on the same level in your manifest.json file.

"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],

Now this is obviously just an example as you now trigger the cookie.js file for every site that you visit.

However if you now place an alert(document.cookie) in your cookie.js file and visit some random sites you'll see the cookies popup in an alert box.

Communicating with the background from you content_script

Okay, so this's all nice but how do you get that info back to your background script. If you played around or read de documents on http://code.google.com/chrome/extensions you know that simply calling chrome.extensions.getBackgroundPage() doesn't work, that's because all access to chrome.extension.* is restricted accept for the message api.

So let's try to use that. If you open up the cookie.js file and add the following line.

chrome.extension.sendRequest({cookie: document.cookie});

Now a message is send out plugin wide (in this case) containing the content of document.cookie associated with the label cookie.

Next thing we need to do is listen for that message in our background script. So open up your background.html file and add the following snippet.

chrome.extension.onRequest.addListener(

function(request, sender, sendResponse) {

console.log(request.cookie);

});

Don't forget to reload the plugin, now click on the background.html link underneath your plugin on the Extensions page to open up the inspector and click the console button. Now if you visit a couple of websites you should see the cookie contents go by in the console.

So that's how you do it. My usage of the message API in chrome is very basic, a lot more is available even message sending over different extensions is a possibility. Read more on the subject here

Using jQuery in your content_script

This might be completely obvious for some but if you're new to all this (which at the time of writing pretty much everyone is) you might have scratched your head and googled on it.

So how do you setup your Chrome extension to enable the use of jQuery in you content_script. Basically all you have to do is add it to the content_scripts section in your manifest.json as illustrated bellow.

"content_scripts": [

{

"matches": ["http://somesites.com/"],

"js": ["jquery-1.4.min.js","your_content_script.js"]

}

]

That's it! You can test it by placing an alert($) in you content_script.js file.