Question

我尝试使用Chrome Identity API通过Chrome扩展程序从Google表格中读取数据，但我甚至无法获得访问令牌。这是我到目前为止所做的：

在Google API控制台中创建了OAuth 2客户端ID。输入＆＃34; http://localhost＆＃34;和＆＃34; https://localhost＆＃34;在授权的JavaScript源中（因为我的扩展目前在localhost中）。
更新了Chrome扩展程序manifest.json以包含：

{
  "permissions": [
    "identity",
    "https://docs.google.com/spreadsheets/"
  ],
  "oauth2": {
    "client_id": "<enter-oauth2-client-id-here>",
    "scopes": [
      "https://docs.google.com/spreadsheets"   
    ]
  }
}

在后台脚本中添加了以下代码

console.log("here"); // this point is hit

var ci = chrome.identity;
ci.getAuthToken({ interactive: true }, function(token) {
    console.log("token: " + token); // none of this is hit
    if (chrome.runtime.lastError) {
        console.log(chrome.runtime.lastError);
        return;
    }
    access_token = token;
});

此时，当我重新加载扩展程序时，Chrome会询问我的凭据（ci.getAuthToken({ interactive: true } ...)行已执行），但是一旦成功提供凭据，就不会发生任何其他情况。我想永远不会检索令牌，这就是function(token){...}中没有任何代码被执行的原因。后台控制台显示＆＃34; here＆＃34;消息，但没有别的（没有错误，警告或任何东西）。

注意：在我manifest.json的{{1}}下，我使用了Google API控制台生成的OAuth2客户端ID。

我错过了什么？

Answer 1

我认为您的scope for spreadsheet不正确。它应该https://www.googleapis.com/auth/spreadsheets基于documentation。

所以改变

"https://docs.google.com/spreadsheets"

到

"https://www.googleapis.com/auth/spreadsheets"

Answer 2

我成功检索了令牌。这是我尝试使用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 APP作为应用程序类型。确保应用程序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 3

也许为时已晚，但是如果有人偶然发现了这篇文章：关于您的CORS政策问题，您需要使用content_security_policy文件中的manifest.json，就像这样：

"content_security_policy":  "script-src 'self' https://apis.google.com; object-src 'self'"

通过Chrome Identity API从Chrome扩展程序访问Google表格

3 个答案: