如何用Greasemonkey/Tampermonkey将div替换为a标签实现右键开新标签页

核心实现代码 #

你需要的核心逻辑可以简化为以下实现，直接放到Tampermonkey脚本中即可生效：

// 匹配所有带onclick跳转属性的div元素
document.querySelectorAll('div[onclick*="window.location.href"]').forEach(div => {
  // 提取跳转路径，自动拼接域名生成完整链接后替换div为a标签
  div.replaceWith(Object.assign(document.createElement('a'), {
    href: new URL(div.getAttribute('onclick').match(/window\.location\.href\s*=\s*['"](.*?)['"]/)[1], location.origin).href,
    innerHTML: div.innerHTML,
    style: div.getAttribute('style')
  }))
})

脚本头部记得添加匹配规则，指定仅在目标站点生效：

// @match https://www.usa.canon.com/*

Tampermonkey快速入门要点 #

• 脚本头部用@match字段定义生效站点，*为通配符可匹配任意字符
• 脚本默认在页面DOM加载完成后运行，无需额外监听加载事件
• 使用document.querySelectorAll可匹配所有符合规则的页面元素，支持CSS选择器语法
• 元素替换可直接调用replaceWith方法，创建新DOM元素时可用Object.assign一次性批量赋值属性
• 相对路径转绝对路径直接用new URL(相对路径, 当前站点域名)方法即可自动完成拼接，无需手动处理字符串

内容的提问来源于stack exchange，提问作者Chris Lawrence