How can I use the Google API in a chrome extension?

Question

I'm now searching for hours how I can use the Google API in a chrome extension. All I want to do is to parse the contents of a website and insert it as a new event to Google Calender. I got the parsing and everything, but it seems to be impossible to use the Google API inside a Chrome extension. I'm just trying to write an example event when clicking the button in my chrome extension, but it keeps refusing to load the Google API with this error:

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"
     ]
}

My popup.html

<!doctype html>
<html>
  <head>
    <title>DVB2Calender</title>
    <meta http-equiv="Content-Security-Policy" content="default-src *;">
    <script src="popup.js"></script>
    <script src="https://apis.google.com/js/platform.js" async defer>
    </script>
  </head>
  <body>

    <h1>DVB to Calender</h1>
    <button id="exportToCalender">Export this calender to Google Calender!</button>

  </body>
</html>

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

Answer 1

I have made a chrome extension using reactJS, making use of Google Calendar API for creating calendar events. I have pasted the link below, hope that it might help people to get an idea of how to implement the above use case properly.

Project Link (Do star the repo, If this helps you)

For using google calendars API, a pre requisite is to configure Oauth2 first because Google Calendar Api requires auth token. Your manifest file must contain changes to configure OAuth.

After configuring Oauth2 inside the manifest file of chrome extension, the following function will help you make a call to create an event.

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

Make sure your manifest file has the following entries:

"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"
    ]

To breakdown:

For using Google API in chrome extension, first thing you need to do is to log-in. As so many "security restriction" nowadays, you can't import the that API js like a website anymore. Instead, you need to use the browser api to grant the access, aka chrome.identity.getAuthToken ( https://developer.chrome.com/docs/extensions/reference/identity/#method-getAuthToken ). But to get this browser api works, you still need to do bunch of other works, eg manifest, packing extension, etc. But you can learn those things and why those are related with Google by searching this browser api.
After STEP 1 success, you will get a token with chrome.identity.getAuthToken . Now you need to know what to do to request Google APIs with this token. Like the example in this page ( https://developers.google.com/streetview/publish/first-app ), we can see the token can be sent in header like this authorization: Bearer YOUR_ACCESS_TOKEN . So now we know we can use fetch / XMLHttpRequest with this header to get the Google API works for the user.

Answer 2

It looks like you just forgot to reload extension package. Note, that every time change is made to the extension code, reload which can be done here chrome://extensions/ is necessary to code changes take effect.

To check if the client script is ready to be used, it is suggested to add onload callback like this:

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

Name of the onload callback function is specified by onload parameter in script url.

How can I use the Google API in a chrome extension?

Question

2 answers

solution1
2 2020-10-26 06:52:05

solution2
1 2019-05-02 08:53:24

How can I use the Google API in a chrome extension?

Question

2 answers

solution1 2 2020-10-26 06:52:05

solution2 1 2019-05-02 08:53:24

solution1
2 2020-10-26 06:52:05

solution2
1 2019-05-02 08:53:24