How to Design Text-Search Bookmarklet using JavaScript

How to Design Text-Search Bookmarklet using JavaScript

Hello friends today we gonna learn about How to Design Text-Search Bookmarklet using JavaScript. So read this article, How to Design Text-Search Bookmarklet using JavaScript step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Design Text-Search Bookmarklet using JavaScript

Bookmarklets to be JavaScript applications that is accessible as browser bookmarksThey are used to empower users perform various actions on web pages. For example, this FontShop bookmarklet is for previewing FontShop web fonts on any web page.

In this article we are going to see how quick and easy it is invent a bookmarklet by making one that runs a Wikiwand (better looking Wikipedia) Search for a selected text on a web page.

back to menu ↑

How bookmarklets work

The URI of a bookmarklet uses the javascript: protocol that indicates it is composed of JavaScript codeIf you click on a bookmarklet, you can run JavaScript on a web page and perform tasks such as changing the look of a page, redirecting to another page, or displaying new information on it.

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

back to menu ↑

Get started with the JavaScript code

The URL structure Wikiwand usage for an English article is https://www.wikiwand.com/en/articleTitle. We need to write a script that jumps to the Wikiwand page whose URL is ends with the string the user just selected – the selected text must be are placed in place of articleTitle

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

getSelection (). toString ()

We have to cast the object returned by getSelection () as a string by using the toString () method to create the enter the selected text

Next, we must pay a visit to the Wikiwand article page. We will achieve this by using the following logic, where newURL is the URL of the Wikiwand article page (which 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 all we need to do is add the javascript: protocol to the front and we have it final code we use in our bookmarklet:

// add a line without line breaks javascript: location.href = “https://www.wikiwand.com/en/” + getSelection (). toString (). replace (/ n / g, ‘% 20 ′)

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

The JavaScript code is ready. Note that the code must be posted on a single line with no line breaksas it will be later added to a text entry field

back to menu ↑

Create the bookmark

Open the bookmarks window of your browser and add a new bookmark

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

In the URL field copy and paste the JavaScript code from the past. Once the bookmark is created, it is ready to use; go to a webpage, select a word what you want to search for in Wikiwand, and click on the bookmarklet – the Wikiwand article page opens immediately.

Fast access

Instead of going to the bookmarks menu every time you need the bookmarklet, you can choose it directly display in your browser for quick access.

  • Firefox: Click on “View> Toolbars” in the top menu bar and select “Bookmarks Toolbar”.
  • Chrome: Press ctrl + shift + B / cmd + shift + B.
back to menu ↑

Create a bookmarklet link

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

To make your bookmarklet a hyperlink, create a HTML tag with the bookmarklet script as the value of the href attribute

Wikiwand Search Bookmarklet

back to menu ↑

How to keep bookmarklets separately

You can also use a separate JavaScript file to store the bookmarklet code, which probably isn’t necessary if you have a short script – like the one we just saw here tutorial – but can be useful if the JavaScript code is too long to copy and paste to the bookmarks bar of your browser.

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

// add one line without line breaks javascript: (() => {with (document) {let s = createElement (‘script’); s.src = ”https://www.hongkiat.com/blog/make- bookmarklet-with-javascript / myscript.js ”; head.appendChild (s)}}) ();

The above code snippet is packed in a self-calling arrow function, and applications features of ECMAScript 6, such as the let keyword, to reduce the length of the code. It adds one

Compsmag
Logo