Bookmarklet - 你浏览器里的的瑞士军刀

最近了解到一种新的浏览器小工具，可以让你在浏览器里异常方便地实现一些实用的功能。

具体使用起来非常简单：只需点击一个书签，就能自动执行很多脚本，例如提取当前网页的视频链接并下载内容、修改页面样式，获取图片链接？听起来像浏览器插件，但其实——你只需要一个书签。

这个“魔法”工具就是：Chrome Bookmarklet（书签小工具）。

什么是 Bookmarklet？

Bookmarklet 是一种特殊的书签，它的 URL 不是普通的网页地址（如 https://example.com），而是以 javascript:伪协议开头的 JavaScript 代码。当你在浏览器中点击这个书签时，JavaScript 就会在当前页面的上下文中执行。

✍试一试

在浏览器中右键书签栏，选择“添加网页”，名称输入你自定义的名称，网址输入javascript: alert('Hello from bookmark!')，保存，点击它。你就能看到和在console里执行一样的效果了

然而他的功能远比想象的强大

原理与背景

Bookmarklet 的本质是让浏览器把书签内的URI作为JavaScript解析，并在当前页面上下文中执行（相当于在开发者控制台中输入并运行代码）。

强大之处

• 零依赖：无需安装扩展，兼容所有主流浏览器（Chrome、Edge、Firefox 等）
• 即时生效：代码直接作用于当前 DOM 和 JS 环境
• 跨页面通用：只要页面支持 JS，就能运行
• 隐私友好：代码本地执行，无需上传数据（除非你主动发请求）

虽然现代浏览器对 javascript: URI 做了一些安全限制（如某些页面禁用或需要用户触发），但只要用户主动点击，它依然非常有用。

💡提示

在Chrome等现代浏览器中，你甚至可以直接拖拽一个 javascript: 链接到书签栏，或手动创建一个书签并修改 URL 为 JS 代码。

---

实用场景示例

我自己搭建了一个NAS，内网穿透后可以通过一个公网的IP调用家里NAS上的yt-dlp（通过这个Docker应用）进行视频下载到NAS上。这个bookmarklet就适用于在YouTube、B 站、微博视频等页面，自动提取当前 URL 并下载视频到你的 NAS 上

javascript:(async()=>{
  try{
    const body = { url: location.href, params: "-N" };
    const res = await fetch("https://your.yt-dlp-url.com/api/v1/exec", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body)
    });
    if(res.ok || res.status === 500){
      alert("✅ Submitted");
    } else {
      alert("❌ HTTP " + res.status);
    }
  }catch(e){
    alert("❌ Error: " + e);
  }
})();

经测试通过bookmarklet调用会报HTTP 500错误，但是实际任务已经成功提交了，故在代码中做了硬编码处理。

你只需替换 your.yt-dlp-url.com，就能实现一键离线下载，解放双手！

---

以下是几个其他的几个通用的，我日常使用的高频场景。你只需创建一个书签，填入对应的 javascript: 代码即可。

1. 一键获取当前网站的 favicon 链接

有些网站 favicon 藏得深，手动找费时费力。这个 bookmarklet 帮你自动提取。（代码已做压缩处理）

javascript:!function(){try{let t=(Array.from(document.querySelectorAll('link[rel~="icon"],link[rel="shortcut icon"]')).find(t=>t.href&&t.href.trim())||{}).href||"";if(!t){let e=document.querySelector('meta[property="og:image"],meta[itemprop="image"]');e&&(e.content||e.getAttribute("content"))&&(t=e.content||e.getAttribute("content"))}t||(t="/favicon.ico"),t=function t(e){try{return new URL(e,location.href).href}catch(r){return e}}(t),prompt("",t)}catch(r){console.error(r),alert("无法获取图标")}}();

点击后即可弹出 favicon 地址，方便复制保存或分析。

---

2. 临时修改全局字体

这个 bookmarklet 可以一键把页面字体切换为你喜欢的字体（使用远程字体的URL）。

javascript: (function () { try { var u = prompt('Enter font URL', 'https://static.zly.vg/fonts/geist.ttf'); if (!u) return; var old = document.querySelector('style[data-injected-font]'); if (old) old.remove(); var fontName = 'InjectedFont_' + Date.now(); var css = '@font-face{font-family:\"' + fontName + '\";src:url(\"' + u + '\");font-display:swap;} *:not(svg):not(canvas){font-family:\"' + fontName + '\",system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial !important;} input,textarea,select,button{font-family:\"' + fontName + '\",inherit !important;}'; var s = document.createElement('style'); s.setAttribute('data-injected-font', 'true'); s.textContent = css; (document.head || document.documentElement).appendChild(s); console.log('OK'); } catch (e) { alert('Error：' + e); } })();

触发后会 prompt 你的字体URL，我提供了一个默认的URL，禁止用于非法用途！

⚠️注意

注意字体URL的CORS

---

注意

• 代码中不能有换行或空格过多。建议压缩为一行，或用在线工具（如 Bookmarklet Crunchinator）优化。
• 只运行你信任的代码，避免恶意脚本窃取数据
• 某些网站会禁用 javascript: 执行（如 CSP 限制），但多数普通页面均可运行

现在就创建一个书签，让他成为你浏览世界的瑞士军刀。

标签：无