Firefox扩展开发求助：DevTools面板与被检窗口通信异常

核心问题分析 #

DevTools面板与被检查窗口属于不同执行上下文，直接用postMessage易出现跨上下文通信失效，且当前链路未打通扩展内置消息通道，导致返回undefined。以下是两种可靠解决方案：

方案1：直接用chrome.devtools.inspectedWindow.eval获取脚本URL #

这是最直接的方式，无需依赖content script，DevTools面板可直接在被检查窗口上下文执行代码：

1. 在你的DevTools面板JS文件中添加按钮点击逻辑：

document.querySelector('#get-scripts-btn').addEventListener('click', async () => {
  try {
    // 在被检查窗口执行DOM查询代码
    const scriptUrls = await chrome.devtools.inspectedWindow.eval(`
      Array.from(document.querySelectorAll('script[src]')).map(script => script.src)
    `);
    // 渲染结果到面板
    console.log('已获取脚本URL列表:', scriptUrls);
    // 示例：将结果插入面板DOM
    const list = document.createElement('ul');
    scriptUrls.forEach(url => {
      const li = document.createElement('li');
      li.textContent = url;
      list.appendChild(li);
    });
    document.body.appendChild(list);
  } catch (err) {
    console.error('获取脚本失败:', err);
  }
});

2. 确保devtools-page.html正确引用面板JS，路径无误。

方案2：通过扩展消息通道（content script + background）通信 #

如果必须用content script处理逻辑，需打通完整消息链路：

步骤1：修改devtools-page.js #

建立面板与background/content script的中转：

// devtools/devtools-page.js
chrome.devtools.panels.create('脚本记录器', '', 'devtools/panel.html', (panel) => {
  panel.onShown.addListener(() => {
    // 监听来自面板的消息
    chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
      if (msg.type === 'GET_SCRIPTS') {
        // 获取当前激活的标签页ID
        chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
          // 向content script发送消息
          chrome.tabs.sendMessage(tabs[0].id, {type: 'GET_SCRIPTS'}, (response) => {
            sendResponse(response);
          });
        });
        return true; // 保持消息通道开放，等待异步响应
      }
    });
  });
});

步骤2：更新content script（main.js） #

监听消息并返回脚本URL：

// main.js
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'GET_SCRIPTS') {
    // 收集所有带src的script标签URL
    const scriptUrls = Array.from(document.querySelectorAll('script[src]')).map(s => s.src);
    sendResponse({scripts: scriptUrls});
  }
});

步骤3：面板JS发送请求 #

在面板的JS中触发消息请求：

// devtools/panel.js
document.querySelector('#get-scripts-btn').addEventListener('click', () => {
  chrome.runtime.sendMessage({type: 'GET_SCRIPTS'}, (response) => {
    if (response?.scripts) {
      console.log('脚本URL列表:', response.scripts);
      // 渲染结果到面板
    } else {
      console.error('未获取到有效响应');
    }
  });
});

常见问题排查 #

1. 路径错误：检查devtools_page、面板HTML/JS的路径是否与manifest一致，Firefox对路径大小写敏感。
2. content script注入时机：如果页面动态加载脚本，可将run_at改为document_idle，或在content script中监听DOMNodeInserted事件捕获新增脚本。
3. 消息类型冲突：确保消息type字段唯一，避免与其他扩展或内置消息冲突。

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