前言
在前端开发过程中，经常遇到需要在浏览器中运行一段 JavaScript 代码的情况。通常情况下，我们会在浏览器中使用控制台来执行这段代码。然而，这种方法有其缺点，比如代码复杂时难以进行变量调试、不便于保存等等。因此，有一种手段可以解决这个问题，那就是使用 bookmarklet。
Bookmarklet（书签脚本）是一种浏览器书签，当用户点击该书签时，可以执行一段 JavaScript 代码。书签中的 JavaScript 代码可以访问当前浏览的页面，并可以对页面进行操作。npm 包 bookmarkleter 便是一种生成 bookmarklet 的工具。
安装
首先，我们需要在项目中引入 bookmarkleter，可以通过以下命令进行安装：
--- ------- ------------- ----------
使用
配合 Gulp 等任务管理工具使用该 npm 包，可以大大提高书签脚本的开发效率。下面，将介绍如何使用 bookmarkleter 进行 bookmarklet 的开发。
生成 bookmarklet 代码
要使用 bookmarkleter，首先需要在 JavaScript 代码中使用 B() 函数将代码进行包装。例如，我们要给当前页面添加一个提示框，代码如下：
------------- ---------------
将其包装为 bookmarklet 代码，如下：
------------------------------------ --------------------
但这种写法对于代码比较长的情况不太友好，此时我们可以使用 bookmarkleter 来生成 bookmarklet 代码。使用方法如下所示：
--- ------------- - ------------------------- --- ---- - -------------- ----------------- --- ----------- - -------------------- -------------------------
其中，代码 bookmarkleter(code); 可以将代码 code 包装并生成 bookmarklet 代码。执行上面的代码，输出结果如下：
------------------------------------ --------------------
可以看到，使用 bookmarkleter 生成的代码与前面手动包装的结果是一样的。值得注意的是，生成的代码前需要加上 javascript: 前缀，否则该代码无法被解释执行。
自定义书签标题
使用 bookmarkleter 还可以自定义书签标题。代码示例如下：
--- ------------- - ------------------------- --- ---- - -------------- ----------------- --- ----------- - ------------------- ------- ------- -------------------------
执行上述代码后，输出结果如下：
------------------------------------ --------------------------------
可以看到，自定义了书签标题之后，bookmarklet 代码中就多了一个类似于注释的内容。这个内容是 URL 编码后的书签标题，在浏览器书签栏中会显示为自定义标题。可以根据需要自定义书签标题以便更好地区分不同的 bookmarklet。
示例
下面是一个实际应用场景的示例，我们通过 bookmarklet 在页面中加入一个导航栏，并且可以进行样式调整。代码示例如下：
--- ------------- - ------------------------- --- --- - ------------------ -------- ------ ---------- --- ---- - ---------------- ---------------------------- ----------------------------- -------------------------------------- --- ------ - ---- --- - ------------------------------ --- ----- - ----------------------------- --- ----- - ------------------------------------------- --- -------- - -------------------- ------- ------------------------- - ----------- --- ---- - ---- ----- - -------------------------------- ----------------- - --------- --------------------------------- --- --- - ------------------------------ ------------- - ---------- ------------------------------- ----------- --- ----------- - ------------------- ------- ---- --------------- -------------------------
将这段代码复制到浏览器控制台中，然后执行示例代码最后一行 console.log(bookmarklet);，输出生成的 bookmarklet 代码并复制下来。然后，在浏览器书签栏中右键新建一个书签，将生成的 bookmarklet 代码填入书签的地址栏中，并随意填写一个标题（或者使用前面的代码中的 title 选项自定义书签标题），保存即可。最终效果如下图所示。
结尾
通过上面的示例，相信大家已经掌握了使用 bookmarkleter 生成 bookmarklet 代码的方法。值得注意的是，bookmarklet 中的代码是在浏览器中执行的，因此要特别注意代码的安全性。除了使用 bookmarkleter，还有一些在线工具可以帮助我们生成 bookmarklet，有兴趣的读者可以自行了解。
希望本文能对读者有所帮助，谢谢您的阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/74841