How to create Quick Search Bookmarks with JS

As a web designer, I always look for design elements for inspiration. So to search for images normally 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 two or three times 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 steps? 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 an image size larger than 1024×768 resolution with a license filter labeled for reuse.

Step 1: Create search query

Open Google.com and search for “Abstract Wallpapers”.
This will show the result of the 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 filters to 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 the above steps. Copy the URL in the 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 = '//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 the above code, line 1, is to start a javascript function, and line 6 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 the Javascript concatenation technique.

'string'+var+'string';

Make sure you use the 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 the javascript technique to open a tab or new page in the browser and pass the URL parameter with _blank for a 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 = '//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 into 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 are a few from my collection:

Google Image Search

javascript:(function(){var keyword = prompt("Type keywords:"); var url = '//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 = '//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 = '//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 = '//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 the future. If you like this trick, please share the link with your friends.

WEb Development Services