如何在浏览器中用JavaScript向GitHub仓库提交JSON文件？

核心思路 #

既然你已经有了可编辑的Google表格，且不想在前端暴露GitHub令牌，用Google Apps Script作为中间层是最优解——只有拥有表格访问权限的用户才能触发脚本，令牌全程在Google服务器端运行，不会泄露到前端。

步骤1：准备GitHub访问令牌 #

1. 在GitHub账号的「Settings → Developer settings → Personal access tokens」生成一个令牌（PAT）
2. 权限只勾选repo（仅仓库操作权限，最小化风险）
3. 把这个令牌存到Google表格的单独隐藏工作表（比如新建一个叫「配置」的表，存在A1单元格），并设置该工作表的权限，仅允许指定用户查看/编辑。

步骤2：编写Google Apps Script脚本 #

打开你的Google表格，点击「扩展程序 → Apps Script」，替换默认代码为以下内容：

// 读取表格数据并转换为JSON格式
function getScheduleJson() {
  // 替换为你的时间表工作表名称
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('时间表');
  const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
  const rows = sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn()).getValues();

  // 把表格行数据转为JSON结构
  const scheduleData = rows.map(row => {
    const obj = {};
    headers.forEach((header, index) => {
      obj[header] = row[index];
    });
    return obj;
  });

  return JSON.stringify(scheduleData, null, 2);
}

// 上传JSON到GitHub仓库
function uploadToGitHub() {
  // 从配置表读取GitHub令牌
  const githubToken = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('配置').getRange('A1').getValue();
  // 替换为你的GitHub用户名、仓库名、目标JSON文件路径
  const owner = '你的GitHub用户名';
  const repo = '你的仓库名';
  const filePath = 'schedule.json';
  const commitMsg = '每周更新时间表数据';

  try {
    // 1. 获取目标文件当前的SHA值（GitHub API更新文件必须用这个做冲突校验）
    const shaUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${filePath}`;
    const shaOptions = {
      headers: {
        'Authorization': `token ${githubToken}`,
        'Accept': 'application/vnd.github.v3+json'
      }
    };
    const shaRes = UrlFetchApp.fetch(shaUrl, shaOptions);
    const sha = JSON.parse(shaRes.getContentText()).sha;

    // 2. 编码JSON内容并上传
    const content = Utilities.base64Encode(getScheduleJson());
    const uploadOptions = {
      method: 'put',
      headers: {
        'Authorization': `token ${githubToken}`,
        'Accept': 'application/vnd.github.v3+json'
      },
      payload: JSON.stringify({
        message: commitMsg,
        content: content,
        sha: sha
      })
    };
    UrlFetchApp.fetch(shaUrl, uploadOptions);

    SpreadsheetApp.getUi().alert('时间表已成功同步到GitHub！');
  } catch (e) {
    SpreadsheetApp.getUi().alert(`同步失败：${e.message}`);
  }
}

// 给表格添加自定义菜单，方便用户触发上传
function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('GitHub同步')
    .addItem('上传最新时间表', 'uploadToGitHub')
    .addToUi();
}

步骤3：配置与使用 #

1. 修改脚本中的时间表工作表名称、GitHub用户名/仓库名/文件路径
2. 保存脚本，回到表格刷新页面，会看到顶部多出「GitHub同步」菜单
3. 有权限的用户编辑完表格后，点击「GitHub同步 → 上传最新时间表」，即可自动将表格数据转为JSON并更新到GitHub仓库的目标文件

安全注意事项 #

• 令牌权限最小化：仅勾选repo权限，不要给全局权限
• 令牌存储保护：存放令牌的「配置」工作表要设置权限，禁止无关用户查看
• 避免公开触发：不要把脚本部署为公开可访问的Web App，全程通过表格内部菜单触发

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