Chrome或Firefox中禁用跨源框架：WebExtension内嵌localhost iframe访问扩展API的开发问题

首先得明确：你遇到的问题不是普通的CORS请求限制，而是跨域Frame之间的DOM/Window访问限制——CORS头只解决AJAX跨域请求的问题，而Frame之间直接访问parent这类对象是同源策略的另一层限制，即使你设置了Access-Control-Allow-Origin: *或者禁用全局Web安全，Chrome对扩展页面（chrome-extension://协议）的特殊隔离机制依然会阻止这种访问。

可行的解决方案：使用postMessage进行跨域通信 #

这是跨上下文通信的标准安全方案，完全适配你的场景——iframe里的localhost页面可以通过postMessage向扩展页面发送请求，扩展页面调用API后再把结果回传回来。

1. 修改localhost:8080页面的脚本：

// 向扩展页面发送API调用请求
window.postMessage({ 
  type: 'CALL_EXTENSION_API',
  api: 'storage.local.get',
  params: ['testKey']
}, '*'); // 开发阶段用*，上线后替换为你的扩展ID对应的chrome-extension://地址

// 监听扩展页面返回的结果
window.addEventListener('message', (event) => {
  // 开发阶段可以暂时跳过来源验证，上线必须加上！
  if (event.origin !== 'chrome-extension://abcdefghijklmnopqrstuvw') return;
  
  if (event.data.type === 'API_RESPONSE') {
    console.log('扩展API返回结果:', event.data.result);
    // 这里可以处理结果，比如更新页面UI
  }
});

2. 修改扩展页面的script.js：

const iframe = document.getElementById('myFrame');

// 监听来自iframe的消息
window.addEventListener('message', (event) => {
  // 验证消息来源，只处理localhost的请求
  if (event.origin !== 'http://localhost:8080') return;
  
  if (event.data.type === 'CALL_EXTENSION_API') {
    const { api, params } = event.data;
    // 拆分API路径，比如"storage.local.get"拆分为chrome.storage.local.get
    const apiSegments = api.split('.');
    let apiMethod = chrome;
    apiSegments.forEach(segment => {
      apiMethod = apiMethod[segment];
    });
    
    // 调用扩展API，注意处理回调或Promise
    if (typeof apiMethod === 'function') {
      // 适配回调风格的扩展API
      apiMethod(...params, (result) => {
        iframe.contentWindow.postMessage({
          type: 'API_RESPONSE',
          result: result
        }, event.origin);
      });
    }
  }
});

为什么禁用Web安全没用？ #

Chrome的--disable-web-security和--disable-site-isolation-trials主要针对普通网页的跨域限制，但扩展运行在独立的安全上下文里，Chrome对chrome-extension://协议的页面有额外的隔离规则，这些全局参数无法完全解除扩展与普通HTTP页面之间的跨域Frame访问限制。

开发阶段的另一种快捷方式（可选） #

如果不想用postMessage，可以把localhost的开发页面直接打包到扩展目录中，让iframe的src指向扩展内的路径（比如chrome-extension://abcdefghijklmnopqrstuvw/dev-page.html），这样两者同源，就可以直接访问parent对象和扩展API了。你可以用符号链接把本地开发目录链接到扩展目录，配合web-ext run的自动重载功能，不用每次手动复制文件。

注意事项 #

• 开发阶段可以放松来源验证，但上线前一定要严格校验postMessage的event.origin，避免恶意页面冒充你的localhost页面调用扩展API。
• 扩展API大多是回调风格，如果你习惯用Promise，可以用工具把它们包装成Promise，让代码更简洁。

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