Chrome扩展Manifest V3首次打开DOM未加载，如何实现即时爬取？

你的扩展当前仅在页面加载状态变为complete时（比如刷新、跳转页面），通过chrome.tabs.onUpdated注入爬取脚本。但首次打开扩展时，当前活跃页面早已加载完成，这个监听事件不会触发，导致爬取脚本无法执行，自然无法获取DOM数据。

通过三个核心调整实现首次打开扩展即可爬取DOM：

1. Popup打开时主动注入脚本到当前活跃标签 #

修改popup_script.js，在popup加载完成后，主动获取当前活跃标签并注入爬取脚本，确保即使页面已加载完成，脚本也能执行。

// popup_script.js
chrome.tabs.query({active: true, currentWindow: true})
.then(tabs => {
  const activeTab = tabs[0];
  // 仅处理http/https协议的页面
  if (/^http/.test(activeTab.url)) {
    return chrome.scripting.executeScript({
      target: {tabId: activeTab.id},
      files: ["./Crawling_script.js"]
    });
  }
})
.then(() => {
  // 脚本注入完成后，请求存储的数据更新popup显示
  chrome.runtime.sendMessage({message: "get_name"}, response => {
    if (response.message === 'success') {
      document.querySelector('div').innerHTML = `Hello ${response.payload}`;
    }
  });
})
.catch(err => console.error("注入爬取脚本失败:", err));

2. 扩展启动/安装时，为已加载页面批量注入脚本 #

修改background_script.js，封装注入逻辑，在扩展安装、启动时遍历所有已加载的http/https页面，批量注入脚本，避免遗漏已打开的页面。

// background_script.js
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.local.set({name: "Jack"});
  // 安装扩展时，为已加载页面注入脚本
  injectScriptsToLoadedTabs();
});

chrome.runtime.onStartup.addListener(() => {
  // 扩展启动时，为已加载页面注入脚本
  injectScriptsToLoadedTabs();
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && /^http/.test(tab.url)) {
    injectScripts(tabId);
  }
});

// 封装注入脚本的通用函数
function injectScripts(tabId) {
  chrome.scripting.insertCSS({
    target: {tabId: tabId},
    files: ["./foreground_styles.css"]
  })
  .then(() => {
    return chrome.scripting.executeScript({
      target: {tabId: tabId},
      files: ["./foreground.js", "./Crawling_script.js"]
    });
  })
  .then(() => console.log(`标签页${tabId}脚本注入完成`))
  .catch(err => console.error(`标签页${tabId}注入失败:`, err));
}

// 遍历所有已加载的http/https页面，注入脚本
function injectScriptsToLoadedTabs() {
  chrome.tabs.query({status: "complete", url: ["http://*/*", "https://*/*"]})
  .then(tabs => {
    tabs.forEach(tab => injectScripts(tab.id));
  })
  .catch(err => console.error("遍历已加载标签页失败:", err));
}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message === 'get_name') {
    chrome.storage.local.get('name', data => {
      if (chrome.runtime.lastError) {
        sendResponse({message: 'fail'});
        return;
      }
      sendResponse({message: 'success', payload: data.name});
    });
    return true;
  }
});

3. 修正爬取脚本的DOM操作逻辑 #

修改Crawling_script.js，增加DOM元素存在性检查，避免因元素未找到报错，同时修正无效的sendResponse调用（该函数仅在消息监听回调中有效）。

// Crawling_script.js
const ce_main_container = document.createElement('DIV');
const ce_name = document.createElement('DIV');
const ce_input = document.createElement('INPUT');
const ce_button = document.createElement('DIV');

ce_main_container.classList.add('ce_main');
ce_name.id = 'ce_name';
ce_input.id = 'ce_input';
ce_button.id = 'ce_button';

ce_name.innerHTML = `Hello NAME`;
ce_button.innerHTML = `Change name.`;

ce_main_container.appendChild(ce_name);
ce_main_container.appendChild(ce_input);
ce_main_container.appendChild(ce_button);
// 必须将创建的元素添加到页面DOM中才能显示
document.body.appendChild(ce_main_container);

// 获取目标DOM元素时做存在性检查
const profileBtn = document.querySelector('.profile-photo-edit__edit-btn');
if (profileBtn) {
  chrome.storage.local.set({name: profileBtn.outerHTML}, () => {
    if (chrome.runtime.lastError) {
      console.error("存储DOM数据失败:", chrome.runtime.lastError);
      return;
    }
    // 直接更新页面显示，无需重复发消息
    ce_name.innerHTML = profileBtn.outerHTML;
  });
} else {
  console.error("未找到目标DOM元素");
  ce_name.innerHTML = "未找到目标元素";
}

补充：Manifest.json权限配置 #

确保在manifest.json中添加必要权限：

{
  "manifest_version": 3,
  "permissions": ["activeTab", "storage", "scripting"],
  "background": {
    "service_worker": "background_script.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

内容的提问来源于stack exchange，提问作者Manish Parmar