Chrome扩展popup.js与content.js无法通信及tabs.query报错问题

核心问题分析 #

你遇到的Uncaught TypeError: Error in invocation of tabs.query报错，以及消息传递无响应，主要由三个原因导致：API权限缺失、参数选择不当、拼写错误，同时需要确保Content Script配置正确。

1. 修复tabs.query调用错误 #

问题根源

• 未在manifest.json中声明必要权限，导致API调用签名不匹配；
• 使用lastFocusedWindow参数可能获取到非当前活动窗口的标签，在Popup场景下应优先使用currentWindow。

解决方案

首先在manifest.json中添加activeTab权限（推荐，仅在用户交互时临时获取权限）：

{
  "manifest_version": 3,
  "name": "MultiSearch PDF",
  "version": "1.0",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换为你需要的目标页面，如"*://*.pdf"
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

然后修改popup.js中的applySearches函数：

async function applySearches() {
  try {
    const [tab] = await chrome.tabs.query({
      active: true,
      currentWindow: true // 替换lastFocusedWindow，确保获取当前窗口的活动标签
    });
    if (!tab) {
      console.error("未找到活动标签页");
      return;
    }
    await chrome.tabs.sendMessage(tab.id, {
      action: "applySearches", // 修复拼写错误：applySeraches → applySearches
      searches,
    });
  } catch (err) {
    console.error("消息发送失败：", err);
  }
}

2. 修复消息拼写错误 #

你在发送消息时将action字段拼写成了applySeraches（少一个字母c），这会导致Content Script无法匹配到对应的处理逻辑，已在上述代码中修复。

3. 完善Content Script的消息处理 #

当前Content Script仅打印消息，可添加逻辑处理收到的搜索请求：

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log(
    sender.tab
      ? "来自内容脚本：" + sender.tab.url
      : "来自扩展"
  );
  if (request.action === "applySearches") {
    console.log("收到搜索列表：", request.searches);
    // 在这里添加你的文本搜索高亮逻辑
    sendResponse({ status: "已接收搜索任务" }); // 可选：回复消息给Popup
    // 若存在异步操作，需返回true保持消息通道开放
    // return true;
  }
});

4. 调试验证步骤 #

• 确保目标页面已刷新，Content Script已注入（可在页面控制台查看是否有日志输出）；
• 点击"Apply Searches"后，检查Popup控制台（右键Popup→检查）和页面控制台的日志，定位剩余问题；
• 若仍无响应，确认manifest.json中的matches字段是否匹配当前页面URL。

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