How can I query Google APIs using fetch/XHR calls in a Google Chrome extension?-CodePudding

I am developing a Google Chrome extension that interacts with Google Sheets. I am already able to retrieve an OAuth 2.0 token by letting my user sign into their Google account, and this token allows me to access the Google Sheets API. In particular, I can succesfully reproduce the code user Parth Kapadia provides in their Stackoverflow answer here. This code allows me to create new Google Sheet file in my user's drive. However, I am unable to access any of the other functions of the Sheets API. In particular, the following code, which tries to change data in a spreadsheet,

data = {
    method: "POST",
    headers: {
        "Content-Type": "application/json",  
        Authorization: "Bearer "   TOKEN
    },
    body: JSON.stringify({
        requests: [{
            repeatCell: {
                range: {
                    startColumnIndex: 0,
                    endColumnIndex: 1,
                    startRowIndex: 0,
                    endRowIndex: 1,
                    sheetId: spreadsheetId
                },
                cell: {
                    userEnteredValue: {
                    "numberValue": 10
                },
            },
            fields: "\*"
        }
    }]
}
fetch("https://sheets.googleapis.com/v4/spreadsheets/"   spreadsheetId   "/batchUpdate", data)

where TOKEN is the token I have retrieved and spreadsheetId is the id of the spreadsheet in question, returns the error "Failed to load resource: the server responded with a status of 404 ()". I took this code from this blog article.

I have also tried accessing other Sheets API commands, for example, values.get, through the url

const url = "https://sheets.googleapis.com/v4/spreadsheets/"   spreadsheetId   "/values/A1:B2"

but this also returns an error (though apparently of a different nature; this is the error I get for values.get, and this is the error I get for batchUpdate). What is going on here? Essentially, I am asking if anyone has figured out how to successfully access the full Google Sheets API from a Chrome Extension, now that Google enforces Manifest v3 and the security policies coming with it. It seems that user Parth Kapadia figured out how to do it (as they mentions in their Stackoverflow post linked above), but they only share one piece of code, for the createSheet method, and I couldn't make any other methods work.

CodePudding user response：

Modification points:

In your script, a spreadsheet ID is used for both spreadsheet ID and sheet ID.
- About sheet ID, you can see it at the official document.
The endpoint is not correct.
data is not enclosed.

When these points are reflected in your script, how about the following modification?

Modified script:

const TOKEN = "###"; // Please set your access token.
const spreadsheetId = "###"; // Please set your spreadsheet ID.
const sheetId = "###"; // Please set your sheet ID.

const data = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer "   TOKEN
  },
  body: JSON.stringify({
    requests: [{
      repeatCell: {
        range: {
          startColumnIndex: 0,
          endColumnIndex: 1,
          startRowIndex: 0,
          endRowIndex: 1,
          sheetId: sheetId
        },
        cell: { userEnteredValue: { numberValue: 10 } },
        fields: "*"
      }
    }]
  })
};
fetch("https://sheets.googleapis.com/v4/spreadsheets/"   spreadsheetId   ":batchUpdate", data);

When this script is run, a value of 10 is put into a cell "A1" of sheetId in spreadsheetId.

Note:

This answer supposes that your access token can get and put values for Spreadsheet using Sheets API. Please be careful about this.

Modification points:

Modified script:

Note:

References: