Как интегрировать Google Sheet в расширение Chrome - PullRequest
Новая
       1

Как интегрировать Google Sheet в расширение Chrome

3 голосов
/ 02 апреля 2019

Я успешно получил токен. Вот шаги, которые я пытался использовать OAuth.

  1. Создайте свой 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
   }

  2. Client_ID доступен в https://console.developers.google.com.

enter image description here

  1. Вам потребуется создать учетные данные идентификатора клиента OAuth и выбрать Chrome App в качестве типа приложения. Убедитесь, что идентификатор приложения похож на идентификатор расширения. Затем скопируйте сгенерированный clientID. Я включил API Sheets из консоли.

enter image description here

enter image description here

Сгенерировано clientID.

enter image description here

  1. Вот 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>

Это журнал для токена, он успешно получен.

enter image description here

На данный момент моя проблема заключается в том, как использовать клиент GAPI для доступа к электронным таблицам. Я также попробовал подход из этого сообщения github , и в конце концов я столкнулся с этой ошибкой:

Доступ к XMLHttpRequest по адресу https://apis.google.com/js/client.js' из источника 'chrome-extension: // fajgeimckmkdokmdbpkglamjpfcekcpp' имеет был заблокирован политикой CORS: заголовок «Access-Control-Allow-Origin» отсутствует присутствует на запрашиваемом ресурсе.

Может ли кто-нибудь обойти это?

1 Ответ

2 голосов
/ 05 апреля 2019

Я решил свою проблему !!!

Я пропустил эту часть документации OAuth2: аутентификация пользователей с помощью Google . Я так глуп, хахаха!

Хорошо, вот как я интегрирую Google Sheets в свое расширение. Я использовал этот метод для начального: 

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

Я успешно зарегистрировал данные из моего запроса.

enter image description here

Готово!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...