javascript - Chrome 扩展 DOM 已完全加载

Question

在尝试使用 DOM 之前，我已经尝试了多次尝试确保 DOM 已完全加载，但我似乎永远无法让 div 计数匹配。

我的测试是，我在打开开发工具的情况下运行页面，页面完成后，我打开控制台并运行相同的代码(document.getElementsByTagName('div').length)，然后它们就关闭了!!

有人有任何线索吗？唯一看起来有效的事情是当我设置超时时，我想尝试远离它...除非那是唯一的解决方案，我已经搜索了文章并尝试了几种解决方案，但没有运气...

这里有一些尝试...

1) list 文件有 content_scripts/run_at : "document_start"

document.addEventListener('DOMContentLoaded', function () {
var count = document.getElementsByTagName('div').length;
 console.log(count);
}, true);

2) list 文件有 content_scripts/run_at : "document_end";我基本上向background.js发送一条消息，然后background.js将消息发送回运行函数。

 chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response);
 });

 chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  console.log(request);
  divCount();
 });

function divCount() {
 var count = document.getElementsByTagName('div').length;
 console.log(count);
}

2) list 文件有 content_scripts/run_at : "document_end";我基本上向background.js发送一条消息，然后他

内容.js

 chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response);
 });

背景.js

 chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    chrome.tabs.executeScript(null, {
       code: "console.log($('div').length)"
       }, function(data) {
     console.log(data);
    });
 });

我也尝试过这个:

chrome.tabs.onUpdated.addListener(function( tabId , info ) {
 console.log(tabId, info);
 if ( info.status == "complete" ) {

 chrome.tabs.executeScript(null, {
  code: "console.log($('div').length)"
  }, function(data) {
  console.log(data);
 });
 }
});

Answer 1

DOMContentLoaded - 可能在所有脚本处理之前发生，因此如果您有任何添加元素的 JS，这可能会解释问题。

但是我不明白你为什么遇到问题，你正在使用 document_start 来做一些工作，但是现在做你正在做的事情还为时过早。我不知道为什么你不将 DOMContentLoaded 中的逻辑包含在与 document_end 相同的脚本中...