{"id":28236,"date":"2016-10-18T23:01:33","date_gmt":"2016-10-18T15:01:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28236"},"modified":"2025-04-04T02:49:00","modified_gmt":"2025-04-03T18:49:00","slug":"make-bookmarklet-with-javascript","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/make-bookmarklet-with-javascript\/","title":{"rendered":"How to Create a Text-Search Bookmarklet with JavaScript"},"content":{"rendered":"

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

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

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t50 Bookmarklets For Better Productivity<\/a>\n\t\t\t\t<\/p>\n

How bookmarklets work<\/h2>\n

The URI of a bookmarklet uses the javascript:<\/code> protocol<\/a><\/strong> that indicates it\u2019s composed of JavaScript code<\/strong>. When you click on a bookmarklet, you can run JavaScript<\/strong> 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.<\/p>\n

Since bookmarks are essentially sets of JavaScript code<\/strong>, 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<\/a> bookmarklet.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tBoost Your Blog with \u2018Press This\u2019 Bookmarklet: Reblogging Made Easy<\/a>\n\t\t\t\t<\/p>\n

Get started with the JavaScript code<\/h2>\n

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

First, we get hold of the text<\/strong> the user has selected on the page with the following code:<\/p>\n

\r\ngetSelection().toString()\r\n<\/pre>\n
We need to cast<\/strong> the object returned by getSelection()<\/code><\/a> as a string<\/strong> by using the toString()<\/code><\/a> method, in order to make it output the selected text<\/strong>.<\/p>\n
Next, we need to perform a visit<\/strong> to the Wikiwand article page. We\u2019ll achieve this by using the following logic, where newURL<\/code> will be the URL of the Wikiwand article page<\/strong> (that will contain the selected string at the end):<\/p>\n
\r\nlocation.href = newURL\r\n<\/pre>\n
When we put these two code snippets together, we end up with the following script:<\/p>\n
\r\nlocation.href=\r\n    'https:\/\/www.wikiwand.com\/en\/'+getSelection().toString()\r\n<\/pre>\n
Now we only have to add the javascript:<\/code> protocol to the front, and we have the final code<\/strong> we\u2019ll use in our bookmarklet:<\/p>\n
\r\n\/\/ add in one line without line breaks\r\njavascript:location.href=\r\n    'https:\/\/www.wikiwand.com\/en\/'\r\n        +getSelection().toString().replace(\/\\n\/g,'%20')\r\n<\/pre>\n
The optional replace(\/\\n\/g,'%20')<\/code> at the end replaces any new line character<\/strong> (\\n<\/code>) in the text with a single space character<\/strong> (%20<\/code>).<\/p>\n
The JavaScript code is ready. Note that the code need to be placed in a single line with no line breaks<\/strong>, since later it will be added to a text input field<\/strong>.<\/p>\n
Create the bookmark<\/h2>\n
Open your browser\u2019s bookmark window, and add a new bookmark<\/strong>:<\/p>\n