CODEWITHSUNDEEP
google-apps-scriptgoogle-cloud-platformgoogle-chrome-extension
Waxim Corp
Waxim Corp

Reputation: 917

Chrome Extension (Manifest v3) call Google Apps Script deployed as WebApp with OAuth2

I have CORS Error when I fetch apps script with OAuth2 from Chrome Extension

Configuration:

Code as below:

function doGet(e) {

  var headers = {
    'Access-Control-Allow-Origin': '*'
  };
  var output = ContentService.createTextOutput(JSON.stringify({"code": 200, "data": "aaaa"})).setMimeType(ContentService.MimeType.JSON);
  output.setHeaders(headers);
  return output;
}

Chrome Extension, manifest v3:

{
    "manifest_version": 3,
    "name": "DEMO",
    "version": "1.0.0.3",
    "permissions": ["tabs", "identity", "identity.email", "https://www.googleapis.com/auth/script.webapp.deploy", "https://www.googleapis.com/auth/script.container.ui"],
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
      {
        "matches": ["https://*.google.com/*"],
        "run_at": "document_end",
        "js": ["jquery-3.6.0.min.js", "content.js"],
        "all_frames": false
      }
    ],
    "oauth2": {
      "client_id": "<PERSONAL_ID>.apps.googleusercontent.com",
      "scopes": ["https://www.googleapis.com/auth/script.webapp.deploy"]
    },
    "action": {
      "default_icon": {
          "16": "assets/alembic.png",
          "24": "assets/alembic.png",
          "32": "assets/alembic.png",
          "128": "assets/alembic.png"
        },
        "default_title": "DEMO",
        "default_popup": "popup.html"
    }
  }

And the background.js, the function call_appscript() is called when chrome.tabs.onUpdated is triggered

function call_appsscript() {

    chrome.identity.getAuthToken({ interactive: true }, function(token) {
        if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError);
          return;
        }
      
        // Fetch the URL of the web app
        const url = "https://script.google.com/a/macros/<DOMAIN>/s/<DEPLOYMENT_ID>/exec"
        const headers = new Headers({
          'Authorization': `Bearer ${token}`
        });
        const init = {
          method: 'GET',
          headers: headers,
        };
        fetch(url, init).then((response) => {
          console.log(response);
        }).catch((error) => {
          console.error(error);
        });
    });

}

Credentials are well configured (tutorial with manifest v2: https://developer.chrome.com/docs/extensions/mv2/tut_oauth/)`

Error : chrome-extension://xxx has been blocked by CORS policy

Another reference which did not help : How do i allow a CORS requests in my google script?

Upvotes: 1

Views: 531

Answers (1)

Tanaike
Tanaike

Reputation: 201553

In your script, how about the following modification?

Google Apps Script side:

function doGet(e) {
  var output = ContentService.createTextOutput(JSON.stringify({"code": 200, "data": "aaaa"})).setMimeType(ContentService.MimeType.JSON);
  return output;
}

Javascript side:

From:

const url = "https://script.google.com/a/macros/<DOMAIN>/s/<DEPLOYMENT_ID>/exec"
const headers = new Headers({
  'Authorization': `Bearer ${token}`
});
const init = {
  method: 'GET',
  headers: headers,
};
fetch(url, init).then((response) => {
  console.log(response);
}).catch((error) => {
  console.error(error);
});

To:

const token = "###"; // Please set your access token.

const url = "https://script.google.com/a/macros/<DOMAIN>/s/<DEPLOYMENT_ID>/exec?access_token=" + token;
fetch(url)
.then((response) => response.json())
.then(res => console.log(res))
.catch((error) => {
  console.error(error);
});

  • By this modification, the following value is obtained in the log.

      {"code": 200, "data": "aaaa"}

Note:

  • In this case, it supposes that you have already had permission for accessing Web Apps. Please be careful about this.

  • In the case of a request to Web Apps, please include the scope of Drive API in your access token.

  • When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.

  • You can see the detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".

References:

Upvotes: 1

Related Questions