如何使用Javascript替换网页指定链接（Chrome扩展开发场景）

根据你的需求场景选择即可：

• 仅需要修改链接跳转目标，保留原有链接的文本、样式、页面绑定的事件监听，优先选择类似rewritePage2的修改href属性方案，副作用最小，不会破坏原页面的交互逻辑
• 需要完全替换链接的显示内容、样式，且不需要保留原元素绑定的事件，可以选择rewritePage1的替换outerHTML方案

• XSS风险规避：不要直接拼接用户输入内容到CSS选择器、innerHTML/outerHTML赋值语句中，特殊字符需要提前转义，避免被注入恶意代码
• 选择器精度优化：[href*=xxx]是全字段模糊匹配，容易误改不相关链接，可根据需求切换匹配规则：精确匹配用[href="xxx"]，前缀匹配（同域名下所有链接）用[href^="xxx"]
• 避免破坏原页面逻辑：outerHTML替换会清空原链接上绑定的所有事件，也会破坏React/Vue等框架的虚拟DOM映射，导致页面后续交互异常，非必要场景不要替换整个元素
• 规则可配置化：不要硬写匹配/替换规则到逻辑代码中，抽离为独立的配置数组，后续新增规则无需修改核心逻辑
• 动态内容适配：当前代码仅在点击扩展图标时执行一次，单页应用路由切换、滚动加载新增的链接无法被识别，可新增MutationObserver监听DOM变化，自动处理新增的链接元素
• 去重处理：给已处理过的链接添加自定义标记属性（如data-ozwizard-processed="true"），下次执行时直接跳过已处理元素，避免重复操作
• 最小权限原则：当前manifest中声明的clipboardRead、clipboardWrite权限如果没有实际使用可以直接删除，降低用户授权顾虑
• 修复rewritePage2的逻辑问题：原代码只定义了replaceText函数没有调用，执行时不会生效，需要在rewritePage2末尾添加replaceText(matcher, newText)触发执行

轻量版（仅修改href，推荐90%场景使用） #

// 替换规则配置，新增规则直接添加数组元素即可
const LINK_REPLACE_RULES = [
  {
    match: 'https://yahoo.com',
    target: 'https://google.com',
    matchType: 'exact' // 可选值：exact精确匹配 / prefix前缀匹配 / fuzzy模糊匹配
  },
  {
    match: 'https://bing.com',
    target: 'https://yahoo.com',
    matchType: 'exact'
  }
]

function rewritePage() {
  // 生成过滤已处理元素的选择器
  const selectors = LINK_REPLACE_RULES.map(rule => {
    switch(rule.matchType) {
      case 'exact': return `a[href="${rule.match}"]:not([data-ozwizard-processed])`
      case 'prefix': return `a[href^="${rule.match}"]:not([data-ozwizard-processed])`
      case 'fuzzy': return `a[href*="${rule.match}"]:not([data-ozwizard-processed])`
      default: return ''
    }
  }).filter(Boolean).join(',')

  const matchedLinks = document.querySelectorAll(selectors)
  matchedLinks.forEach(link => {
    const rule = LINK_REPLACE_RULES.find(item => {
      if (item.matchType === 'exact') return link.href === item.match
      if (item.matchType === 'prefix') return link.href.startsWith(item.match)
      return link.href.includes(item.match)
    })
    if (rule) {
      link.setAttribute('href', rule.target)
      link.setAttribute('data-ozwizard-processed', 'true')
      // 需要修改文本/样式可放开下面注释
      // link.textContent = '替换后显示文本'
      // link.style.color = 'red'
    }
  })
}

// 监听动态加载的DOM内容，自动处理新出现的链接
function observeDynamicContent() {
  const observer = new MutationObserver(mutations => {
    if (mutations.some(item => item.addedNodes.length)) {
      rewritePage()
    }
  })
  observer.observe(document.body, {
    childList: true,
    subtree: true
  })
}

// 执行逻辑
rewritePage()
observeDynamicContent()

优化后manifest配置 #

{
  "name": "OzWizard3",
  "action": {},
  "manifest_version": 3,
  "version": "0.1",
  "description": "demo to replace specific urls on a webpage.",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "ozwizard3.js"
  }
}

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