Javascript 如何在chrome扩展中使用Google API？

我现在正在搜索几个小时如何在chrome扩展中使用GoogleAPI。我所要做的就是解析一个网站的内容，并将其作为一个新事件插入谷歌日历。我得到了解析和一切，但似乎不可能在Chrome扩展中使用GoogleAPI。我只是试图在我的chrome扩展中单击按钮时编写一个示例事件，但它一直拒绝加载Google API，并出现以下错误：

Refused to load the script 'https://apis.google.com/js/platform.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

My manifest.json：

{
    "manifest_version": 2,

    "name": "DVB2Calender",
    "description": "This extension will export the current viewed schedule to your Google Calender.",
    "version": "1.0",

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

    "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html"
    },
    "permissions": [
     "activeTab"
     ]
}

我的弹出窗口.html

DVB2压延机
DVB到压延机
将此日历导出到谷歌日历！

My popup.js：

document.addEventListener('DOMContentLoaded', function() {
    var checkPageButton = document.getElementById('exportToCalender');
    checkPageButton.addEventListener('click', function() {

        chrome.tabs.getSelected(null, function(tab) {
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://apis.google.com/js/client.js?onload=callbackFunction";
            head.appendChild(script);

            d = document;
            var download = d.getElementsByClassName('icon-link ico-calender')[6];
            var request = makeHttpObject();
            request.open("GET", download, true);
            request.send(null);
            request.onreadystatechange = function() {
                if (request.readyState === 4) {
                    var resultText = request.responseText;
                    array = CSVToArray(resultText, ":");
                    alert(resultText);

                    var resource = {
                        "summary": "Appointment",
                        "location": "Somewhere",
                        "start": {
                        "dateTime": "2011-12-16T10:00:00.000-07:00"
                        },
                        "end": {
                        "dateTime": "2011-12-16T10:25:00.000-07:00"
                        }
                    };
                    var request = gapi.client.calendar.events.insert({
                    'calendarId': 'primary',
                    'resource': resource
                    });
                    request.execute(function(resp) {
                    console.log(resp);
                    });
                }
            };
        }
    }
}

---

看起来您刚刚忘记重新加载扩展包。请注意，每次更改扩展代码时，都可以在此处重新加载

chrome://extensions/

是代码更改生效所必需的

要检查客户端脚本是否准备好使用，建议添加如下onload回调：

window.callbackFunction = function(){
  alert('client.js ready')
  // here goes google client api calls
}

---

onload回调函数的名称由脚本url中的

onload

参数指定。

我使用reactJS制作了一个chrome扩展，使用Google日历API创建日历事件。我已经粘贴了下面的链接，希望它能帮助人们了解如何正确地实现上述用例

（如果这对你有帮助，一定要启动回购协议）

要使用google calendars API，先决条件是首先配置Oauth2，因为google Calendar API需要auth令牌。清单文件必须包含配置OAuth的更改

在chrome扩展名的清单文件中配置Oauth2之后，以下函数将帮助您调用创建事件

function createMeeting() {
  chrome.identity.getAuthToken({ interactive: true }, function (token) {
    console.log(token);

    
    //details about the event
    let event = {
      summary: 'Google Api Implementation',
      description: 'Create an event using chrome Extension',
      start: {
        'dateTime': '2015-05-28T09:00:00-07:00',
        'timeZone': 'America/Los_Angeles'
      },
      end: {
        'dateTime': '2015-05-28T09:00:00-07:00',
        'timeZone': 'America/Los_Angeles'
      }
    };

    let fetch_options = {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(event),
    };

    fetch(
      'https://www.googleapis.com/calendar/v3/calendars/primary/events',
      fetch_options
    )
      .then((response) => response.json()) // Transform the data into json
      .then(function (data) {
        console.log(data);//contains the response of the created event
      });
  });
}

确保清单文件包含以下条目：

"oauth2": {
    "client_id": "your id",
    "scopes": [
      "profile email",
      "https://www.googleapis.com/auth/calendar",
      "https://www.googleapis.com/auth/calendar.readonly"
    ]
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "permissions": [
      "identity",
      "identity.email"
    ]

---

不确定这是否会有什么不同，但请尝试更改

https://apis.google.com/
by
https://apis.google.com
内容安全策略中的
（不带最后一个斜杠）
。在我发现的示例中，最后一个斜杠从未使用过。另外，您的
popup.js
文件中的所有代码（包括
chrome.tabs.getSelected
listener）都会在弹出窗口中运行：您可能需要一个内容脚本，我会尝试！我认为，正如Michal在回答中提到的，重新加载也存在问题。昨天我花了很多时间试图让它与内容脚本一起工作，但最终放弃了，今天我将再次尝试。虽然这个链接可能会回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。代码示例可能非常有用。如果链接页面发生更改，仅链接的响应可能无效。@borchvm感谢您的建议。我已经完成了你的建议，并做了必要的更改。这将使你对身份验证流的控制有限。用户将只能选择Chrome用户帐户，而不能选择任何google帐户。