Chrome扩展中如何从Service Worker打开文件选择对话框？

结论 #

不行，Service Worker无法直接打开文件选择对话框——它是无DOM、无窗口的后台脚本，不存在window对象，所有依赖浏览器窗口或DOM的API（比如showOpenFilePicker、<input type="file">）都无法在这里运行。

原因 #

Service Worker的设计目标是在后台独立于浏览器标签页运行，没有关联的UI上下文，也不能访问DOM或window对象，所以任何需要用户交互的UI组件（比如文件选择对话框）都无法直接调用。

可行替代方案 #

1. 用扩展弹出页（Popup）处理文件选择 #

弹出页拥有完整的window环境，是最直接的解决方案：

• 在manifest.json中配置弹出页：

{
  "action": {
    "default_popup": "popup.html"
  }
}

• 在popup.html中添加触发按钮，popup.js中实现文件选择与验证：

// popup.js
document.getElementById('pick-file-btn').addEventListener('click', async () => {
  try {
    // 调用showOpenFilePicker选择Excel文件
    const [fileHandle] = await window.showOpenFilePicker({
      types: [{
        description: 'Excel文件',
        accept: {
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
          'application/vnd.ms-excel': ['.xls']
        }
      }]
    });
    const file = await fileHandle.getFile();
    
    // 验证Excel中的商家名称等属性（示例用SheetJS库）
    await validateExcel(file);
    
    // 将验证后的文件信息发送给Service Worker
    chrome.runtime.sendMessage({ type: 'validatedFile', file });
  } catch (err) {
    alert(`文件处理失败：${err.message}`);
  }
});

async function validateExcel(file) {
  const data = await file.arrayBuffer();
  const workbook = XLSX.read(data);
  const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
  const sheetData = XLSX.utils.sheet_to_json(firstSheet);
  
  if (!sheetData.some(item => item['商家名称'])) {
    throw new Error('Excel文件缺少「商家名称」属性');
  }
}

• 在background.js中监听消息，执行爬取逻辑：

// background.js
chrome.runtime.onMessage.addListener(async (msg) => {
  if (msg.type === 'validatedFile') {
    // 获取当前活跃标签页并注入爬取脚本
    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
    await chrome.scripting.executeScript({
      target: { tabId: activeTab.id },
      files: ['scrape-script.js']
    });
  }
});

2. 向活跃标签页注入脚本触发文件选择 #

如果必须从Service Worker触发文件选择，只能通过chrome.scripting.executeScript在当前活跃标签页注入脚本，利用标签页的window环境打开对话框：

// background.js
async function triggerFilePicker() {
  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const scriptResult = await chrome.scripting.executeScript({
    target: { tabId: activeTab.id },
    func: async () => {
      // 在标签页环境中调用文件选择器
      const [fileHandle] = await window.showOpenFilePicker({
        types: [{
          description: 'Excel文件',
          accept: {
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx']
          }
        }]
      });
      const file = await fileHandle.getFile();
      
      // 将文件转为可序列化的base64格式返回给Service Worker
      return new Promise(resolve => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.readAsDataURL(file);
      });
    }
  });
  
  const fileData = scriptResult[0].result;
  // 这里可以添加文件验证逻辑
  await validateExcelFromBase64(fileData);
  // 执行爬取脚本
  await executeScraping(activeTab.id);
}

async function executeScraping(tabId) {
  await chrome.scripting.executeScript({
    target: { tabId },
    files: ['scrape-script.js']
  });
}

注意：这种方式需要在manifest.json中声明scripting和activeTab权限。

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