Chrome DevTools扩展调用tabs.create返回ID为-1，无法创建标签页求助

1. DevTools面板脚本调用异常的核心原因 #

DevTools面板的运行上下文是浏览器DevTools窗口，和扩展的Service Worker（后台）上下文完全隔离，即便已声明tabs权限，直接在DevTools脚本中调用chrome.tabs.create也会因为环境限制出现异常：返回的tab对象ID为-1，实际不会创建标签页。

2. 正确实现方式：通过消息传递委托Service Worker执行 #

步骤1：修改DevTools面板脚本，发送消息到Service Worker #

// DevTools面板内的脚本代码
chrome.runtime.sendMessage(
  { action: 'createTab', url: 'https://google.com' },
  (response) => {
    if (response.success) {
      console.log('Created tab with ID: ' + response.tabId);
    } else {
      console.error('Failed to create tab:', response.error);
    }
  }
);

步骤2：在Service Worker中监听消息并执行标签页创建 #

// Service Worker（background.js）内的代码
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'createTab') {
    chrome.tabs.create({ url: message.url }, (tab) => {
      if (chrome.runtime.lastError) {
        sendResponse({
          success: false,
          error: chrome.runtime.lastError.message
        });
      } else {
        sendResponse({ success: true, tabId: tab.id });
      }
    });
    // 异步操作需返回true以维持消息通道开放
    return true;
  }
});

3. Service Worker中调用异常的排查点 #

如果Service Worker内直接调用也出现相同问题，检查以下内容：

• 确认Service Worker处于激活状态：可在Chrome扩展管理页的「Service Worker」标签查看，避免在未激活的生命周期阶段调用API。
• 检查权限配置：确保Manifest中tabs权限已正确声明，若目标URL存在特殊限制，可补充对应host_permissions（tabs.create本身无需目标URL权限，但极端场景下可能影响）。
• 确保调用时机合法：避免在Service Worker脚本最顶层直接执行，应放在chrome.runtime.onInstalled回调或消息监听函数等活跃生命周期内调用。

补充说明 #

Manifest V3对不同上下文的API访问做了严格隔离，DevTools相关脚本（包括devtools_page、面板脚本）仅能访问有限的DevTools专属API，扩展核心API需通过消息传递委托给Service Worker处理，这是安全隔离设计的要求。

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