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

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

Configuration:

There is a Google Apps Script project deployed as Web App, access is limited to only domain user

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?

CodePudding user response：

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)".

Google Apps Script side:

Javascript side:

From:

To:

Note:

References: