【JS】利用书签脚本提升Chrome浏览器的自动化操作效率

1. 书签脚本：藏在浏览器里的效率神器

你可能每天都在用Chrome的书签栏，收藏那些常去的网站。但你知道吗？书签栏里藏着一个“瑞士军刀”，它能做的远不止跳转链接。我说的就是书签脚本，也叫Bookmarklet。简单来说，它是一段以 javascript: 开头的特殊网址，被你当成书签保存起来。当你点击它时，它不会打开新网页，而是像一个小魔法师，在当前页面上立刻执行一段JavaScript代码。

这东西能干嘛？想象一下这些场景：你正在看一篇排版糟糕、字体又小又密的文章，眼睛都快看花了。这时，你只需要点一下收藏夹里那个叫“护眼模式”的书签，页面瞬间变得清晰可读，背景变成柔和的豆沙绿，文字大小也调整得恰到好处。或者，你每天都要登录一个内部系统，需要手动输入账号密码，再点选一堆下拉框。有了书签脚本，点一下，所有表单瞬间自动填好，直接点击登录就行。再比如，你想快速提取当前页面上所有的图片链接，或者一键删除烦人的浮动广告和弹窗，这些都可以通过一个点击来完成。

它特别适合那些不是专业程序员，但又希望用一点技术来“偷懒”提升效率的朋友。你不需要懂复杂的浏览器插件开发，不需要去Chrome网上应用店审核等待，甚至不需要安装任何东西。你只需要找到（或者自己写）一小段JS代码，把它做成书签，效率的提升就触手可及。我自己用了快十年，它帮我节省了无数重复点击和等待的时间，是我浏览器里最不可或缺的效率工具之一。

2. 从零开始：制作你的第一个书签脚本

2.1 基础制作，五分钟上手

咱们不搞复杂的，先从最简单的“Hello World”开始，让你亲眼看到它的效果。打开你的Chrome浏览器，确保书签栏是可见的（快捷键 Ctrl+Shift+B 可以切换显示/隐藏）。

第一步，在书签栏的空白处点击鼠标右键，选择“添加网页...”。这个对话框你可能很熟悉，平时都是用来存网址的，今天我们要玩点不一样的。

第二步，给它起个名字。比如我们就叫它“测试脚本”。关键来了，在“网址”这个输入框里，你不要填 https:// 开头的地址，而是输入以下代码：

javascript:alert('你好，书签脚本世界！');

注意，开头的 javascript: 是协议，告诉浏览器后面是代码。冒号必须是英文的，后面紧跟着你的JS语句。这里我们用了一个最简单的 alert 弹窗来验证执行。

第三步，点击保存。现在，你随便打开一个正常的网页（比如百度首页），然后去点击书签栏里你刚刚创建的“测试脚本”。看到了吗？一个写着“你好，书签脚本世界！”的弹窗跳了出来。这就意味着，你的第一个书签脚本成功运行了！它没有导航到新页面，而是在当前页面执行了代码。

2.2 核心技巧：避免页面跳转的 void(0)

刚才的弹窗脚本没问题，但如果我们想做点实际改变页面的事情，就会遇到一个坑。我试着做一个改变页面背景色的脚本：

javascript:document.body.style.backgroundColor = 'lightblue';

保存并点击后，你可能会发现页面背景确实变蓝了一下，但瞬间就跳转到了一个空白页面，上面显示着“lightblue”这个字符串。这是因为书签脚本默认会把最后一条语句的执行结果当作新页面的内容来加载。这显然不是我们想要的。

解决这个问题的