如何修改网页脚本让按钮跳转指定页面实现Chrome中打开特定标签

架构老林

2026-9-28

自定义网页按钮跳转实现方案

临时修改（单次生效，刷新后失效）

完全可以通过Chrome自带的审查元素（DevTools）功能实现，操作步骤如下：

右键点击你需要修改的页面按钮，选择「检查」，DevTools的Elements面板会自动定位到该按钮对应的DOM节点
右键选中的DOM节点，选择「存储为全局变量」，控制台会自动生成类似temp1的变量名
切换到Console面板，输入对应代码并回车执行即可：

// 将temp1替换为你刚才生成的变量名，目标URL替换为你要跳转的地址
temp1.addEventListener('click', () => {
  // 同标签页跳转使用下方代码
  window.location.href = '你的目标URL';
  // 如果需要新标签页打开，注释上面一行，使用下方代码即可
  // window.open('你的目标URL', '_blank');
}, true);

该方法的修改仅对当前页面会话有效，刷新、关闭重开页面后会自动恢复原有逻辑。

持久化修改（每次打开页面自动生效）

如果需要长期保留自定义跳转逻辑，可以使用Chrome的用户脚本扩展实现：

安装用户脚本管理扩展后新建自定义脚本，填入如下模板代码：

// ==UserScript==
// @name         自定义按钮跳转规则
// @match        你的目标页面URL，支持通配符匹配，如https://test.com/*
// @grant        none
// ==/UserScript==

window.addEventListener('DOMContentLoaded', () => {
  // 替换为目标按钮的CSS选择器，比如ID为loginBtn则填#loginBtn
  const targetBtn = document.querySelector('目标按钮的CSS选择器');
  if (!targetBtn) return;
  targetBtn.addEventListener('click', (e) => {
    // 阻止按钮原有默认行为
    e.stopImmediatePropagation();
    e.preventDefault();
    // 替换为你的目标跳转地址
    window.location.href = '你的目标URL';
  }, true);
});