无法从popup.js向新标签页注入JavaScript的技术问题排查

核心问题分析 #

你当前代码里的onTabUrlUpdated函数未定义，且新标签页创建后可能还未加载完成就尝试注入脚本，导致操作失败。Chrome的tabs.create返回的tab对象中，新标签页的URL状态可能还未更新，直接执行executeScript会因页面未就绪而失效。

修正方案 #

1. 监听标签页加载完成事件 #

通过chrome.tabs.onUpdated监听新标签页的加载状态，直到页面进入complete状态后再执行脚本注入操作。

2. 修正后的popup.js代码 #

(async () => {
  // 创建新标签页
  const tab = await chrome.tabs.create({
    url: 'https://www.listyourself.net/ListYourself/listing.jsp'
  });
  const tabId = tab.id;

  // 等待标签页加载完成
  await new Promise((resolve) => {
    const listener = (updatedTabId, changeInfo) => {
      if (updatedTabId === tabId && changeInfo.status === 'complete') {
        chrome.tabs.onUpdated.removeListener(listener);
        resolve();
      }
    };
    chrome.tabs.onUpdated.addListener(listener);
  });

  // 注入测试脚本
  await chrome.scripting.executeScript({
    target: { tabId },
    files: ['test.js']
  });
})();

额外注意事项 #

• 确保扩展的manifest.json中已声明必要权限：

{
  "permissions": ["scripting", "tabs"],
  "host_permissions": ["https://www.listyourself.net/*"]
}

• 调试时可右键popup页面选择「检查」，通过开发者工具的Console面板查看错误信息，排查权限或页面加载相关问题。

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