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

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

大家好，我是石小石！

前几天分享了一篇非常简单但实用的文章：只需一行代码，任意网页秒变可编辑^[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);
})();

总结

通过这篇文章，相信已经对 Bookmarklet 有所了解。它是一种将 JavaScript 脚本变成浏览器书签的技巧，只需点击书签即可在当前网页执行代码，无需插件、无需刷新。只有你懂 js 的使用，就可以结合它开发出意向不到的优秀小工具！欢迎评论区分享！