Uncaught ReferenceError: не задано значение gapi

Question

Я занимаюсь разработкой расширения для Chrome и столкнулся с проблемой:

"Uncaught ReferenceError: gapi не определен".

Я отправляю запрос XML в gapi. Загружается, но при использовании функции gapi.auth2.authorize выдает вышеуказанную ошибку.

Я новичок в этом и хотел бы знать, если я делаю что-то не так, или способы успешного решения этой проблемы.

background.js

var CLIENT_ID = "139751156265-mvroahocc1d4g7e848q44f1uqk0e78mc.apps.googleusercontent.com";

var SCOPES = [
  'https://spreadsheets.google.com/feeds',
  'https://www.googleapis.com/auth/spreadsheets',
  'https://docs.google.com/feeds'
];
var x;

xhrWithAuth();

function xhrWithAuth() {
  console.log("xhrWithAuth");
  var access_token;
  var retry = true;
  getToken();

  function getToken() {
    chrome.identity.getAuthToken({
      'interactive': true
    }, function(token) {
      if (chrome.runtime.lastError || !token) {
        console.log('getAuthToken', chrome.runtime.lastError.message);
        // callback(chrome.runtime.lastError);
        return;
      }
      console.log(token);
      x = new XMLHttpRequest();
      x.open('GET', 'https://apis.google.com/js/client.js');
      x.setRequestHeader('Authorization', 'Bearer ' + token);
      x.onload = function() {
        console.log(x.response);
      };
      x.send();
      setTimeout(function() {
        window.gapi_onload = checkAuth(token, x);
      }, 5000);
    });
  }
};

function checkAuth(test, x) {
  console.log("inside checkAuth", new Date());
  gapi.auth2.authorize({
    'client_id': CLIENT_ID,
    'scope': SCOPES.join(' '),
    'immediate': true
  }, handleAuthResult);
}

function handleAuthResult(authResult) {
  console.log("handleAuthResult", new Date());
}

manifest.json

{
  "name": "Daca",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Update spreadsheet on user Submit",
  "browser_action": { },
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": ["tabs", "[URL which I am using]", "https://apis.google.com/js/client.js", "https://accounts.google.com/o/oauth2/token", "identity", "https://content-sheets.googleapis.com/v4/spreadsheets/*"],
  "content_scripts": [{
    "matches": ["[URL which I am using]"],
    "js": ["contentscript.js"],
    "run_at": "document_start"
  }],
  "oauth2": {
    "client_id": "[my client_ID]",
    "scopes": [
      "https://www.googleapis.com/auth/spreadsheets"
    ]
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval' https://apis.google.com; object-src 'self'"
}

Answer 1

Хотя верно, что вы извлекаете файл gapi с помощью XMLHttpRequest, простое извлечение не сделает его код доступным для использования. Вы должны загрузить его на фоновой странице. Есть несколько способов сделать это. Например:

Плохой способ (используя eval):

x.onload = function() {
    if (x.status == 200) {
        eval(x.response);  //BAD WAY

        //rest of code that uses gapi ...
    }
};

Лучший способ (с использованием тега <script>):

x.onload = function() {
    if (x.status == 200) {
        var myScript = document.createElement('script');
        myScript.innerHTML = x.response;
        document.body.appendChild(myScript);

        //rest of code that uses gapi...
    }

};

В любом случае, ни один код, использующий gapi, не будет работать до тех пор, пока не завершится функция onload (которая является асинхронной), поэтому вы можете захотеть включить весь связанный код в эту функцию или реструктурировать свой код.