Question

我成功检索了令牌。这是我尝试使用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与扩展名相似。然后复制生成的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”标头存在于请求的资源上。

有人可以解决此问题吗？

Answer 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)
      });
   }

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

完成！

Answer 2

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

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

2 个答案: