Chrome浏览器隐藏技巧：5分钟学会把JS脚本变成可点击书签（附防跳转代码）

最新推荐文章于 2026-07-31 14:15:03 发布

原创

最新推荐文章于 2026-07-31 14:15:03 发布 · 242 阅读

Chrome浏览器隐藏技巧：5分钟学会把JS脚本变成可点击书签（附防跳转代码）

不知道你有没有过这样的时刻：面对一个排版混乱、广告横飞的网页，恨不得自己动手给它“动个小手术”；或者每天重复登录某个内部系统，填写一堆固定信息，手指都点麻了。作为一名长期与浏览器打交道的开发者或效率追求者，我发现自己越来越依赖一种“轻量级自动化”的能力——将常用的JavaScript脚本，变成浏览器书签栏上一个即点即用的按钮。这听起来可能有些“极客”，但它的门槛远比想象中低，带来的效率提升却是实打实的。今天，我们就来深入聊聊这个被许多人忽略的浏览器原生“超能力”，它不仅能让你的Chrome变得更聪明，更能将一些繁琐的网页操作简化到一次点击。

1. 书签栏里的“瑞士军刀”：重新认识JavaScript书签

很多人对浏览器书签的理解，还停留在“收藏网页链接”的层面。实际上，书签的“网址”栏，是一个可以执行代码的入口。当你将一个以 javascript: 开头的字符串保存为书签时，你就在收藏夹里埋下了一颗随时可以引爆的“代码炸弹”——点击它，浏览器就会在当前页面上下文中执行这段代码。

这究竟能做什么？想象空间非常大。对于前端开发者，它可以是一个快速的调试工具，比如一键高亮所有图片边框，或者计算页面DOM节点总数。对于日常办公，它可以自动填充那些永远不变的表单字段，或者快速提取页面上的所有电子邮件地址。对于内容消费者，它可以一键去除页面上的干扰元素，让阅读回归纯净。这本质上是一种无侵入、免安装的轻量级浏览器扩展，它不依赖任何第三方插件，不受扩展商店政策变动的影响，完全由你掌控。

它的工作原理并不复杂。当你点击这样一个特殊书签时，浏览器会将其href属性（即那段javascript:代码）当作一个特殊的协议来处理。协议处理器会剥离javascript:前缀，将剩余部分作为JavaScript代码，在当前激活页面的上下文中进行求值（eval）执行。这意味着，你的代码可以完全访问页面的DOM、window对象以及所有全局变量，就像在开发者工具的控制台里直接输入代码一样。

注意：由于安全限制，这类书签脚本通常无法在浏览器的特殊页面（如chrome://开头的设置页、新标签页、扩展程序管理页面）上运行，因为这些页面的上下文环境与普通网页不同，限制了脚本执行。

2. 从零开始：创建你的第一个可执行书签

让我们抛开理论，直接动手。创建过程简单到令人惊讶，其核心步骤可以浓缩为以下几步：

打开书签管理器：在Chrome中，你可以通过点击右上角的三个点 -> “书签” -> “书签管理器”，或者更直接地，使用快捷键 Ctrl+Shift+O (Windows/Linux) 或 Cmd+Shift+O (Mac)。
添加新书签：在书签管理器中，右键点击“书签栏”文件夹（或其他你喜欢的文件夹），选择“添加新书签”。
填写关键信息：这时会弹出一个对话框。你需要填写两个核心字段：
- 名称：为你这个工具起个易懂的名字，比如“深色模式阅读”。
- 网址：这是最关键的一步。在这里，你必须以 javascript: 开头（大小写不敏感），然后紧跟你要执行的代码。

我们来创建一个最经典的“Hello World”示例。在“网址”栏输入以下内容：

javascript:alert('你的第一个JS书签已成功运行！');

保存后，随意打开一个普通网页（比如新闻网站），然后点击书签栏上这个新添加的书签。你应该会立刻看到一个弹窗提示。恭喜，你的第一个可执行书签已经生效了！

当然，alert弹窗只是个开始，实用性有限。让我们立刻升级，创建一个真正有用的工具：页面高对比度阅读模式。这个脚本会反转页面的背景色和文字颜色，并提高对比度，适合在强光下或长时间阅读时使用。

javascript:(function(){
    var style = document.createElement('style');
    style.innerHTML = `
        html, body, div, p, span, a, li, td {
            background-color: #000 !important;
            color: #fff !important;
            border-color: #555 !important;
        }
        img, video, iframe {
            filter: invert(1) hue-rotate(180deg) !important;
        }
    `;
    document.head.appendChild(style);
    alert('高对比度阅读模式已开启！');
})();

将这段更长的代码复制到书签的“网址”栏并保存。现在，点击它，整个页面的色调都会改变，文字变得清晰易读。再

标签