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

大家好,我是石小石!


前几天分享了一篇非常简单但实用的文章:只需一行代码,任意网页秒变可编辑

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

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

今天,我们要聊的主角正是它------Bookmarklet(书签小工具)。

什么是书签小工具 Bookmarklet?

Bookmarklet 是一种特殊的浏览器书签,它的"网址"不是链接,而是一段以 javascript: 开头的 JavaScript 代码(后面是一段自执行函数)。

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

注意:

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

如何创建 Bookmarklet?

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

然后,我们修改书签的网址为javascript: + js语句,如

js 复制代码
javascript:(function(){alert('Hello!');})();

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

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

🚀 Bookmarklet 的实用场景

编辑任意网页文字

js 复制代码
javascript:document.body.contentEditable='true';document.designMode='on';void 0;

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

参考此文: 只需一行代码,任意网页秒变可编辑

高亮所有链接

js 复制代码
javascript:[...document.links].forEach(a=>a.style.background='yellow');

给网页加个 CSS 滤镜"滤镜器"

每两秒切换一种滤镜,网页立马成"LOMO 相机"体验!做主题切换非常实用!

js 复制代码
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);
})();

快速滚动到底部

js 复制代码
javascript:window.scrollTo(0,document.body.scrollHeight);

鼠标悬停元素高亮边框

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

js 复制代码
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的使用,就可以结合它开发出意向不到的优秀小工具!欢迎评论区分享!

相关推荐
乌兰麦朵10 分钟前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai10 分钟前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
Code季风10 分钟前
Gin Web 层集成 Viper 配置文件和 Zap 日志文件指南(下)
前端·微服务·架构·go·gin
蓝倾10 分钟前
如何使用API接口实现淘宝商品上下架监控?
前端·后端·api
舂春儿12 分钟前
如何快速统计项目代码行数
前端·后端
毛茸茸12 分钟前
⚡ 从浏览器到编辑器只需1秒,这个React定位工具改变了我的开发方式
前端
Pedantic13 分钟前
我们什么时候应该使用协议继承?——Swift 协议继承的应用与思
前端·后端
Software攻城狮14 分钟前
vite打包的简单配置
前端
Codebee14 分钟前
如何利用OneCode注解驱动,快速训练一个私有的AI代码助手
前端·后端·面试
流星稍逝14 分钟前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js