Compatibility with Chrome's Manifest V3 extension platform

[dotproto]

Devs, what features GAPI you're using an your extensions?

If you are an extension developer affected by this issue, please describe what GAPI capabilities you are using and what alternative approaches you've considered.

Issue description

Chrome is in the process of transitioning extension to a new platform we commonly refer to as Manifest Version 3 (MV3). This new platform introduces a number of changes to improve the security and privacy of extension users. One of the major changes coming to the platform is that extensions will no longer be allowed to run code retrieved from remote servers. In other words, extensions won't be able to fetch https://apis.google.com/js/api.js as described in the Getting Started guide.

On the Chrome extension team, we have been advising developers to package third-party libraries with their extensions in order to work around this limitation. I'm not personally familiar with the JS GAPI library, so I'd like to ask whether this guidance is appropriate for this library or whether we need to explore alternative approaches.

EDIT 2021-04-02: Grammar fixes.
EDIT 2021-04-05: Added an intro section
EDIT 2021-05-19: Chromium issue 1164452 is also related.

[sergentj]

Hi, no, it's not possible for third-party developers to bundle GAPI with their applications.

…

[kospl]

This is known bug, circa 2012:
#586
#312
#261
#64

[Arthur404]

https://www.google.com/recaptcha/api.js - here are the comments that this code DO NOT COPY AND PASTE.
It's not possible to add a recaptcha to the extension Manifest V3 if don't allowed to add third party code

[thdoan]

I hope that GAPI and Extensions teams can agree on a vetted list of internal libraries that can be remotely hosted if a bundling solution does not come to fruition.

[ccdunder]

It looks like this is also being tracked in crbug here.

[luciferpd13]

Hi @dotproto Any Update on this ? We need some solution for this. Also is Google thinking something for remote hosting code, we have to deploy our changes according to requirements and google review process is very slow. we can't deploy it to chrome web store again and again

Chrome is in the process of transitioning to extension developers to a new extension platform called Manifest Version 3 (MV3). ThisNew platform introduces a number of changes to improve the security and privacy of extension users. One of the major changes coming to the platform is that extensions will no longer be allowed to run code retrieved from remote servers. In other words, extensions won't be able to fetch and https://apis.google.com/js/api.js as described in the Getting Started guide.

On the Chrome extension team, we have been advising developers to package third-party libraries with their extensions in order to work around this limitation. I'm not personally familiar with the JS GAPI library, so I'd like to ask whether this guidance it's appropriate for this library or whether we need to explore alternative approaches.

[thdoan]

afaik GAPI isn't a framework that can be packaged into a local file.

…

On Thu, Apr 1, 2021, 5:30 AM Prasanna Dubey ***@***.***> wrote: Hi @dotproto <https://github.com/dotproto> Any Update on this ? We need some solution for this. Also is Google thinking something for remote hosting code, we have to deploy our changes according to requirements and google review process is very slow. we can't deploy it to chrome web store again and againg Chrome is in the process of transitioning to extension developers to a new extension platform called Manifest Version 3 (MV3). ThisNew platform introduces a number of changes to improve the security and privacy of extension users. One of the major changes coming to the platform is that extensions will no longer be allowed to run code retrieved from remote servers. In other words, extensions won't be able to fetch and https://apis.google.com/js/api.js as described in the Getting Started <https://github.com/google/google-api-javascript-client/blob/master/docs/start.md> guide. On the Chrome extension team, we have been advising developers to package third-party libraries with their extensions in order to work around this limitation. I'm not personally familiar with the JS GAPI library, so I'd like to ask whether this guidance it's appropriate for this library or whether we need to explore alternative approaches. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#713 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA7LRZ4JU6OF533GZAPXNMTTGRRPPANCNFSM4WAHPP6Q> .

[luciferpd13]

afaik GAPI isn't a framework that can be packaged into a local file.
…
On Thu, Apr 1, 2021, 5:30 AM Prasanna Dubey @.***> wrote: Hi @dotproto https://github.com/dotproto Any Update on this ? We need some solution for this. Also is Google thinking something for remote hosting code, we have to deploy our changes according to requirements and google review process is very slow. we can't deploy it to chrome web store again and againg Chrome is in the process of transitioning to extension developers to a new extension platform called Manifest Version 3 (MV3). ThisNew platform introduces a number of changes to improve the security and privacy of extension users. One of the major changes coming to the platform is that extensions will no longer be allowed to run code retrieved from remote servers. In other words, extensions won't be able to fetch and https://apis.google.com/js/api.js as described in the Getting Started https://github.com/google/google-api-javascript-client/blob/master/docs/start.md guide. On the Chrome extension team, we have been advising developers to package third-party libraries with their extensions in order to work around this limitation. I'm not personally familiar with the JS GAPI library, so I'd like to ask whether this guidance it's appropriate for this library or whether we need to explore alternative approaches. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#713 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA7LRZ4JU6OF533GZAPXNMTTGRRPPANCNFSM4WAHPP6Q .

