Chrome扩展独立弹窗无法访问原标签页报错求助

你碰到的这个报错本质上是目标标签页搞错了：当你用chrome.windows.create把popup.html打开成独立窗口后，你的popup.js里调用tabs.executeScript时没指定具体要注入的标签页ID，默认情况下这个API会把脚本注入到当前活跃的窗口——也就是你刚打开的这个扩展自身的弹窗窗口（URL是chrome-extension://jhbpcpcmfnaklengljfpmeecdfpeiihm/popup.html）。而你的manifest里没申请访问这个扩展内部URL的权限，更关键的是，这根本不是你想要爬取数据的原标签页啊！

另外，之前用default_popup时失焦导致爬取异常，是因为Chrome的默认popup窗口在失焦后会被销毁，里面的脚本也会终止，改成独立弹窗窗口就不会有这个问题了。

我们需要做两件事：把原标签页的ID传递给新打开的popup窗口，然后在popup里明确指定用这个ID来执行脚本，确保注入到正确的页面。

第一步：修改background.js，传递原标签页ID #

打开新窗口时，把触发pageAction的原标签页ID作为URL参数传过去：

chrome.pageAction.onClicked.addListener(function(tab) {
  // 拼接带有原标签页ID的URL
  const popupUrl = chrome.runtime.getURL(`popup.html?tabId=${tab.id}`);
  chrome.windows.create({ url: popupUrl, type: 'popup' });
});

第二步：修改popup.js，使用目标标签页ID执行脚本 #

在popup的脚本里，先从URL参数中拿到原标签页ID，然后指定这个ID来调用tabs.executeScript：

function getData() {
  // 解析URL参数获取原标签页ID
  const urlParams = new URLSearchParams(window.location.search);
  const targetTabId = parseInt(urlParams.get('tabId'));
  
  if (!targetTabId) {
    console.error('无法获取目标标签页ID，请检查参数传递');
    return;
  }

  // 明确指定目标标签页执行脚本，避免注入到当前弹窗窗口
  chrome.tabs.executeScript(targetTabId, { file: 'content.js' }, (results) => {
    if (chrome.runtime.lastError) {
      console.error('脚本注入失败：', chrome.runtime.lastError);
      return;
    }
    // 这里处理爬取回来的数据，比如渲染到弹窗里
    console.log('爬取结果：', results);
    // 你的业务逻辑代码...
  });
}

// 绑定按钮点击事件（假设你的按钮ID是get-data-btn）
document.getElementById('get-data-btn').addEventListener('click', getData);

额外说明 #

你的manifest权限已经足够了（activeTab和<all_urls>），不需要额外添加访问扩展自身URL的权限，因为现在我们明确指定了要注入的是原标签页，不会再碰扩展自己的窗口了。这样修改后，独立弹窗窗口即使失焦，爬取任务也能正常进行，同时还能准确访问到触发它的原标签页。

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