将我的 Chrome 扩展程序中的表单数据写入 Google 表格

Question

更新了sn-ps和今天的进展：

我正在编写一个 Chrome 扩展程序，它本质上是一个带有表单的弹出窗口，我想将输入该表单的数据写入 Google 表格。目前，我的扩展由 manifest.json 和弹出脚本以及后台脚本组成。

manifest.json（相关部分）：

"background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [{ "js": ["content.js"], "matches": ["<all_urls>"] }],
  "permissions": [
    "tabs",
    "storage",
    "<all_urls>",
    "identity",
    "https://*.googleapis.com/*"
  ]

popup.js（注意：这是跟踪 MS 症状的扩展）

const app = {

  symptoms: [],

  init: function () {
    //cache some element references
    let formEl = document.getElementById("symptoms-form");

    let fatigue = document.getElementById("fatigue");
    let tingling = document.getElementById("tingling");
    let weakness = document.getElementById("weakness");
    let vision = document.getElementById("vision");
    let dizzy = document.getElementById("dizzy");
    let cognition = document.getElementById("cognition");
    let depression = document.getElementById("depression");
    let balance = document.getElementById("balance");

    //upon submit, update symptoms obj and send to background
    formEl.addEventListener("submit", ev => {
      ev.preventDefault();
      console.log('button click')
      this.symptoms.push({fatigue: fatigue.value})
      this.symptoms.push({tingling: tingling.value})
      this.symptoms.push({weakness: weakness.value})
      this.symptoms.push({vision: vision.value})
      this.symptoms.push({dizzy: dizzy.value})
      this.symptoms.push({cognition: cognition.value})
      this.symptoms.push({depression: depression.value})
      this.symptoms.push({balance: balance.value})

      // chrome.runtime.sendMessage({fn: 'getSymptoms'}, function(response) {
      //   console.log('popup got response', response)
      // })

      chrome.runtime.sendMessage({fn: 'setSymptoms', symptoms: this.symptoms})
    });

  }
}

document.addEventListener('DOMContentLoaded', () => {
  app.init();
})

background.js - 注意：我目前的解决方法是将数据加载到 Firebase，您将在下面看到：

console.log("Background running");

const background = {
  symptoms: [],

  init: function() {
    //listen for any messages and route them to functions
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      if (request.fn in background) {
        background[request.fn](request, sender, sendResponse);
      }
      const jsonObj = {}
      jsonObj['symptoms'] = request.symptoms
      console.log("message received", jsonObj);


      this.postSymptoms(jsonObj)
    });
  },

  postSymptoms: function(msg) {
    const xhr = new XMLHttpRequest();

    xhr.open("POST", "https://ms-mysymptoms-1541705437963.firebaseio.com/symptoms.json", true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.send(msg);
  }
};

background.init();

我在 Google Developers 控制台中设置了一个新项目，启用了 Google Sheets API，并设置了我的凭据和 API 令牌。我在 Google API Explorer 中测试了身份验证设置是否正确，并且我确实可以在我的工作表上写一行。这是个好消息！

我现在无法直接从我的 Chrome 扩展程序执行此操作（写入数据）。到目前为止，我已经保存了所有凭据，设置了一个配置文件，并将我的 append 方法写在本地的一个单独文件中。

sheets.js：

const {authorize, google} = require('./config')
const fs = require('fs')

const spreadsheetId = '---removed for this post--'
const append = (range, values) => {
  fs.readFile('client_secret.json', (err, content) => {
    if (err) return console.log('Error loading client secret file:', err);
    // Authorize a client with credentials, then call the Google Sheets API.
    authorize(JSON.parse(content), (auth) => {
      const sheets = google.sheets({
        version: 'v4',
        auth
      });
      const valueInputOption = 'USER_ENTERED';
      const resource = {
        values
      };
      sheets.spreadsheets.values.append({
        spreadsheetId,
        range,
        valueInputOption,
        resource
      }, (err, result) => {
        if (err) {
          console.log(err);
        } else {
          console.log("Success!");
        }
      });
    });
  });
}

// module.exports = {
//     append
// };

但是，当我尝试将此代码集成到我的弹出脚本中时，我遇到了一个错误，因为为了引用该配置数据和该附加方法，我必须在我的弹出脚本中使用 require。由于弹窗脚本是在浏览器中运行的，所以我不能使用require（即没有webpack）。

我确定我做错了，所以如果我的配置和身份验证存储在本地文件中电脑。

我考虑过的解决方案：

1 - 启动一个 REST API，将表单中的数据发布到该端点，并让它充当 Google Sheets API 的代理 - 这并不理想。

2 - 使用 webpack 以便我可以在弹出文件中使用 require

推荐的方法是什么？我应该如何将身份验证和使用 Google 表格集成到此扩展中？

Answer 1

使用 Google 的 API 写入电子表格是 PUT 而不是 POST。

https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/update

我使用 chrome.identity.getAuthToken 取得了成功，然后使用以下内容运行 fetch：

    chrome.identity.getAuthToken({interactive: true}, function(token) {
        var params = {
            'values': [
                ['Row 1 Col A','Row 1 Col B'],
                ['Row 2 Col A','Row 2 Col B'],
            ]
        };
        let init = {
            method: 'PUT',
            async: true,
            body: JSON.stringify(params),
            headers: {
                Authorization: 'Bearer ' + token,
                Content-Type': 'application/json'
            },
            contentType: 'json',
        };
        fetch('https://sheets.googleapis.com/v4/spreadsheets/***YOUR SHEET ID****/values/****YOUR RANGE*****?valueInputOption=USER_ENTERED&key=***YOUR API KEY***', init)
            .then((response) => response.json())
            .then(function(data) {
                //console.log(data);
                //Returns spreadsheet ID, update tange, cols and rows
            });
        })
   });

这一切都在后台脚本中，我将第 1 行 Col A 等作为值，这将是您范围的第一个单元格。

希望对您有所帮助。

Answer 2

小心！如果要追加数据，? 查询参数位于:append 之后。

fetch(`https://sheets.googleapis.com/v4/spreadsheets/${spreadsheetId}/values/${range}:append?valueInputOption=${valueInputOption}`, init)