Google chrome extension 平凡的Chrome pageAction扩展不工作_Google Chrome Extension_Browser Extension

Google chrome extension 平凡的Chrome pageAction扩展不工作

google-chrome-extension

Google chrome extension 平凡的Chrome pageAction扩展不工作,google-chrome-extension,browser-extension,Google Chrome Extension,Browser Extension,我正在尝试编写一个简单的Chrome pageAction扩展，将页面上的所有锚从一个域更改为另一个域。。。但我似乎无法让它正常工作，调试起来也有困难我是否误解了这种扩展需要如何构建？还是我只是误用了API manifest.json： { "name": "theirs2ours", "version": "1.0", "description": "Changes all 'their' URLs to 'our' URLs.", "background_page": "b

我正在尝试编写一个简单的Chrome pageAction扩展，将页面上的所有锚从一个域更改为另一个域。。。但我似乎无法让它正常工作，调试起来也有困难

我是否误解了这种扩展需要如何构建？还是我只是误用了API

manifest.json：

{
  "name": "theirs2ours",
  "version": "1.0",
  "description": "Changes all 'their' URLs to 'our' URLs.",
  "background_page": "background.html",
  "permissions": [
    "tabs"
  ],
  "page_action": {
    "default_icon": "cookie.png",
    "default_title": "theirs2ours"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["content.js"]
    }
  ]
}

<html>
<head>
<script type='text/javascript'>

chrome.tabs.onSelectionChanged.addListener(function(tabId) {
  chrome.pageAction.show(tabId);
});

chrome.tabs.getSelected(null, function(tab) {
  chrome.pageAction.show(tab.id);
});

chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.sendRequest(tab.id, {}, null);
});

</script>
</head>
<body>
</body>
</html>

var transform = function() {
  var theirs = 'http://www.yourdomain.com';
  var ours = 'http://sf.ourdomain.com';
  var anchors = document.getElementsByTagName('a');
  for (var a in anchors) {
    var link = anchors[a];
    var href = link.href;
    if (href.indexOf('/') == 0) link.href = ours + href;
    else if (href.indexOf(theirs) == 0) link.href = href.replace(theirs, ours);
  }
};

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  transform();
});

background.html：

{
  "name": "theirs2ours",
  "version": "1.0",
  "description": "Changes all 'their' URLs to 'our' URLs.",
  "background_page": "background.html",
  "permissions": [
    "tabs"
  ],
  "page_action": {
    "default_icon": "cookie.png",
    "default_title": "theirs2ours"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["content.js"]
    }
  ]
}

<html>
<head>
<script type='text/javascript'>

chrome.tabs.onSelectionChanged.addListener(function(tabId) {
  chrome.pageAction.show(tabId);
});

chrome.tabs.getSelected(null, function(tab) {
  chrome.pageAction.show(tab.id);
});

chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.sendRequest(tab.id, {}, null);
});

</script>
</head>
<body>
</body>
</html>

var transform = function() {
  var theirs = 'http://www.yourdomain.com';
  var ours = 'http://sf.ourdomain.com';
  var anchors = document.getElementsByTagName('a');
  for (var a in anchors) {
    var link = anchors[a];
    var href = link.href;
    if (href.indexOf('/') == 0) link.href = ours + href;
    else if (href.indexOf(theirs) == 0) link.href = href.replace(theirs, ours);
  }
};

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  transform();
});

我认为这不是你想要的扩展方式

首先，我假设您希望在单击页面操作按钮时替换锚

无论您是否单击页面操作按钮，您拥有的清单都会在每个页面上注入content.js

我建议您从清单中删除content\u scripts字段，并使用

chrome.tabs.executeScript(tabId, {file:'content.js'})

您应该在页面操作的click listener中执行此操作

顺便说一下，在该侦听器中，您正在向内容脚本发送请求，但它没有侦听器来侦听此类请求消息。在此扩展中，您不需要使用senRequest

您不需要在这些页面上运行内容脚本。内容脚本的匹配项确定它们在哪些页面中执行，但您仍需要请求权限才能将脚本插入这些页面

"permissions": [
  "tabs",
  "http://*/*"
]

好建议。我想，总的来说，我只需要稍微熟悉一下API。请注意，演示的API已按名称和签名进行了更改-为了今天您需要和的类似效果。这是误导。仅当您希望从后台脚本向该url发送HTTP请求时，才需要主机权限