Firefox插件调用Google API遭CSP拦截，求解决方案

核心问题 #

你遇到的问题本质是gapi库会动态加载额外的远程脚本——哪怕把主api.js下载到本地，它还是会自动请求https://apis.google.com/_/scs/abc-static/...这类依赖脚本，而Firefox插件对popup页面的远程脚本加载限制极严，常规的meta标签或manifest权限设置很难覆盖这种动态加载场景。

方案一：用后台脚本代理API调用（最可靠） #

后台脚本的CSP限制比popup宽松，适合加载外部API并作为中间层处理请求，通过插件的消息传递机制让popup调用API功能。

1. 修改manifest.json
   添加后台脚本配置和必要权限：

   {
     "manifest_version": 3,
     "background": {
       "scripts": ["background.js"],
       "type": "module"
     },
     "permissions": [
       "https://apis.google.com/*",
       "https://www.googleapis.com/*"
     ]
   }
   

   若使用Manifest V2，将background字段改为：

   "background": {
     "scripts": ["background.js"]
   }
   

2. 编写background.js
   在这里加载gapi并处理popup的消息请求：

   // 加载并初始化gapi
   async function initGapi() {
     await new Promise((resolve, reject) => {
       const script = document.createElement('script');
       script.src = 'https://apis.google.com/js/api.js';
       script.onload = resolve;
       script.onerror = reject;
       document.head.appendChild(script);
     });
   
     await new Promise((resolve) => {
       gapi.load('client:auth2', resolve);
     });
   
     // 替换成你的Google Client ID和需要的权限
     await gapi.client.init({
       clientId: 'YOUR_GOOGLE_CLIENT_ID',
       scope: 'https://www.googleapis.com/auth/drive.readonly'
     });
   }
   
   // 监听popup发来的消息
   browser.runtime.onMessage.addListener((msg, sender, sendResponse) => {
     if (msg.action === 'invokeGoogleApi') {
       // 调用指定的API方法，比如gapi.client.drive.files.list
       gapi.client[msg.api][msg.method](msg.params)
         .then(res => sendResponse({ success: true, data: res.result }))
         .catch(err => sendResponse({ success: false, error: err.message }));
       return true; // 保持消息通道开放，异步返回结果
     }
   });
   
   // 初始化gapi
   initGapi();
   

3. 编写popup的调用逻辑
   在popup.js里通过消息传递调用后台的API：

   document.getElementById('your-plugin-button').addEventListener('click', async () => {
     try {
       const response = await browser.runtime.sendMessage({
         action: 'invokeGoogleApi',
         api: 'drive',
         method: 'files.list',
         params: { pageSize: 10, fields: "nextPageToken, files(id, name)" }
       });
   
       if (response.success) {
         // 处理API返回的数据
         console.log('API结果:', response.data);
       } else {
         console.error('API调用失败:', response.error);
       }
     } catch (err) {
       console.error('消息传递失败:', err);
     }
   });
   

方案二：直接调用Google REST API（无gapi依赖） #

完全绕过gapi库，自己用fetch发送请求，彻底避免动态脚本加载的问题，适合不需要复杂gapi封装的场景。

1. 修改manifest.json
   添加身份验证和API权限：

   {
     "manifest_version": 3,
     "permissions": [
       "identity",
       "https://www.googleapis.com/*"
     ]
   }
   

2. 编写popup.js的逻辑
   处理OAuth2授权并调用REST API：

   // 获取Google OAuth2 Access Token
   async function getAccessToken() {
     const clientId = 'YOUR_GOOGLE_CLIENT_ID';
     const scopes = ['https://www.googleapis.com/auth/drive.readonly'];
     const redirectUri = browser.identity.getRedirectURL();
     const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&response_type=token&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scopes.join(' '))}`;
   
     const authResult = await browser.identity.launchWebAuthFlow({
       url: authUrl,
       interactive: true
     });
   
     // 解析返回的token参数
     const params = new URLSearchParams(authResult.split('#')[1]);
     return params.get('access_token');
   }
   
   // 调用Google Drive REST API
   async function fetchDriveFiles() {
     const token = await getAccessToken();
     const response = await fetch('https://www.googleapis.com/drive/v3/files?pageSize=10&fields=nextPageToken,files(id,name)', {
       headers: {
         'Authorization': `Bearer ${token}`
       }
     });
   
     if (!response.ok) {
       throw new Error(`API请求失败: ${response.statusText}`);
     }
   
     return await response.json();
   }
   
   // 按钮点击事件
   document.getElementById('your-plugin-button').addEventListener('click', async () => {
     try {
       const files = await fetchDriveFiles();
       console.log('Drive文件列表:', files);
     } catch (err) {
       console.error('请求失败:', err);
     }
   });
   

关键注意事项 #

• 不要尝试本地托管gapi的api.js，因为它内部会硬编码请求远程依赖脚本，反而增加CSP处理复杂度。
• Manifest V3的CSP规则比V2更严格，必须用extension_pages字段配置，不要在popup里加meta标签的CSP，会被插件的全局CSP覆盖。

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