npm 包 bookmarkleter 使用教程

前言

在前端开发过程中，经常遇到需要在浏览器中运行一段 JavaScript 代码的情况。通常情况下，我们会在浏览器中使用控制台来执行这段代码。然而，这种方法有其缺点，比如代码复杂时难以进行变量调试、不便于保存等等。因此，有一种手段可以解决这个问题，那就是使用 bookmarklet。

Bookmarklet（书签脚本）是一种浏览器书签，当用户点击该书签时，可以执行一段 JavaScript 代码。书签中的 JavaScript 代码可以访问当前浏览的页面，并可以对页面进行操作。npm 包 bookmarkleter 便是一种生成 bookmarklet 的工具。

安装

首先，我们需要在项目中引入 bookmarkleter，可以通过以下命令进行安装：

npm install bookmarkleter --save-dev

使用

配合 Gulp 等任务管理工具使用该 npm 包，可以大大提高书签脚本的开发效率。下面，将介绍如何使用 bookmarkleter 进行 bookmarklet 的开发。

生成 bookmarklet 代码

要使用 bookmarkleter，首先需要在 JavaScript 代码中使用 B() 函数将代码进行包装。例如，我们要给当前页面添加一个提示框，代码如下：

alert('Hello, bookmarklet!');

将其包装为 bookmarklet 代码，如下：

javascript:(function(){alert('Hello, bookmarklet!');})();

但这种写法对于代码比较长的情况不太友好，此时我们可以使用 bookmarkleter 来生成 bookmarklet 代码。使用方法如下所示：

var bookmarkleter = require('bookmarkleter');
var code = 'alert("Hello, bookmarklet!");';
var bookmarklet = bookmarkleter(code);
console.log(bookmarklet);

其中，代码 bookmarkleter(code); 可以将代码 code 包装并生成 bookmarklet 代码。执行上面的代码，输出结果如下：

javascript:(function(){alert("Hello, bookmarklet!");})();

可以看到，使用 bookmarkleter 生成的代码与前面手动包装的结果是一样的。值得注意的是，生成的代码前需要加上 javascript: 前缀，否则该代码无法被解释执行。

自定义书签标题

使用 bookmarkleter 还可以自定义书签标题。代码示例如下：

var bookmarkleter = require('bookmarkleter');
var code = 'alert("Hello, bookmarklet!");';
var bookmarklet = bookmarkleter(code, {title: '提示'});
console.log(bookmarklet);

执行上述代码后，输出结果如下：

javascript:(function(){alert("Hello, bookmarklet!");})();//<提示>

可以看到，自定义了书签标题之后，bookmarklet 代码中就多了一个类似于注释的内容。这个内容是 URL 编码后的书签标题，在浏览器书签栏中会显示为自定义标题。可以根据需要自定义书签标题以便更好地区分不同的 bookmarklet。

示例

下面是一个实际应用场景的示例，我们通过 bookmarklet 在页面中加入一个导航栏，并且可以进行样式调整。代码示例如下：

var bookmarkleter = require('bookmarkleter');
var css = 'background-color: #3399FF; color: #FFFFFF;';
var html = '<nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul></nav>';
var script = 'var nav = document.querySelector("nav"); var style = window.getComputedStyle(nav); var color = style.getPropertyValue("background-color"); var newColor = prompt("请输入新的背景颜色：", color); nav.style.backgroundColor = newColor;';
var code = `var style = document.createElement("style"); style.textContent = "${css}"; document.head.appendChild(style); var nav = document.createElement("div"); nav.innerHTML = '${html}'; document.body.appendChild(nav); ${script}`;
var bookmarklet = bookmarkleter(code, {title: '导航栏 bookmarklet'});
console.log(bookmarklet);

将这段代码复制到浏览器控制台中，然后执行示例代码最后一行 console.log(bookmarklet);，输出生成的 bookmarklet 代码并复制下来。然后，在浏览器书签栏中右键新建一个书签，将生成的 bookmarklet 代码填入书签的地址栏中，并随意填写一个标题（或者使用前面的代码中的 title 选项自定义书签标题），保存即可。最终效果如下图所示。

结尾

通过上面的示例，相信大家已经掌握了使用 bookmarkleter 生成 bookmarklet 代码的方法。值得注意的是，bookmarklet 中的代码是在浏览器中执行的，因此要特别注意代码的安全性。除了使用 bookmarkleter，还有一些在线工具可以帮助我们生成 bookmarklet，有兴趣的读者可以自行了解。

希望本文能对读者有所帮助，谢谢您的阅读！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74841