Question

出于某种原因，当我尝试在Chrome扩展程序中使用getElementsByTagName时，我会得到一个空列表。例如：

的 background.js 的

document.body.onload = function(){
    chrome.browserAction.onClicked.addListener(function(tab) {
        alert(document.getElementsByTagName("div").length);
    });
};

会提醒我“0”。此外，如果在我的addListener函数中创建div并将其附加到body，则长度变为“1”。所以看起来扩展只检测点击扩展后创建的对象......任何想法？

P.S。这是我的清单文件

的的manifest.json 的

{
  "name": "tester",
  "version": "1.0",
  "manifest_version": 2,
  "background": {
      "scripts": ["background.js"],
      "persistent": false
  }
}

Answer 1

background.js脚本在后台页面上下文中执行。在这里，由于您只声明了一个后台脚本，因此会生成您的后台页面，并且没有任何内容。

您可以转到chrome：// extensions /并点击扩展程序旁边的Inspect views: _generated_background_page.html链接，查看生成的背景页面。它看起来像这样：

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src="background.js"></script>
  </body>
</html>

如您所见，没有<div>元素，因此document.getElementsByTagName("div").length将返回0.

如果您想获取网页内容，则必须使用content script。

Answer 2

只是后续，这是我使用的代码。它的工作原理是，只要单击扩展按钮，就会将脚本注入活动选项卡（更多信息here）

的 injected.js 的

chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null, {file: "testscript.js"}); });

的 testscript.js 的

document.body.style.backgroundColor="red";

的的manifest.json 的

{ "name": "injecttester", "version": "1.0", "manifest_version": 2, "browser_action": { "default_icon": "icon.png" }, "background": { "scripts": ["injected.js"], "persistent": false }, "permissions": [ "activeTab", ] }

getElementsByTagName无法在Chrome扩展程序中使用

2 个答案: