使用 Apps Script API 的 Chrome 应用

Question

今天遇到了另一个障碍，在我编写用于记录用户项目时间的桌面 chrome 应用程序的道路上。

我想要做的（但失败了）是使用 Apps Script API 来访问一个谷歌表格，该表格保留了我想要在我的 Chrome 应用 UI 中填充下拉列表的信息（项目编号）。

更新： 我已经改写了这一点，以便直截了当并清楚我的问题是什么。

我似乎无法实现的是从我的 chrome 应用程序调用 Apps 脚本函数。我读过这个Execution API，但似乎仍然无法着色。由于某些原因，我在控制台中不断收到“未捕获的 ReferenceError：gapi 未定义”。

我设法做的是在开发者控制台中将 Apps 脚本和 Chrome 应用程序放在同一个项目名称下。不确定它是否需要，但认为它可能只对 1 个 Oauth2 请求有帮助。

我的脑袋是不是少了点什么？

任何帮助或想法将不胜感激。

这是我的 manifest.json

{
  "manifest_version": 2,
  "name": "TimeSheet",
  "description": "Small and easy desktop app for entering time spent on project files",
  "version": "0.1.0",
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "permissions": [
    "identity",
    "app.window.alwaysOnTop"
    ],
  "oauth2": {
    "client_id": "clientid.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive",
      "https://www.googleapis.com/auth/spreadsheets"
      
      ]
  },
  "key": "very long string"
}

这是在我的 main.js 中运行的 Oauth2 代码

//This code confirms Oauth2 for access to google drive and related files

window.onload = function(){
  
  document.querySelector("#Oauth2").addEventListener("click", function(){
    
    chrome.identity.getAuthToken({"interactive": true}, function(token){
      console.log(token);
      
    });
  });

};

// ID of the script to call. Acquire this from the Apps Script editor,
// under Publish > Deploy as API executable.
var scriptId = "blah";
// Create execution request.
var request = {
    'function': 'getProjectNumbers',
};

// Make the request.
var op = gapi.client.request({
    'root': 'https://script.googleapis.com',
    'path': 'v1/scripts/' + scriptId + ':run',
    'method': 'POST',
    'body': request
});
// Log the results of the request.
op.execute(function(resp) {
  if (resp.error && resp.error.status) {
    // The API encountered a problem before the script started executing.
    console.log('Error calling API: ' + JSON.stringify(resp, null, 2));
  } else if (resp.error) {
    // The API executed, but the script returned an error.
    var error = resp.error.details[0];
    console.log('Script error! Message: ' + error.errorMessage);
    if (error.scriptStackTraceElements) {
      // There may not be a stacktrace if the script didn't start executing.
      console.log('Script error stacktrace:');
      for (var i = 0; i < error.scriptStackTraceElements.length; i++) {
        var trace = error.scriptStackTraceElements[i];
        console.log('\t' + trace.function + ':' + trace.lineNumber);
      }
    }
  } else {
    // Here, the function returns an array of strings.
    var projectNumbers = resp.response.result;
    console.log('Project numbers in spreadsheet:');
    projectNumbers.forEach(function(name){
      console.log(name);
    });
  }
});

这是应用程序脚本代码：

var projectDatabaseKey = 'blah'; //Project Database Sheet spreadsheet key
var pprojectDatabaseSheet = 'Project Database'; //Project Database  Sheet spreadsheet sheet

//Function to revieve data of project numbers for drop down list
function getProjectNumbers() {
  return SpreadsheetApp
   .openById(projectDatabaseKey).getSheetByName(projectDatabaseSheet)
   .getRange("A2:A" + (SpreadsheetApp.openById(projectDatabaseKey).getSheetByName(projectDatabaseSheet).getLastRow()))
   .getValues();
}

我真的不确定如何使用 Oauth2 令牌以及如何将其应用于应用程序脚本。

更新

好的，我尝试在不同的庄园中调用应用程序脚本，我今天尝试的是使用 gapi-chrome-apps.js 库来完成 oauth2 工作。

现在我的问题是我收到了这个错误，这可能是我猜测的一系列问题：

发布https://www.googleapis.com/v1/scripts/blahblah:run404 ()

gapi.client.request@VM80 gapi-chrome-apps.js:105

getSheetsList@gapiCallback.js:17

（匿名函数）@gapiCallback.js:49

callbackWrapper @ VM80 gapi-chrome-apps.js:68

target.(匿名函数)@extensions::SafeBuiltins:19

safeCallbackApply @extensions::sendRequest:21

handleResponse @ extensions::sendRequest:72

这个错误来自 gapi-chrome-apps.js 脚本：

未捕获的 SyntaxError：JSON 中位置 0 处的意外标记 N

