How to create Quick Search Bookmarks with Javascript

As a web designer, I always look for design elements for inspiration. So to search for images normally we open Google.com, Flickr.com and other preferred..
Feb 26, 2014 Javascript, bookmarks, javascript tips

As a web designer, I always look for design elements for inspiration. So to search for images normally we open Google.com, Flickr.com, and other preferred sites, apply different search filters and type keywords and then hit enter to view the results. It’s ok to follow this process if we need to do this for two or three times in a day. But for a designer, it’s not the case. We look for resources a lot and that wastes a lot of our valuable time.

What if we can automate this task and reduce a few step? I created javascript bookmarks for different searches and it’s helping me a lot to save time and search for resources with only a click, type keywords and hit enter.

Let’s create a bookmark to search google with image size larger than 1024×768 resolution with license filter labeled for reuse.

Step 1: Create search query

Open Google.com and search for “Abstract Wallpapers”.
This will show the result for web search. Click Images to view image search results.

Step 2: Apply search filters

Now on this page, we can click on search tools and apply a few filter our search results. You can apply whatever you want, however for this trick, I am setting Size to Larger than 1024×768 and Usage rights to Labeled for reuse.

Step 3: Get the query URL

By this time, the URL in the address bar has changed with specific query parameters we applied in above steps. Copy the URL in address bar and save it in a text or any editor you use to write Javascript.

Step 4: Write Javascript Code

The string we copied might be a very long string but we need to look for the keyword we used to search in step 1. In this case, it is the Abstract Wallpapers. The URL will have this value encoded which is something like “abstract+wallpaper”. So if you search for abstract, you will see the query param it issuing. In this case is q=keyword.

function(){
	var keyword = prompt("Type keywords:");
	var url = 'https://www.google.com/search?q='+keyword+'&hl=en&authuser=0&source=lnms&tbm=isch&sa=X&ei=q-QNU-LgIoSCrAezzoDIDw&ved=0CAcQ_AUoAQ&biw=1920&bih=1079#authuser=0&hl=en&q=abstract+wallpaper&tbm=isch&tbs=isz:lt,islt:xga,sur:fc'; 
	var win = window.open(url, '_blank'); 
	win.focus();
}

In above code, line 1, is to start a javascript function and line 6 with is to wrap the function code.

Line 2, we define a Javascript prompt for the keyword to search.

Line 3, we define the URL we copied however, there’s one change we need to do. We need to pass the keyword variable to the query parameter so, remove everything after q= till & and pass the keyword variable instead. For this, we use Javascript concatenation technique.

[htmltag tag=’code’ class=”]’string’+var+’string’;[/htmltag]

Make sure you use same quotes for concatenation if your declaration is within single quotes use single otherwise double. If this isn’t right, the function will break.

Line 4, We use javascript technique to open a tab or new page in the browser and pass URL parameter with _blank for new window or tab.

Line 5, We tell the program to focus on the new window.

Step 5: Creating the bookmark

Now our function is ready and we need to create a bookmark. Carefully bring all the code in one line and wrap it between
javascript:(FUNCTION_IN_ONE_LINE)();

The end result should be like this:

javascript:(function(){var keyword = prompt("Type keywords:"); var url = 'https://www.google.com/search?q='+keyword+'&source=lnms&tbm=isch&sa=X&ei=zzsGU5_mIouyrgf9uIDYDA&ved=0CAgQ_AUoAg&biw=1918&bih=1079#q='+keyword+'&tbm=isch&tbs=isz:lt,islt:2mp,sur:fc'; var win = window.open(url, '_blank'); win.focus();})();

Step 6: Test and create a bookmark

To test this, you can simply copy the entire line and paste it in the browser address bar. It should ask for the keyword. Once you type the keyword and hit enter, it should open the Google image search results with applied filters.

Once our test is passed, Right click anywhere on the bookmark bar and click add new. Type a title and enter the code we created in the URL field. Save it.

Now you have a bookmark to search for images greater than 1024×768 size with a license to reuse.

You can create these bookmarks for any website, just change the URL and the keyword variable where it is required. Here’s a few from my collection:

Google Image Search

javascript:(function(){var keyword = prompt("Type keywords:"); var url = 'https://www.google.com/search?q='+keyword+'&source=lnms&tbm=isch&sa=X&ei=zzsGU5_mIouyrgf9uIDYDA&ved=0CAgQ_AUoAg&biw=1918&bih=1079#q='+keyword+'&tbm=isch&tbs=isz:lt,islt:2mp,sur:fc'; var win= window.open(url, '_blank'); win.focus();})();

Flickr Image Search

javascript:(function(){var keyword = prompt("Type keywords:"); var url = 'https://www.flickr.com/search/?q='+keyword+'&m=tags&l=deriv&ss=0&ct=5&mt=photos&w=all&adv=1'; var win= window.open(url, '_blank'); win.focus();})();

Icon Search @ Iconfinder.com

javascript:(function(){var keyword = prompt("Type keywords:"); var url = 'https://www.iconfinder.com/search/?q='+keyword+'&maximum=512&price=free'; var win= window.open(url, '_blank'); win.focus();})();

Dribble Search

javascript:(function(){var keyword = prompt("Type keywords:"); var url = 'https://dribbble.com/search?q='+keyword; var win= window.open(url, '_blank'); win.focus();})();

Go ahead, spend some time to create these quick and easy bookmarks and save huge time in future. If you like this trick, please share the link with your friends.