如何将 Google 表格集成到 Chrome 扩展程序答案

【问题标题】：How to integrate Google Sheet to Chrome Extension如何将 Google 表格集成到 Chrome 扩展程序
【发布时间】：2021-03-15 23:46:19
【问题描述】：

我成功检索到令牌。以下是我尝试使用 OAuth 的步骤。

创建你的 manifest.json

 {
     "name": "Sample Extension",
     "version": "1.0",
     "description": "Hello World",
     "permissions": ["identity", "https://docs.google.com/spreadsheets/"],
     "author": "Jess",
     "background": {
       "scripts": ["background.js"],
       "persistent": true
     },
     "content_scripts": [{
       "matches": ["file:///*"],
       "js"     : ["popup.js"]
     }],
     "browser_action": {
       "default_popup": "popup.html",
       "default_icon": "images/get_started16.png",
       "default_title": "This is a sample extension"
     },
    "oauth2": {
       "client_id": "client_ID",
       "scopes": [
           "https://www.googleapis.com/auth/spreadsheets"
      ]},
     "content_security_policy": "script-src 'self' 'unsafe-eval' https://apis.google.com/; object-src 'self'",
     "manifest_version": 2
   }

Client_ID 在https://console.developers.google.com 中可用。

您需要创建 OAuth 客户端 ID 凭据并选择 Chrome 应用程序作为应用程序类型。确保应用程序 ID 与扩展程序的 ID 相似。然后复制生成的clientID。我已经从控制台启用了 Sheets API。

生成clientID。

这是background.js：

   chrome.identity.getAuthToken({ 'interactive': true }, getToken);

   function getToken(token) {
     console.log('this is the token: ', token);
   }

我将在此处添加其他文件：

pop.js

function popup(e) {
    var henlo = "I\'m here for you :)";
    alert("Him : " +henlo );
}
  var plusBtn = document.querySelector('#clickMe');
  plusBtn.addEventListener('click', popup);

pop.html

  <!DOCTYPE html>
  <html>
    <head>
      <style>
        body {
          width: 100px;
          height: 100px
        }
        button {
          background-color:#577FC6;
          color: #ffffff;
          margin:0 auto;
          border: 1px solid #000000;
          display:block;
          width:80px;
        }
      </style>
    </head>
    <body>
      <span>Try and click the button for surprise :) </span>
      <button id="clickMe">Click Me!</button>
      <script src="popup.js"></script>
    </body>
  </html>

这是令牌的日志，已成功检索。

目前，我的问题是如何使用 GAPI 客户端访问电子表格。我也试过这个github post的方法，最终我遇到了这个错误：

在“https://apis.google.com/js/client.js”访问 XMLHttpRequest 从原产地 'chrome-extension://fajgeimckmkdokmdbpkglamjpfcekcpp' 有被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头存在于请求的资源上。

有人可以解决这个问题吗？

【问题讨论】：

我也从documentation 尝试了这种方法，为了访问 Google 帐户的安全目的，它需要我的扩展程序被发布/列入白名单。我仍处于我的应用程序的测试阶段，所以我还不打算在 CWS 中注册我的扩展程序。

标签： google-chrome google-chrome-extension google-sheets

【解决方案1】：

我的问题解决了！！！

我忽略了文档OAuth2: Authenticate Users with Google 的这一部分。我太傻了哈哈哈！

好的，这就是我将 Google 表格集成到我的扩展程序的方式。我用这个方法初始：

 GET https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range}

这是我更新的manifest.json：

 {
     "name": "Sample Extension",
     "version": "1.0",
     "description": "Hello World",
     "permissions": ["identity", "https://docs.google.com/spreadsheets/"],
     "author": "Jess",
     "background": {
       "scripts": ["background.js"],
       "persistent": true
     },
     "content_scripts": [{
       "matches": ["file:///*"],
       "js"     : ["popup.js"]
     }],
     "browser_action": {
       "default_popup": "popup.html",
       "default_icon": "images/get_started16.png",
       "default_title": "This is a sample extension"
     },
    "oauth2": {
       "client_id": "client_ID",
       "scopes": [
           "https://www.googleapis.com/auth/spreadsheets",          
           "https://www.googleapis.com/auth/drive",
           "https://www.googleapis.com/auth/drive.readonly",
           "https://www.googleapis.com/auth/drive.file",
           "https://www.googleapis.com/auth/spreadsheets.readonly"
      ]},
     "content_security_policy": "script-src 'self' 'unsafe-eval' https://apis.google.com/; object-src 'self'",
     "manifest_version": 2
   }

这是我更新的background.js：

   chrome.identity.getAuthToken({ 'interactive': true }, getToken);

   function getToken(token) {
     console.log('this is the token: ', token);
  let init = {
    method: 'GET',
    async: true,
    headers: {
      Authorization: 'Bearer ' + token,
      'Content-Type': 'application/json'
    },
    'contentType': 'json'
  };
  fetch(
      https://sheets.googleapis.com/v4/spreadsheets/{spreadsheetId}/values/{range},
      init)
      .then((response) => response.json())
      .then(function(data) {
        console.log(data)
      });
   }

我已成功记录了我的请求中的数据。

完成！

【讨论】：

我遇到了同样的问题。感谢您提供详细的屏幕截图回复。

【解决方案2】：

对我来说，我必须在清单中将 "https://sheets.googleapis.com/*" 添加到 "permissions"。

【讨论】：