Chrome Extension error: gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy using React and Webpack

Question

I am developing a google chrome extension and need to edit and see the list of calendar events. I am using the google Calendar Api and receiving gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy. I tried to whitelist the localhost address on the OAuth Client google api Console but not rectified. Using webpack as a bundler. How can i tackle this error and I have seen some that gapi is incompatible with chrome extension if that's the case how can i read and edit the events using chrome extension.

Answer 1

Answer:

The gapi client can not be used inside a Chrome extension, but you can instead use an Apps Script Web App to obtain Calendar events.

Workaround:

For multiple reasons the workaround for this can get a little complicated so I'll break this down into steps and explain the process.

The Beginning:

The first thing you will want to do is set up an Apps Script web app. For th example, I will just have the Web App return the name of a Calendar event but you can modify this for your purposes.

function doGet(e) {
  var callback = e.parameter.callback; // jQuery callback parameter
  var cal = CalendarApp.getCalendarsByName("primary"); // get calendar
  var eventId = e.parameter.eventId;

  var content = {
    "title": cal.getEventById(iCalId).getTitle();
  }; 

  var returnStr = callback + '(' + JSON.stringify(content) + ')';

  return ContentService.createTextOutput(returnStr)
           .setMimeType(ContentService.MimeType.JAVASCRIPT);
}

The idea of the above code is that you can fetch the Web App and serve the results back to your Chrome Extension as JavaScript. This is done to circumvent any CORS policies which may restrict your Web App, as well as unnecessary HTML padding provided by the Web App UI interface.

From here you will want to deploy the Web App for use.

You can do this from the Publish > Deploy as web app... menu item, and selecting Execute the app as: me and Who has access to the app: Anyone, even anonymous.

Including jQuery and the Project Manifest:

The next thing you'll want to do is download jQuery.js to be inclided in your project. You can download it from Google's CDN here. Inclide this in your project folder and update your manifest accordingly:

// ...
"permissions": ["https://script.google.com/a/domain/macros/s/script-url/*"]
"background": {
  "scripts": ["background.js", "jquery.js"]
},
// ...

Calling the Web App:

Now from background.js in your Chrome extension you can call your web app using the getJSON() function of the inclided jQuery file:

function myFunc() {
  const url = "https://script.google.com/a/domain/macros/s/script-url/exec"
  // ...
  var eventToGetTitleOf = "some-event-id";
  if (someLogic) {
    callWebApp(url, eventToGetTitleOf);
  }
}

function callWebApp(call, eventId) {
  call = call + "?eventId=" + eventId;

  $.getJSON(call + "&callback=?", function(response){
    callback(response);
  });
}

function callback(response){
  if (!response) {
    return;
  }
  var title = response["title"];    
  console.log("The calendar event is called " + title);
}

In the above example, the definitions are as follows:

• myFunc() - a generic function which has extension logic in it.

  • url - a const of String type, the URL of the Web App which was deployed in the previous step.
  • eventToGetTitleOf - a variable which contains the event ID of an event in your primary Calendar. This is the event you wish to get the title of.

• callWebApp() - a function which calls the web app using the getJSON() method of jQuery. It takes the url of the web app and the event ID of the event to search for as parameters.

  • call - the URL of the web app. This is appended with the string "?eventId=" + eventId so that this is passed as a URL parameter to hte web app, to be picked up by e.parameter.eventId.
  • getJSON(call + "&callback=?", ...) - calls the web app URL with the set parameters and sets up a handler for the callback when a response from the web app is received.

• callback() - a function which handles the response from the getJSON() method. Returns nothing if the response is undefined, but prints to log the title received in the response if something was received.

Rundown of the Full Workflow:

• From the Chrome Extension, an Apps Script web app is called.
• The URL of this web app consists of the base url, along with URL parameters which are handled by the doGet(e) of the web app.
• When the Web App receives the request, it extracts the callback and eventId parameters and searches the primary Calendar for an event with the given eventId.
• The Web App then gets the event's title and returns it inside a JSON structure, stringified and embedded as a text/javascript object for processing by the Chrome extension's callback method.
• The callback method is called when a response is received, and the returned data in the response is printed to the console.

References:

• jQuery.getJSON() | jQuery API Documentation
• Hosted Libraries - jQuery | Google Developers
• jquery.min.js