javascript - 如何修改带有 chrome 扩展的页面上的所有链接？

Question

我正在自学如何编写 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");
   });
});

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

Answer 1

我希望我可以将@charlietfl 给出的答案标记为正确答案。它让我走上了正确的道路。

我的脚本有两个问题:

1. 我用作概念证明的 Google 搜索结果页面使用了相对链接，而不是绝对链接，因此我的替换函数(正确地)没有找到正则表达式模式 /^https:\/\/www\.google\.ca/。 教训:不要期望 Google 提供的“简单”页面具有简单的 HTML。

2. 据我所知，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);
});