getElementsByTagName 在 Chrome 扩展程序中不起作用答案

【问题标题】：getElementsByTagName not working in Chrome ExtensiongetElementsByTagName 在 Chrome 扩展程序中不起作用
【发布时间】：2013-10-18 08:49:54
【问题描述】：

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

background.js

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

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

附：这是我的清单文件

manifest.json

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

【问题讨论】：

标签： javascript google-chrome-extension getelementsbytagname

【解决方案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。

【讨论】：

【解决方案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",
  ]
}

【讨论】：