Firefox扩展调用文件选择器遇用户激活缺失拦截问题咨询

原方案的问题 #

你当前的实现逻辑存在核心问题：通过Popup发送消息到Content Script，再在Content Script里调用fileChooser.click()，这种间接触发方式不在用户激活的上下文范围内。Firefox的安全策略严格要求文件选择器的触发必须直接绑定到用户的交互动作（比如直接点击按钮），而消息传递属于异步的间接调用，会被浏览器判定为非用户主动触发，因此抛出<input> picker was blocked due to lack of user activation错误。Chrome的安全策略相对宽松，所以该逻辑能在Chrome中生效，但Firefox遵循更严格的用户激活规范。

可行的实现方案 #

方案1：将文件选择逻辑移至Popup（推荐） #

既然用户是通过点击Popup的按钮触发功能，直接在Popup内处理文件选择流程即可，此时点击动作属于直接的用户交互，完全符合Firefox的要求。

示例代码（popup.js）：

// 绑定Popup按钮的点击事件
document.getElementById('upload-btn').addEventListener('click', () => {
  const fileChooser = document.createElement('input');
  fileChooser.type = 'file';
  fileChooser.accept = 'text/*'; // 可选：限制仅选择文本文件

  fileChooser.addEventListener('change', (e) => {
    const selectedFile = e.target.files[0];
    if (!selectedFile) return;

    const reader = new FileReader();
    reader.onload = (loadEvent) => {
      const textContent = loadEvent.target.result;
      console.log('读取到的文本内容：', textContent);
      
      // 若需将内容传递给Content Script，可通过消息发送
      browser.tabs.query({active: true, currentWindow: true})
        .then(tabs => {
          browser.tabs.sendMessage(tabs[0].id, {
            type: 'file-content',
            content: textContent
          });
        });
    };
    reader.readAsText(selectedFile);
  });

  // 直接触发文件选择器，此时处于用户点击的激活上下文，不会被拦截
  fileChooser.click();
});

方案2：Content Script内通过页面元素直接触发（仅特殊场景使用） #

如果因业务需求必须在Content Script中触发文件选择器，需让用户直接点击页面内的元素（而非通过Popup消息间接触发）。比如在页面中注入一个按钮，用户点击该按钮时触发文件选择器，此时属于用户主动交互的上下文，不会被浏览器拦截。

示例代码（contentscript.js）：

// 向页面注入一个触发按钮
const uploadTrigger = document.createElement('button');
uploadTrigger.textContent = '上传文本文件';
uploadTrigger.style.cssText = 'position:fixed; top:20px; right:20px; z-index:9999';
document.body.appendChild(uploadTrigger);

const fileChooser = document.createElement('input');
fileChooser.type = 'file';
fileChooser.accept = 'text/*';

fileChooser.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = (loadEvent) => {
    console.log('读取到的文本内容：', loadEvent.target.result);
  };
  reader.readAsText(selectedFile);
});

// 用户直接点击页面按钮时触发文件选择器
uploadTrigger.addEventListener('click', () => {
  fileChooser.click();
});

结论 #

你的原方案不符合Firefox的用户激活安全规范，但读取文本文件的功能在Firefox扩展中完全可行，推荐优先使用方案1（Popup内处理），该方案更简洁且符合浏览器的安全要求。

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