书签是可以作为浏览器书签访问的JavaScript应用程序 。 它们用于使用户能够在网页上执行不同的操作 。 例如， FontShop的此书签小册子用于预览任何网页上的FontShop网络字体。

在本文中，我们将通过创建一个对任何网页上的选定文本执行Wikiwand （看起来更好的Wikipedia） 搜索 的书签来构造书签的过程是多么快速和容易。

小书签的工作方式

小书签的URI 使用javascript:协议指示它由JavaScript代码组成 。 单击书签时，可以在网页上运行JavaScript ，并执行任务，例如更改页面的外观，重定向到另一个页面或在其上显示新信息。

由于书签本质上是JavaScript代码集 ，因此很容易用很少JavaScript知识（无论是个人使用还是将其提供给您的用户）进行创建，例如WordPress的Press This书签。

开始使用JavaScript代码

Wikiwand用于英语文章的URL结构为https://www.wikiwand.com/en/articleTitle 。 我们需要编写一个脚本，该脚本跳到Wikiwand页面，该URL的URL 以用户刚刚选择的字符串结尾 -选定的文本将需要代替articleTitle 。

首先，我们使用以下代码来掌握用户在页面上选择的文本 ： 

getSelection().toString()

我们需要转换返回的对象getSelection()通过使用作为字符串 toString()方法，以使其输出选定的文本 。

接下来，我们需要访问 Wikiwand文章页面。 我们将使用以下逻辑来实现这一点，其中newURL将是Wikiwand文章页面的URL （将在最后包含所选字符串）： 

location.href = newURL

当我们将这两个代码片段放在一起时，我们将得到以下脚本： 

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

现在，我们只需要在前面添加javascript:协议，就可以在书签中使用最终代码 ： 

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

最后的可选replace(/\n/g,'%20') 用单个空格字符 （ %20 ） 替换文本中的任何新行字符 （ \n ）。

JavaScript代码已准备就绪。 请注意，代码需要放在一行中且没有换行符 ，因为稍后它将被添加到文本输入字段中 。

创建书签

打开浏览器的书签窗口，然后添加一个新书签 ：

  • Firefox：按ctrl + shift + B / cmd + shift + B ，右键单击“书签工具栏”，然后选择“新建书签”。
  • Chrome：按ctrl + shift + O / cmd + alt + B ，右键单击“书签栏”，然后选择“添加页面…”。

在URL字段中，从以前复制粘贴JavaScript代码 。 创建书签后即可使用。 转到任何网页，在Wikiwand中选择要搜索的单词 ，然后单击小书签 -Wikiwand文章页面将立即打开。

快速访问

您可以选择直接在浏览器中显示书签以进行快速访问，而不必每次需要书签时都进入书签菜单。

  • Firefox：在顶部菜单栏中单击“查看>工具栏”，然后选择“书签工具栏”。
  • Chrome：按ctrl + shift + B / cmd + shift + B。

创建一个书签链接

您也可以将书签作为超链接添加到网站，访问者可以通过将链接拖放到书签工具栏上，或者右键单击该链接并选择将其添加为书签的选项来添加书签。

要将您的小书签变成超链接，请创建一个<a> HTML标签，并将小书签脚本作为其href属性的值 ： 

<!-- 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>

如何分开存放小书签

您还可以使用一个单独JavaScript文件来存储小书签代码，如果您使用的是简短脚本（例如我们在本教程中刚刚看到的脚本），则可能不需要这样做，但是当JavaScript代码太长而无法使用时，可以派上用场。将其复制粘贴到浏览器的书签栏中。

文件myscript.js将包含小书签的主要JavaScript代码 ，您需要将以下代码添加为书签URL （添加到浏览器的书签栏，或添加为HTML文件中href属性的值）： 

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

上面的代码段包装在一个自动调用箭头函数中 ，并使用ECMAScript 6的功能（例如let关键字）以减少代码长度。 当用户单击书签时 ，它将在文档的<head>部分中添加一个指向myscript.js文件的<script>标记（请注意，对于myscript.js文件，您可能需要使用绝对路径）。

在我以前的文章中，您可以阅读有关如何使用with语句和自调用JavaScript函数的更多信息 。

翻译自: https://www.hongkiat.com/blog/make-bookmarklet-with-javascript/