How to Create a Text-Search Bookmarklet with JavaScript

By . in Coding. Updated on .

Bookmarklets are JavaScript applications that can be accessed as browser bookmarks. They are used to enable users to perform different actions on web pages. For instance, this bookmarklet by FontShop is for previewing FontShop web fonts on any web page.

In this article, we are going to see how quick and easy it is to concoct a bookmarklet by creating one that performs a Wikiwand (better-looking Wikipedia) search for a selected text on any web page.

Read Also:  50 Bookmarklets For Better Productivity

How bookmarklets work

The URI of a bookmarklet uses the javascript: protocol that indicates it’s composed of JavaScript code. When you click on a bookmarklet, you can run JavaScript on a web page, and perform tasks, such as changing the appearance of a page, redirecting to another page, or showing new information on it.

Since bookmarks are essentially sets of JavaScript code, they are easy to create with little JavaScript knowledge, either for personal use or for offering it to your users, such as WordPress does with its Press This bookmarklet.

Read Also:  Boost Your Blog with ‘Press This’ Bookmarklet: Reblogging Made Easy

Get started with the JavaScript code

The URL structure Wikiwand uses for an English-language article is https://www.wikiwand.com/en/articleTitle. We need to write a script that jumps to the Wikiwand page of which URL ends with the string the user has just selected — the selected text will need to be put in place of articleTitle.

First, we get hold of the text the user has selected on the page with the following code:

getSelection().toString()

We need to cast the object returned by getSelection() as a string by using the toString() method, in order to make it output the selected text.

Next, we need to perform a visit to the Wikiwand article page. We’ll achieve this by using the following logic, where newURL will be the URL of the Wikiwand article page (that will contain the selected string at the end):

location.href = newURL

When we put these two code snippets together, we end up with the following script:

location.href=
    'https://www.wikiwand.com/en/'+getSelection().toString()

Now we only have to add the javascript: protocol to the front, and we have the final code we’ll use in our bookmarklet:

// add in one line without line breaks
javascript:location.href=
    'https://www.wikiwand.com/en/'
        +getSelection().toString().replace(/\n/g,'%20')

The optional replace(/\n/g,'%20') at the end replaces any new line character (\n) in the text with a single space character (%20).

The JavaScript code is ready. Note that the code need to be placed in a single line with no line breaks, since later it will be added to a text input field.

Create the bookmark

Open your browser’s bookmark window, and add a new bookmark:

  • Firefox: Press ctrl + shift + B / cmd + shift + B, right-click "Bookmarks Toolbar", and select "New Bookmark".
  • Chrome: Press ctrl + shift + O / cmd + alt + B, right-click "Bookmarks bar", and select "Add Page…".

In the URL field copy-paste the JavaScript code from before. Once the bookmark is created it’s ready to use; go to any web page, select a word you want to search for in Wikiwand, and click the bookmarklet — the Wikiwand article page will open at once.

Quick Access

Rather than reaching for the bookmarks menu every time you need the bookmarklet, you can choose to display it directly in your browser for quick access.

  • Firefox: Click "View > Toolbars" in the top menu bar, and select "Bookmarks Toolbar".
  • Chrome: Press ctrl + shift + B / cmd + shift + B.

Create a bookmarklet link

You can add your bookmarklet to a website as a hyperlink as well, which visitors can bookmark by either simply drag-and-dropping the link to the bookmark toolbar, or right-clicking the link and selecting the option to bookmark it.

To turn your bookmarklet into a hyperlink, create an <a> HTML tag with the bookmarklet script as the value of its href attribute:

<!-- add in one line without line breaks -->
<a href="javascript:location.href=
  'https://www.wikiwand.com/en/'
  +getSelection().toString().replace(/\n/g,'%20')">
          Wikiwand Search Bookmarklet
</a>

How to store bookmarklets separately

You can also use a separate JavaScript file to store the bookmarklet code, which is probably not necessary if you have a short script — like the one we’ve just seen in this tutorial — but can come handy when the JavaScript code is too long to copy-paste it to the bookmark bar of your browser.

The file myscript.js will house the main JavaScript code for the bookmarklet, and you need to add the following code as the bookmark URL (either to the browser’s bookmark bar, or as the value of the href attribute in the HTML file):

// add in one line without line breaks
javascript:(()=>{
  with(document){
    let s=createElement('script');
    s.src='myscript.js';
    head.appendChild(s)}
  })();

The code snippet above is wrapped in a self invoking arrow function, and uses features of ECMAScript 6, such as the let keyword, in order to reduce code length. It adds a <script> tag pointing to the myscript.js file to the <head> section of the document when the user clicks the bookmarklet (note that you may need to use an absolute path for the myscript.js file).

In my previous articles, you can read more on how to use the with statement and self-invoking JavaScript functions.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail