个人中心
gpt4 book ai didi

google-chrome - 如何将 Google Sheet 集成到 Chrome 扩展

转载 作者：行者123 更新时间：2023-12-01 12:07:09 27 4
gpt4 key购买 nike

我成功检索到 token 。以下是我尝试使用 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 购买.

    • enter image description here
  • 您需要创建 OAuth 客户端 ID 凭据并选择 Chrome 应用程序作为应用程序类型。确保应用程序 ID 与扩展程序的 ID 相似。然后复制生成的clientID .我已经从控制台启用了 Sheets API。

    • enter image description here

    enter image description here

    已生成 clientID .

    enter image description here
  • 这是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>

    这是 token 的日志，已成功检索。

    enter image description here

    目前，我的问题是如何使用 GAPI 客户端访问电子表格。我也尝试过此方法 github post最终我遇到了这个错误:

    Access to XMLHttpRequest at 'https://apis.google.com/js/client.js' from origin 'chrome-extension://fajgeimckmkdokmdbpkglamjpfcekcpp' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.



    任何人都可以解决这个问题吗？

    最佳答案

    我解决了我的问题!!!

    我忽略了文档的这一部分 OAuth2: Authenticate Users with 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

    完毕!

    关于google-chrome - 如何将 Google Sheet 集成到 Chrome 扩展，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55477723/

    27 4 0
    文章推荐： java - 生成的 JSON 格式错误
    文章推荐： java - 用引用变量封装数组
    文章推荐： java - MongoDB - 在内存中保存 DBCursor 时对数据库进行更改
    文章推荐： java - 服务器启动时的 spring 缓存
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com