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

getElementsByTagName not working in Chrome Extension

本文关键字：不起作用 程序 扩展 Chrome getElementsByTagName      更新时间：2023-09-26
出于

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

背景.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
  }
}

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。

如果要获取网页的内容，则必须使用内容脚本。

只是一个后续，这是我使用的代码。它的工作原理是，每当单击扩展按钮时，都会将脚本注入活动选项卡（更多信息在这里）

注射.js 

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

测试脚本.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",
  ]
}
相关文章：