如何在任意网页上运行 JavaScript —— 新手指南
有时一个网站差不多对了 —— 你只是希望它能多做一件事。解决办法往往是几行 JavaScript。这份新手指南将向你展示如何在任意网页上运行 JavaScript,从在控制台里的一次性快速操作,到每次访问都自动运行的规则,沿途附有真实示例。
在做任何事之前的一个快速安全提示
你在页面上运行的 JavaScript 拥有与页面本身相同的权力 —— 它可以读取内容、点击元素并发送请求。所以规则很简单,且不容商量:只运行你理解的代码。绝不要把来自陌生人、评论区或某个「这样做有妙招」视频里的脚本粘贴进控制台 —— 那正是账户盗窃骗局的运作方式。下面的每个示例都短到足以让你完整地阅读和理解。
方法 1 —— DevTools 控制台(一次性)
每个浏览器都自带一个 JavaScript 控制台。按 F12 并打开 Console 标签页。键入一个表达式,按回车,它就会立即针对当前页面运行:
// Count every link on the page
document.querySelectorAll('a').length控制台非常适合做实验和快速检查。它的局限是:什么都不会留存。重新加载页面,你的代码就没了 —— 你每一次都得重新粘贴它。
方法 2 —— 书签小工具(已保存,但需手动)
书签小工具是一个浏览器书签,它的 URL 是 JavaScript 而不是一个地址。点击该书签,代码就会在当前页面上运行。它看起来是这样的:
javascript:(function(){
document.body.style.fontFamily = 'Georgia, serif';
})();书签小工具确实有用,而且它们在会话之间会留存。但它们有实在的局限:
- 它们只在你手动点击时运行 —— 绝不会自动运行。
- 所有内容都必须塞进一个 URL 里,所以较长的脚本很快就会变得难以阅读。
- 某些网站上严格的内容安全策略可能会拦截它们。
方法 3 —— 持久化的规则(自动)
要让 JavaScript 在你每次打开匹配页面时自动运行,你需要一个能为你注入它的扩展。JustZix 通过规则来做到这一点:一个 URL 模式加上要运行的代码。它免费,在 Chrome(以及 Edge、Brave、Opera、Vivaldi)中工作,并且不需要账户。
演示 —— 一条运行你的 JS 的规则
- 从下载页面安装 JustZix。
- 打开你想增强的页面。
- 点击 JustZix 图标并选择新建规则。
- 设置一个 URL 模式,例如
https://example.com/*。 - 打开 JS 面板并粘贴你的脚本。
- 保存。脚本现在会在每一次匹配页面加载时运行。
在你构建脚本时,标签页内的 JS Console REPL 让你能针对实时页面测试表达式,而六标签的 Output Console 会显示日志、网络活动和 DataLayer 事件 —— 这样你就不需要同时打开 DevTools。更多内容见功能页面。
示例 1 —— 清理一个嘈杂的页面
移除那些跟着你往下滚动的吸附元素:
// Remove sticky headers and floating widgets
document.querySelectorAll('*').forEach(el => {
const pos = getComputedStyle(el).position;
if (pos === 'fixed' || pos === 'sticky') {
el.style.position = 'static';
}
});示例 2 —— 自动点击一个按钮
有些网站把内容藏在一个「显示更多」按钮后面。为你自己自动点击它:
// Click the first "Show more" button on load
const btn = [...document.querySelectorAll('button')]
.find(b => /show more|read more/i.test(b.textContent));
if (btn) btn.click();示例 3 —— 等待延迟加载的内容
现代网站会在初始加载之后添加内容。MutationObserver 让你的代码能在你想要的元素终于出现时做出反应:
// Run once the target element shows up
const observer = new MutationObserver(() => {
const target = document.querySelector('.comments-section');
if (target) {
target.scrollIntoView();
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });这个模式正是「有时能用」的脚本与「可靠工作」的脚本之间的区别 —— 页面脚本中大多数的时序错误都源于在元素存在之前就运行了代码。
选择正确的方法
| 方法 | 是否留存? | 是否自动? | 最适合 |
|---|---|---|---|
| DevTools 控制台 | 否 | 否 | 一次性实验 |
| 书签小工具 | 是 | 否(需点击) | 偶尔的手动操作 |
| JustZix 规则 | 是 | 是 | 你希望每次访问都生效的更改 |
当某些东西不工作时的调试
- 检查时序。如果元素还不在那里,就像上面那样把你的代码包进一个
MutationObserver里。 - 阅读控制台。错误信息会直接指向失败的那一行。
- 小步测试。在保存整个脚本之前,先在 REPL 中运行片段。
- 严格限定范围。一个精确的 URL 模式能让脚本远离它会破坏的页面。
另请参阅
想让你的 JavaScript 每次访问都自动运行,而不必每次都粘贴它?JustZix 是免费的 —— 从下载页面安装它,把你的代码片段变成一条规则。
为这篇文章评分
暂无评分 — 成为第一个。