惊呆！Js保存成书签居然可以解锁这么多有趣玩法，快收藏

原创石小石Orz 2025-05-24 08:30 重庆

点击关注公众号，“技术干货” 及时达！

大家好，我是石小石！

前几天分享了一篇非常简单但实用的文章：只需一行代码，任意网页秒变可编辑^[1]。

在评论区发现一些超级实用有趣的小技巧。

或许在多数人眼中，浏览器的书签不过是用来收藏网址的简单工具，但事实上，它还能摇身一变，成为你的 “脚本工具箱”，让你随时随地在任何网页上施展 JavaScript 的 “魔法技能”。

今天，我们要聊的主角正是它——Bookmarklet（书签小工具）。

什么是书签小工具 Bookmarklet？

「Bookmarklet」 是一种特殊的浏览器书签，它的 “网址” 不是链接，而是一段以

javascript:

开头的 JavaScript 代码（后面是一段自执行函数）。

点击后，脚本将在当前网页上立即执行，「无需插件、无需刷新、即点即用！」

❝
注意：
Chrome 限制粘贴
javascript:
到地址栏运行，因此需要直接保存为书签。
Bookmarklet 的代码长度建议控制在 2000 字以内，太长可压缩或托管到 CDN。
有些网页有 CSP（内容安全策略）会阻止脚本运行，这是浏览器安全机制导致的。
❞

如何创建 Bookmarklet？

以谷歌浏览器为例，我们先将任意一个网页保存为书签

然后，我们修改书签的网址为

javascript:

+ js 语句，如

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

现在，我们在任意网页点击这个书签，就可以在当前网页执行这个脚本了。

注：如果需要再操作栏快捷访问书签，按照下图步骤操作

🚀 Bookmarklet 的实用场景

编辑任意网页文字

javascript:document.body.contentEditable='true';document.designMode='on';void 0;

点一下就能直接修改网页上的文字，在需要修改网页上的数据、解除文件复制时，非常实用。

「参考此文：」**只需一行代码，任意网页秒变可编辑**^[2]「。」

高亮所有链接

javascript:[...document.links].forEach(a=>a.style.background='yellow');

给网页加个 CSS 滤镜 “滤镜器”

每两秒切换一种滤镜，网页立马成 “LOMO 相机” 体验！做主题切换非常实用！

javascript:(function(){  const filters = ['none', 'grayscale(1)', 'sepia(1)', 'invert(1)', 'blur(5px)', 'contrast(200%)'];  let i = 0;  setInterval(() => {    document.body.style.filter = filters[i % filters.length];    i++;  }, 2000);})();

快速滚动到底部

javascript:window.scrollTo(0,document.body.scrollHeight);

鼠标悬停元素高亮边框

当鼠标

hover

到页面上任意元素时，给它显示一个清晰的高亮边框，可以用于前端代码调试

javascript:(function(){  const style = document.createElement('style');  style.id = 'hover-highlighter';  style.innerHTML = `    *:hover {      outline: 2px solid rgba(0, 123, 255, 0.9) !important;      cursor: crosshair !important;    }  `;  document.head.appendChild(style);})();