1

尽管我在 JS 方面有相当多的经验，但我只是想制作一个快速的 Chrome 扩展供个人使用。本质上，我正在寻找的只是拉出所有符合特定模式的网址 - 例如，test.example.com/abcdefg并将它们更改为test.newexample.com/abcdefg. 这样，当页面加载时，我可以单击 URL 并被发送到新页面而无需任何重定向。然而，问题是某些页面内容是动态加载的，这意味着您可以加载更多所述 URL 的条目而无需实际重新加载页面，并且您也遇到了无法转换这些内容的问题。

因为我以前从未这样做过，所以我的 manifest.json 并没有比我更进一步：

{
  "name": "Test",
  "version": "1.0",
  "description": "Test",
}

我还编写了一些我过去用于 Firefox 插件的基本代码，但问题实际上是在我的 chrome 插件中实现并执行它。

self.port.on("getElements", function(tag) {
  var links = document.getElementsByTagName(tag);
  for (var i = 0; i < links.length; i++) {
    if (links[i].href.indexOf("currentpage.com") == -1) {
        links[i].href = links[i].href.replace("example.com","brandnewexample.com");
    }
  }
});

所以，我想我的问题是如何将上面的代码或类似的东西绑定到插件中，以便真正让我的代码执行？我现在的障碍是尽可能地测试和利用它——在那之后，故障排除和调整应该不是太大的问题。

4

1 回答 1

1

好的，这很简单，您只需要一个内容脚本，并且如果您在项目中包含 jquery。像这样的事情会做到这一点。

您将需要创建一个这样的文件夹结构：

------------------
-- + - Extension
   |----- manifest.json
   |----- jquery.js (optional as per the solution)
   |----- contentScript.js (important)

进入 chrome 的开发者模式（google that）并将扩展加载为解包。

manifest.json 看起来像：

{
        "name"                  : "",
        "version"               : "",
        "manifest_version"      : 2,
        "description"           : "",
        "content_scripts"       :
                [{
                        "matches"       : 
                        [
                                "*://*"
                        ],
                        "js"            :
                        [
                                "jquery.js",
                                "contentScript.js"
                        ],
                        "all_frames"    : true
                }],
        "permissions"           :
                [
                        "*://*"
                ]
}

contentScript.js 看起来像这样

$(document).ready(function(){
  $('a').each(function(){
    if($(this).attr('href').indexOf("example.com") != -1){
      $(this).attr('href') = $(this).attr('href').replace("example.com","brandnewexample.com");
    }
  });
});

或者您也可以使用它，以防链接不是完全限定的域（阅读更多）。

$(document).ready(function(){
  $('a').each(function(){
    if(this.href.indexOf("example.com") != -1){
      this.href = this.href.replace("example.com","brandnewexample.com");
    }
  });
});

从理论上讲，您可以完全避免使用 jquery 并使用旧代码。我不确定这是否有效，但您可以尝试。您可以从 manifest.json 中删除 jquery 并将 contentScript 替换为：

document.onreadystatechange = function() {
  if (document.readyState === 'complete') {
    // DOM should be ready!
    var links = document.getElementsByTagName(tag);
    for (var i = 0; i < links.length; i++) {
      if (links[i].href.indexOf("example.com") != -1) {
          links[i].href = links[i].href.replace("example.com","brandnewexample.com");
      }
    }
  }
};

如果您需要在每次将内容添加到页面时触发此功能，您只需在 contentScript.js 中执行此操作（阅读更多）：

$(document).bind('DOMSubtreeModified', processLinks);
$(document).ready(processLinks);
function processLinks(){
  $('a').each(function(){
    if(this.href.indexOf("example.com") != -1){
      this.href = this.href.replace("example.com","brandnewexample.com");
    }
  });
});

如果您需要显示图标或其他东西等花哨的东西，请寻找添加的权限。但基本上 contentScript.js 中的任何 JS 在服务时都会像页面的一部分一样被执行。

于 2013-10-09T18:45:42.543 回答