DEV Community

Cover image for ๐Ÿ” Bookmarklets + Browser Search Engine
Andrew Luca
Andrew Luca

Posted on

๐Ÿ” Bookmarklets + Browser Search Engine

This post may be relevant mostly to developers or who loves automation. The Post covers two topics, and a combination of both in the end. But we will start with easy one first.

  • Bookmarklets (medium)
  • Browser Search Engine (easy)
  • Bookmarklets + Browser Search Engine (hard)

Browser Search Engine

browser address bar

Nowadays each browser allows you to type anything in the address bar. And it will open the website if what you typed is an URL, or just open your default search engine with your query.

What is cool that browsers allow you to change or add your own custom search engines ๐ŸŽ‰

add new browser search engine

As you can see in URL field you put anything you want and %s will be replaced with what you entered in address bar. This gives us powers.

Examples:

  • https://www.npmjs.com/package/%s Go to NPM package
  • https://you-org.atlassian.net/browse/%s Go to Jira task
  • https://www.typescriptlang.org/dt/search?search=%s Search TypeScript Types
  • https://caniuse.com/#search=%s Check a WEB feature

Actually most of the sites allow you to search on them, and you can take advantage of this, and reduce your time searching with custom search engines.

Tip: You can make your website to register automatically as a custom search engine, see OpenSearch description format

And we are done with first part of this post ๐Ÿ˜ฎโ€๐Ÿ’จ

weekend confused

Bookmarklets

This is a more advanced topic because involves writing code ๐Ÿง‘โ€๐Ÿ’ป A bookmarklet is a simple browser bookmark (๐Ÿ”–), but in place of URL it is a specific code.

image

Here is a very simple example. Create a bookmark and in place of URL put content below, then click on it. You will get that message. The trick is so that your code should start with javascript:

javascript:alert('Hello World');
Enter fullscreen mode Exit fullscreen mode

I have a list of such bookmarklets that do different stuff.

Here is a simple code template to get started (this is an IIFE):

javascript: void ((function() {
  /* Your code goes here */
})());
Enter fullscreen mode Exit fullscreen mode

And we are done with our second part of the post ๐Ÿ˜ฎโ€๐Ÿ’จ

caught reading

Bookmarklets + Browser Search Engine

Are you still here? ๐Ÿค” Soooo. What would happen, and what we can do if we put such a bookmarklet script into the URL field of a custom search engine? To the moon ๐Ÿš€ ๐Ÿš€ ๐Ÿš€

We can run a script but also we have access to what user introduced into address bar. Here is our template a little bit modified.

javascript: void ((function(s) {
  /* Your code goes here */
  /* `s` is what user typed in address bar */
})('%s'));
Enter fullscreen mode Exit fullscreen mode

We put %s browser placeholder for query as an argument when calling our IIFE.

Let's modify our script above to show us the message we typed in address bar.

javascript: void ((function(s) {
  alert(s);
})('%s'));
Enter fullscreen mode Exit fullscreen mode

mindblow

And a real exmple. Recently I made a static Bookmarklet for Google Meet, when clicked, it will open my video using Picture in Picture mode

Having this power of user input, we can register it as a custom search engine, and give user name in the input, and open a specific user video as Picture in Picture. So from bookmarklet I linked above we need to make a few changes.

From this:

javascript: void ((function() {
  // ...
  const userName = 'You';
  // ...
})());
Enter fullscreen mode Exit fullscreen mode

To this:

javascript: void ((function(userName = 'You') {
  // ...
})('%s'));
Enter fullscreen mode Exit fullscreen mode

Now whenever I need to open some person video as PiP, I just activate this custom search engine using shortcut, and typing his name and hit Enter.

Easy Peasy Lemon Squeezy ๐Ÿ‹ ๐Ÿ‹ ๐Ÿ‹

obama phew

For me when I realised that this is possible it was an Eureka!!! moment.

Now I have to find different ways to simplify, automate and make faster my day to day web surfing experience!

Here is again my current list of Bookmarklets.
If you have any crazy idea that could fill that list, I would be glad to implement it, if of course it will be possible ๐Ÿ˜ƒ

Thanks for reaching the bottom ๐Ÿ˜€

Cover Photo by Daniel Lerman on Unsplash

Discussion (0)