1

From what I've learned, there are two ways to work with the Google API in Chrome extensions: setting up OAuth and via Google Identity API. I've chosen to work with the ladder.

So I have no problems viewing calendars and events, but now I want to create events. I've been reading calendars using the following:

chrome.identity.getAuthToken({ interactive: true }, async function (token) {
      //initialization (think they're all the same)
      let init = {
        method: "GET",
        async: true,
        headers: {
          Authorization: "Bearer " + token,
          "Content-Type": "application/json",
        },
       contentType: "json",
      };

      async function getCalendarId() {
        return new Promise((resolve, reject) => {
          fetch(
            "https://www.googleapis.com/calendar/v3/calendars/primary",
            init
          )
            .then((response) => response.json()) // Transform the data into json
            .then(function (data) {
              console.log(data["id"]);
              var id = data["id"];
              resolve(id);
            });
        });
      }
      calendarId = await getCalendarId();
      await fetch(
        "https://www.googleapis.com/calendar/v3/calendars/" +
          calendarId +
          "/events",
        init
      )
        .then((response) => response.json()) // Transform the data into json
        .then(async function (data) {
          //get today to next week's events
          for (var i = 0; i < data["items"].length; i++) {
            //console.log(data["items"][i]);
            if (data["items"][i]["end"] == undefined) {
              console.log("found undefined");
            } else {
              //found a valid event

            }
          }
        });
    });
sweglord
  • 85
  • 5
  • 1
    I have a question. In your situation, your access token of `token` can be used for creating a new event in your Google Calendar. Is my understanding correct? First, I would like to have confirmed whether your authorization process isn't an issue. – Tanaike Nov 15 '22 at 05:59
  • yes, that's correct. i'll be using that access token of token to create an event. i think my authorization process is ok, it opens up a prompt for users to allow for access when they first download my extension if that's what you mean – sweglord Nov 15 '22 at 06:03
  • 1
    Thank you for replying. From your reply, I proposed a sample script as an answer. Could you please confirm it? If I misunderstood your reply and your question, I apologize. – Tanaike Nov 15 '22 at 06:20

1 Answers1

1

From i'll be using that access token of token to create an event. i think my authorization process is ok,, I understood that you wanted a sample script for creating an event in Google Calendar using Javascript. In this case, how about the following sample script?

Sample script:

Please use your calendarId and token. eventObj is a sample value. Please modify this for your actual situation.

// This object is a sample value. Please modify this for your actual situation.
const eventObj = {
  "end": {
    "dateTime": "2022-11-16T10:00:00-07:00",
    "timeZone": "America/Los_Angeles"
  },
  "start": {
    "dateTime": "2022-11-16T09:00:00-07:00",
    "timeZone": "America/Los_Angeles"
  },
  "summary": "sample event title",
  "description": "sample event description"
};

const options = {
  method: "POST",
  async: true,
  headers: {
    Authorization: "Bearer " + token,
    "Content-Type": "application/json",
  },
  body: JSON.stringify(eventObj)
};
await fetch(
  "https://www.googleapis.com/calendar/v3/calendars/" +
  calendarId +
  "/events",
  options
)
  .then((response) => response.json()) // Transform the data into json
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

Reference:

Tanaike
  • 181,128
  • 11
  • 97
  • 165
  • wow! thank you so much that did just the trick! it created an event tomorrow for me in my gcal. can i ask you a few more questions regarding your solution? – sweglord Nov 16 '22 at 04:09
  • sorry it wouldn't let me edit, 1. can you explain the two different approaches to handling google apis? i see on the official documentation they utilize google apis via gapi. the only reason i used fetch to do my commands is because i was referencing https://stackoverflow.com/questions/44768249/google-calendar-api-http-request-from-a-chrome-extension . 2. how did you know what to do? like what is fetch and how does it work with apis? – sweglord Nov 16 '22 at 04:16
  • 1
    @sweglord Thank you for replying. I'm glad your issue was resolved. About your new question, I have to apologize for my poor English skill. Unfortunately, I cannot understand your new question. Can I ask you about the detail of your new question? – Tanaike Nov 16 '22 at 05:14
  • sorry, no problem. my question how did you know what to do? as far as i know, we are reading/writing (GET/POST) via HTTP requests and fetch. however, in the google documentation, they do all of these via gapi. so my question is how did you follow those references and still know what to do? – sweglord Nov 16 '22 at 06:20
  • sorry this is a big lesson haha, but like i just don't really get how the google documentation is telling us to use the API and how we are using it here. we are not setting up gapi client or anything – sweglord Nov 16 '22 at 06:26
  • @sweglord Thank you for replying. Although I'm not sure whether I could correctly understand your new question, if you want to use gapi for calendar API, how about checking [this official document](https://developers.google.com/calendar/api/quickstart/js)? If you cannot understand it, I think that in this case, I would like to recommend posting it as a new question. If you can cooperate to resolve your new issue, I'm glad. Can you cooperate to resolve your new question? If I misunderstood your new question, I apologize. – Tanaike Nov 16 '22 at 12:02