主页/WEB笔记/书签小程序还能这么玩，从页面收藏到功能扩展的进阶指南

书签小程序还能这么玩，从页面收藏到功能扩展的进阶指南

2,588字
11–16 分钟
in

书签小程序（Bookmarklet）本质上是一段JavaScript代码，被当作书签保存在浏览器里。点击它，就能在任意网页上运行这段代码，实现各种自定义功能。无论是调试样式、提取内容还是自动化操作，一个书签小程序就能搞定。本文会带大家亲手创建一个基础版书签小程序，再进阶到用CSS样式表给网页“换肤”，全程避开那些容易被忽视的坑，让每个操作步骤都清晰到可以直接上手。

目录

书签小程序是啥玩意

书签小程序就是把一坨JavaScript脚本塞进书签里。浏览器地址栏输入“javascript:”加上脚本内容，敲回车就能跑起来。跟普通书签的区别在于，普通书签存的是网址，点开跳转页面；书签小程序存的是代码，点开在当前页面执行命令。这货从90年代末就有了，那时候的网站bookmarklets.com现在还活着，上面好多脚本虽然二十多年没更新，照样能用。

搞一个弹窗脚本

写原始代码

打开浏览器开发者工具的控制台面板，敲一行alert("Hello， World！")；，回车就能看到弹窗。这段代码就是书签小程序的核心内容。

套上立即执行函数

把代码包进箭头函数并立刻执行，能避免跟页面原有脚本打架。改写后的样子：

(() => {
  alert("Hello， World！");
})()；

这样点书签时，函数会立刻跑起来，不会污染全局变量，页面上的其他脚本也不会受干扰。

做URL编码

脚本里包含花括号、括号、分号这些特殊字符，直接塞进书签容易翻车。需要用encodeURIComponent()转一下，把特殊字符替换成浏览器能认的编码格式。弹窗脚本编码后的结果：
(()%3D%3E%7Balert(%22Hello%2C%20World！%22)%3B%7D)()%3B

加上javascript：前缀

书签的地址栏不能直接放代码，得在前面补javascript:。完整版书签地址：
javascript:(()%3D%3E%7Balert(%22Hello%2C%20World！%22)%3B%7D)()%3B

塞进浏览器书签栏

不同浏览器的操作路子不太一样，但核心思路都一样：先随便存个普通书签，再把地址替换成刚才那串带javascript:前缀的代码。

  • Safari：随便找个网页点地址栏左侧的“分享”按钮，选“添加书签”，位置选书签栏。保存后右键点这个书签选“编辑”，地址栏里粘贴javascript:(()%3D%3E%7Balert(%22Hello%2C%20World！%22)%3B%7D)()%3B，名称改成“弹窗测试”。
  • Firefox：在书签工具栏空白处点右键，选“添加书签”。名称写“弹窗测试”，位置选书签工具栏，地址栏粘贴上面的代码。
  • Chrome：右键书签工具栏空白处，选“添加网页”。名称填“弹窗测试”，网址粘贴上面的代码。

拿CSS样式给网页动手术

光弹窗不过瘾，书签小程序还能直接改页面样式。比如想把页面背景变黑、文字变紫罗兰色，有两种路子。

动态插入style标签

这种方法最直接，先创建<style>元素，往里面塞CSS规则，再追加到<head>里。代码长这样：

javascript：( () => {
  var style = document.createElement(“style”)；
  style.innerHTML = “body{background：#000；color：rebeccapurple}”；
  document.head.appendChild(style)；
})()；

这招简单粗暴，但每次改样式都得重新建整个<style>标签，没法单独增删某条规则。

用CSSStyleSheet接口玩更花

现代浏览器提供了CSSStyleSheet对象，可以直接操作样式表。先新建一个空样式表，塞进页面的adoptedStyleSheets数组里，再用insertRule往里加规则。代码演示：

javascript：( () => {
  const sheet = new CSSStyleSheet()；
  document.adoptedStyleSheets = [。..document.adoptedStyleSheets， sheet]；
  sheet.insertRule(“body { border： 5px solid rebeccapurple ！important； }”， 0)；
  sheet.insertRule(“img { filter： contrast(10)； }”， 1)；
})()；

这种方法能精细控制每一条规则，随时可以修改、删除、调整顺序。浏览器还会自动校验CSS语法，写错了会报错而不是静默失效。

踩坑与避坑

做书签小程序最头疼的是碰上网站开了内容安全策略。有些银行、支付类网站会限制外部脚本运行，这时候书签小程序的跨域请求会被直接拦掉。遇到这种情况，打开浏览器开发者工具的控制台看看报错，如果有Content Security Policy字样，说明被策略挡住了。解决办法是把所有代码都写进书签里，别依赖外部加载的资源。

书签地址的长度也有限制，不同浏览器差别很大。Firefox和Safari的上限在65536字节左右，Chrome能扛到接近千万字符。如果脚本太长超过限制，可以用外部脚本加载的方式曲线救国：

javascript：( () => {
  var script=document.createElement('script')；
  script.src='https：//example.com/bookmarklet-script.js'；
  document.body.appendChild(script)；
})()；

不过外链脚本容易被CSP策略拦截，得看目标网站的具体限制。

几种玩法分享

扒拉一些网上好用的书签小程序，抄作业前得留个心眼。从地址栏直接粘贴带javascript:的代码，浏览器会主动把前缀删掉防止误操作。靠谱的获取方式是找那些提供拖拽链接的站点，直接拖进书签栏最稳妥。

社区里有些经典收藏，比如Adrian Roselli整理了一堆专门用来测试CSS的书签小程序，点一下就能给页面加上高亮边框、显示元素轮廓、切换颜色模式。Stuart Robson收集的开发调试工具也实用，一键就能列出页面所有字体、显示图片尺寸、计算元素层级关系。Ian Lloyd那批无障碍测试脚本能快速标记出缺少alt属性的图片、对比度不足的文字区域。

最新发布