如何在Google Sheets模态对话框嵌入网站，实现与表格及后端通信？

方案一：iframe + postMessage 中转通信 #

这个方案保留iframe嵌入前端网站的能力，通过postMessage实现iframe与插件脚本的跨域通信，间接调用google.script.run，同时不影响前端与后端的正常交互。

步骤1：创建插件端的iframe包装页（iframeWrapper.html） #

<iframe src="https://www.myfrontend.com/#/home" style="width: 100%; height: 800px; border: none;"></iframe>
<script>
// 监听来自前端网站的消息，中转调用Google Apps Script
window.addEventListener('message', (e) => {
  // 验证消息来源，仅处理可信域名的请求
  if (e.origin !== 'https://www.myfrontend.com') return;

  if (e.data.type === 'callGoogleScript') {
    const { functionName, args, requestId } = e.data;
    // 调用Google Apps Script函数，并将结果回传
    google.script.run
      .withSuccessHandler((result) => {
        e.source.postMessage({
          type: 'scriptResult',
          requestId,
          result
        }, e.origin);
      })
      .withFailureHandler((error) => {
        e.source.postMessage({
          type: 'scriptError',
          requestId,
          error: error.toString()
        }, e.origin);
      })
      [functionName](...args);
  }
});
</script>

步骤2：插件端打开对话框的脚本 #

function showAddonDialog() {
  const htmlOutput = HtmlService
    .createHtmlOutputFromFile('iframeWrapper')
    .setWidth(600)
    .setHeight(800);
  SpreadsheetApp.getUi().showModelessDialog(htmlOutput, 'My add-on');
}

// 示例：供前端调用的Google Sheets操作函数
function getActiveSheetData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  return sheet.getDataRange().getValues();
}

步骤3：前端网站（myfrontend.com）添加通信逻辑 #

// 封装调用Google Apps Script的方法
function invokeGoogleScript(functionName, args = []) {
  return new Promise((resolve, reject) => {
    const requestId = Math.random().toString(36).slice(2);
    
    // 监听插件返回的结果
    const resultListener = (e) => {
      if (e.origin.includes('script.googleusercontent.com') && e.data.requestId === requestId) {
        window.removeEventListener('message', resultListener);
        if (e.data.type === 'scriptResult') {
          resolve(e.data.result);
        } else {
          reject(new Error(e.data.error));
        }
      }
    };
    window.addEventListener('message', resultListener);
    
    // 向插件发送调用请求
    window.parent.postMessage({
      type: 'callGoogleScript',
      requestId,
      functionName,
      args
    }, '*'); // 生产环境建议替换为插件的具体域名，可通过前端动态获取
  });
}

// 调用示例：获取表格数据
invokeGoogleScript('getActiveSheetData')
  .then(data => console.log('表格数据:', data))
  .catch(err => console.error('调用失败:', err));

方案二：修复本地HTML的CORS配置问题 #

如果偏好直接在插件域下运行前端代码，需修正后端CORS规则的匹配逻辑，确保Google插件域名能通过验证。

步骤1：修改后端CORS配置 #

将原有的正则匹配改为动态验证函数，确保覆盖Google插件的域名格式：

app.use(cors({
  origin: (origin, callback) => {
    const allowedOrigins = [
      /\.mybackend\.com$/,
      /\.myfrontend\.com$/,
      /localhost(:[0-9]*)?$/,
      /\.live\.com$/,
      "https://onedrive.live.com",
      /^https:\/\/[\w-]+\.script\.googleusercontent\.com$/
    ];
    
    // 允许无origin的请求（如工具调试）
    if (!origin) return callback(null, true);
    
    // 检查当前origin是否在允许列表中
    const isAllowed = allowedOrigins.some(pattern => pattern.test(origin));
    isAllowed ? callback(null, true) : callback(new Error('CORS origin not allowed'));
  },
  credentials: true,
  optionsSuccessStatus: 200 // 兼容部分旧浏览器
}));

步骤2：调整前端HTML资源路径 #

确保production.html中的静态资源（JS、CSS、图片等）使用绝对URL（指向https://www.myfrontend.com/），避免在Google插件域下出现资源加载失败。

验证注意事项 #

• 确认后端的OPTIONS预检请求能正确返回Access-Control-Allow-Origin等头信息
• 清除浏览器缓存后重新测试，避免旧CORS规则残留

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