真的不知道是什么原因造成的，这是我更新的代码：

//get listof sheets in spreadsheet
function getSheetsList(){
  var scriptId = "blahblah";
  // Initialize parameters for function call.
  var sheetId = "blahblah";
  // Create execution request.
  var requests = {
      'function': 'getSheetNames',
      'parameters': [sheetId],
      'devMode': true   // Optional.
  };
  // Make the request.
  gapi.client.request({
      'root': 'https://script.googleapis.com',
      'path': 'v1/scripts/' + scriptId + ':run',
      'method': 'POST',
      'body': requests,
      'callback': printSheetsList
  });
}
// Log the results of the request.
function printSheetsList(resp) {
  if (resp.error && resp.error.status) {
    // The API encountered a problem before the script started executing.
    console.log('Error calling API: ' + JSON.stringify(resp, null, 2));
  } else if (resp.error) {
    // The API executed, but the script returned an error.
    var error = resp.error.details[0];
    console.log('Script error! Message: ' + error.errorMessage);
  } else {
    // Here, the function returns an array of strings.
    var sheetNames = resp.response.result;
    console.log('Sheet names in spreadsheet:');
    sheetNames.forEach(function(name){
    console.log(name);
    });
  }
}
//Prompts the user for authorization and then proceeds to 
function authorize(params, callback) {
  gapi.auth.authorize(params, function(accessToken) {
    if (!accessToken) {
      console.log("Error getting authorization");
    } else {
      callback();
    }
  });
}
function gapiIsLoaded() {
  var params = { 'immediate': true };
  if (!(chrome && chrome.app && chrome.app.runtime)) {
    params.scope = "https://www.googleapis.com/auth/drive";
    params.client_id = "blahblah";
    gapi.auth.init(authorize.bind(null, params, getSheetsList));
  } else {
    authorize(params, getSheetsList);
  }
}

Answer 1

使用传统的 GAPI 将不起作用，因为它会动态加载更多外部脚本和应用程序are not allowed to do that。

一种可能的解决方案是在sandboxed page 中运行GAPI 代码，这样可以克服远程代码限制。但是，这很麻烦，因为您需要使用 postMessage 来回传递数据。

另一种方法是尝试使用 Google 提供的库 gapi-chrome-apps.js，它适用于 Chrome 应用程序（并使用 chrome.identity 管理 OAuth） - 但请注意此评论：

如果不进行额外修改，此库可能不适合使用。

Answer 2

根据您的帖子，您根本没有定义gapi。可以这样加载

jQuery.getScript( "https://apis.google.com/js/api.js", onApiLoad );

其中onApiLoad 是您希望在加载gapi 时调用的函数。

对于您的代码，我会将以下代码包装在这样的函数中：

function onApiLoad() {
    // Make the request.
    var op = gapi.client.request({
        'root': 'https://script.googleapis.com',
        'path': 'v1/scripts/' + scriptId + ':run',
        'method': 'POST',
        'body': request
    });
    // Log the results of the request.
    op.execute(function(resp) {
      if (resp.error && resp.error.status) {
        // The API encountered a problem before the script started executing.
        console.log('Error calling API: ' + JSON.stringify(resp, null, 2));
      } else if (resp.error) {
        // The API executed, but the script returned an error.
        var error = resp.error.details[0];
        console.log('Script error! Message: ' + error.errorMessage);
        if (error.scriptStackTraceElements) {
          // There may not be a stacktrace if the script didn't start executing.
          console.log('Script error stacktrace:');
          for (var i = 0; i < error.scriptStackTraceElements.length; i++) {
            var trace = error.scriptStackTraceElements[i];
            console.log('\t' + trace.function + ':' + trace.lineNumber);
          }
        }
      } else {
        // Here, the function returns an array of strings.
        var projectNumbers = resp.response.result;
        console.log('Project numbers in spreadsheet:');
        projectNumbers.forEach(function(name){
          console.log(name);
        });
      }
    });

}

编辑：没有 jQuery，只有纯 JS

感谢the second answer in this post，下面的代码是$.getScript() 的纯JS 实现。它包含一个回调，所以下面的代码 sn-p 应该可以工作，假设您将代码包装在如上所述的函数中。

function getScript(source, callback) {
    var script = document.createElement('script');
    var prior = document.getElementsByTagName('script')[0];
    script.async = 1;
    prior.parentNode.insertBefore(script, prior);

    script.onload = script.onreadystatechange = function( _, isAbort ) {
        if(isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
            script.onload = script.onreadystatechange = null;
            script = undefined;

            if(!isAbort) { if(callback) callback(); }
        }
    };

    script.src = source;
}


getScript("https://apis.google.com/js/api.js", onApiLoad);