如何使用 chrome 扩展修改页面上的所有链接？答案

【问题标题】：How to modify all links on page with chrome extension?如何使用 chrome 扩展修改页面上的所有链接？
【发布时间】：2015-01-19 21:34:44
【问题描述】：

我正在自学如何编写 Chrome 扩展程序，但我什至无法启动和运行基本功能。

我正在尝试编写一个扩展来修改给定页面上的所有链接。作为概念证明，我正在尝试修复它，以便google.ca 结果页面上的所有链接都指向www.gooogle.cn

这是我的manifest.json：

"name": "Google Link Fixer",
  "version": "0.1",
  "permissions": ["*://www.google.*/*"],

  "content_scripts": [
    {
      "matches": ["*://www.google.*/*"],
      "js": ["jquery.js", "content_script.js"]
    }
  ],
  "manifest_version": 2
}

这是content_script.js 中的javascript（注意jquery.js 在同一目录中）：

$(document).ready(function(){
$("a[href^='https://www.google.ca']")
   .each(function()
   { 
      this.href = this.href.replace(/^https:\/\/www\.google\.ca/, 
         "https://www.google.cn");
   });
});

然后……什么都没有。我可以在开发人员工具中看到正在加载扩展，并且代码在内容脚本下，但我没有看到预期的结果。任何帮助表示赞赏。

【问题讨论】：

尝试更改委托点击处理程序中的 href。也许链接是ajax加载的？
1) 您不需要对内容脚本使用“权限”。 2）“://www.google.*/”不是一个有效的主机方案（*只能在主机的开头）3）它对我有用4）你真的需要吗如果您可以在 piure JS 中像在 jQuery 中一样简单地做同样的事情，请加载 jQuery？
@charlietfl 想说的是：$(document).ready 可能太早无法执行您的代码，因为链接是动态创建的。
@charlietfl — 使用委托点击处理程序的建议对我很有帮助。请参阅下面的答案。

标签： javascript jquery google-chrome google-chrome-extension

【解决方案1】：

我希望我能将@charlietfl 给出的答案标记为正确答案。它让我走上了正轨。

我的脚本有两个问题：

我用作概念证明的 Google 搜索结果页面使用了相对链接，而不是绝对链接，因此我的替换功能（正确地）找不到正则表达式模式 /^https:\/\/www\.google\.ca/。 教训：不要期望 Google 提供的“简单”页面具有简单的 HTML。
据我所知，Google 至少动态创建了一些链接——这种模式在其他网站上也很常见。我在专用的点击处理程序中重写了脚本，这就是让我走上正轨的原因。课程：仔细考虑您要完成的工作。我并没有尝试更改页面上的所有链接；我想重定向某些链接指向的位置。在链接点击级别上进行某种行为修改比在所有页面级别上更有效且更容易完成。

我使用的代码是：

$(document).on("click", "a", function(){
    var link_target = $(this).attr('href');
    var converted_url = link_target.replace(/SOME_REGEX/, REPLACEMENT_TEXT);
    $(this).attr('href', converted_url);
});

【讨论】：