Chrome extension content scripts 等待所有网络请求完成后再操作DOM

6 min read

要在Chrome扩展程序中使用内容脚本并等待所有网络请求完成后再操作DOM，可以使用以下步骤：

  1. 在manifest.json文件中添加"run_at": "document_idle"选项，以确保内容脚本在HTML文档完全加载后运行。

  2. 使用chrome.tabs.onUpdated和chrome.webRequest.onCompleted API监听页面加载和网络请求完成事件。

  3. 在所有网络请求完成后，向页面注入一个包含所有操作DOM代码的函数。

下面是一个示例代码片段，可以将其添加到您的内容脚本中：

// 等待页面完全加载后再执行操作DOM代码
document.addEventListener('DOMContentLoaded', function() {
  // 注册事件监听
  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
      injectDOMManipulationCode();
    }
  });
  chrome.webRequest.onCompleted.addListener(function(details) {
    injectDOMManipulationCode();
  }, { urls: ['<all_urls>'] });

  // 注入操作DOM代码的函数
  function injectDOMManipulationCode() {
    var script = document.createElement('script');
    script.textContent = '/* 在此处添加您的操作DOM代码 */';
    document.documentElement.appendChild(script);
  }
});

请注意，此示例仅适用于在页面完全加载后才需要操作DOM的情况。如果您需要在页面加载期间操作DOM，可以将上述代码中的DOMContentLoaded事件更改为window.onload事件。