So what's the solution ?

[kospl]

@thdoan whitelist is SO away from web standards, I don't think Google will like this idea

[thdoan]

I hope they come up with a solution that allows us to continue using GAPI in Chrome MV3 extensions.

…

On Fri, Apr 2, 2021, 2:32 AM Kostiantyn Plakhotia ***@***.***> wrote: @thdoan <https://github.com/thdoan> whitelist is SO away from web standards, I don't think Google will like this idea — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#713 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA7LRZ35EKWWDERRHUJV4TTTGWFLZANCNFSM4WAHPP6Q> .

[dotproto]

@kospl, @Arthur404, @thdoan, @luciferpd13, what capabilities of the GAPI are you currently leveraging in your Manifest V2 extensions? What, if any, alternatives have you considered to using this library?

[luciferpd13]

@dotproto This library doesnot support Google Location API's . Its very important.

[luciferpd13]

Due to New CSP Policy. None alternatives are working

[thdoan]

@dotproto I'm using GAPI for Google Sheets integration; there is currently no GAPI replacement that I'm aware of. If Google is willing to provide a local GAPI library that we can download and package with our extensions, I'm all for it.

[zamiang]

Based on some earlier threads linked above, I have successfully made requests to Google APIs from MV3 extensions using the approach below. This is meaningfully less convenient that using gapi, but it does work 🤷‍♂️

In short, you log the user in with fetchToken() and then use that token to make further requests (see the tasks API example at the end).

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
const oauth2SignIn = (additionalScope?: string) => {
  // NOTE: this needs to be a form: https://stackoverflow.com/questions/48925165/cors-issue-with-google-oauth2-for-server-side-webapps

  // Create element to open OAuth 2.0 endpoint in new window.
  const form = document.createElement('form');
  form.setAttribute('method', 'GET');
  form.setAttribute('action', oauth2Endpoint);
  const params = getParams();
  if (additionalScope) {
    params.scope = `${params.scope} ${additionalScope}`;
  }

  // Add form parameters as hidden input values.
  for (const p in params) {
    const input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }
  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  return form.submit();
};

// Parameters to pass to OAuth 2.0 endpoint (I recommend having these in some config file)
const getParams = () => ({
  client_id: config.GOOGLE_CLIENT_ID,
  redirect_uri: config.REDIRECT_URI,
  scope: config.GOOGLE_SCOPES.join(' '),
  state: window.location.pathname,
  include_granted_scopes: 'true',
  response_type: 'token',
});

const fetchToken = async () => {
  const params = getParams();
  // localStorage is used for convenience and speed and is not required
  const currentAccessToken = localStorage.getItem('oauth2');
  const currentScope = localStorage.getItem('scope');

  if (currentAccessToken) {
    // Test the auth token with an endpoint to make sure it is still valid
    const result = await fetchSelf(currentAccessToken); // use whatever works for you, this hits the /me people endpoint i think
    if (result.id) {
      return {
        accessToken: currentAccessToken,
        scope: currentScope || params.scope,
      };
    }
  }

  const fragmentString = location.hash.substring(1);

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  const urlParams: any = {};
  const regex = /([^&=]+)=([^&]*)/g;
  let m = null;
  while ((m = regex.exec(fragmentString))) {
    urlParams[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(urlParams).length > 0) {
    localStorage.setItem('oauth2', urlParams.access_token);
    localStorage.setItem('scope', urlParams.scope);
    window.location.hash = '';
    if (urlParams.state) {
      history.pushState('', 'Dashboard', urlParams.state);
    }
  } else {
    oauth2SignIn();
  }
  return {
    accessToken: urlParams.access_token,
    scope: urlParams.scope,
  };
};

// Example API request using the accessToken above
const taskResponse = await fetch(
  `https://tasks.googleapis.com/tasks/v1/lists/${taskListId}/tasks/${taskId}`,
  {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
      authorization: `Bearer ${accessToken}`,
    },
    body: JSON.stringify(body),
  },
);