未加星标

How to Create a Text-Search Bookmarklet with JavaScript

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

Bookmarkletsare 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.

100+ Useful Bookmarklets For Better Productivity | Ultimate List 100+ Useful Bookmarklets For Better Productivity | Ultimate List

In a nutshell, bookmarklets are small little applications you can place as browser’s bookmark bar and they each… Read more

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.

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.

Reblog Content From Other Sites using “Press This” Bookmarklet Reblog Content From Other Sites using “Press This” Bookmarklet

Among all the features in WordPress, Press This could probably be one of the least known. Have you… Read more

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…&quot.

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 .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJavaChromeHTMLECMAScriptWordFirefox
分页:12
转载请注明
本文标题:How to Create a Text-Search Bookmarklet with JavaScript
本站链接:http://www.codesec.net/view/484611.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(27)