How to redesign Google calendar create event page using chrome extension

I am trying to develop a chrome which re-designs Google calendar create event page by adding/removing few elements. Google seems to have obfuscated their CSS class names and element Ids making it difficult to identify a particular DOM element using javascript.

Is there a way to fetch DOM elements from Calendar page using JS?

Auto populate Google Calendar

I am developing a chrome plugin and have a requirement to auto-populate an event in google calendar.

What I have done so far is able to add an event by using gapi library – gapi.client.calendar.events.insert();

But this function Saves(which is right) the event in the calendar and what I want is to just populate all fields in a new event in a new tab.

Please help me on this.

Chrome extension and Google Calendar auth not working together

I have completed the following Google Calendar Auth tutorial: https://developers.google.com/google-apps/calendar/quickstart/js.

It works with no errors. Now I am trying to use the same Google Calendar auth in a chrome extension. I want to allow people to enter dates and have the dates/events placed in their Google Calendar.

Step 1 is to have the user provide permissions within the chrome extension. I parsed everything out into my Chrome Extension. The problem is that I receive no errors (the text and buttons show, but the button no longer works and takes the user to Google Calender auth). In the chrome extension console and prior to placing it the extension package, there were no errors.

Here’s a picture of the extension. When not in the extension the code (in the link above) works fine, click “Authorize” button and I sign into Google oauth no problem. And I can access the google calendar. When placed in the extension, the button no longer works and has no console errors.

enter image description here

One thing I noticed is that the following code was needed when it was a static HTML page:

The link above has the full code. And exactly what I used, trying to keep the post short.

But in chrome extensions, JavaScript has to be in a separate file. So I saved https://apis.google.com/js/api.js as a local file. And the chrome extension successfully finds it with no errors in the console.

My guess is that the following:

onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()

… needs to be placed elsewhere but when I placed it all different js files (i.e. quickstart.js file — which has the cut and paste JavaScript from the html file in the above link, since JavaScript has to be in separate files for chrome extensions) nothing worked.

How do I make calender auth work in a chrome extension? Where should the onload function be placed?

Google Web Calendar and Chrome Extensions

I have a Chrome extension that was working in the old design of the Google Calendar website, dynamically injecting information on the calendar that my users want to see.

With the new design, direct modifications to the DOM are reversed in short order.

Is there a new way, or an API of some sort, to interact with the DOM of the calendar webpage to add more information?

Or is there a way to get a new “calendar system” embedded into the calendar page?

Here’s a sample of some of what the extension does, adding labels in each day cell:

enter image description here

MutationObserver in “new” Google Calendar

I have an browser extension for Google Calendar, where I observe the DOM to gather events that are being viewed with:

// content.js
const calendarContainer = document.getElementById('gridcontainer');
const observer = new MutationObserver(mutations => {
  // just for test
  console.log('content', mutations);
}

observer.observe(calendarContainer, {
  childList: true,
  characterData: true,
  subtree: true
});

It works correctly in “classic” Calendar, but since the last update to Material design, DOM structure is different. So, I tried to change observed element accordingly:

// content.js
const calendarContainer = document.querySelector('div[role="main"]');

Even though I switch between week/day view, schedule or between dates, I cannot receive any new mutations besides first load of the page (after refresh). If you look on the source code trough Developer Tools you can see that DOM is changing, but Observer is somehow not able to see it.

Any thoughts?

Google Calendar – parsing new design

I have a Chrome Extension that modifies the DOM of the Google Calendar page to add some useful information that my users want to see in their calendar. It’s been working great for a while now.

As would be expected, the October 2017 refresh of the Google Calendar pages requires that my code be updated.

Does anyone know of any documentation about how the Calendar pages are now structured?

To start with, I need to know what dates are showing on the page. When parsing the DOM, I find an element on each page with an attribute called “data-start-date-key”. This seems to be good, and between days in a month, it is sequential. So, Dec 30, 2017 = 24478 and Dec 31 = 24479. However, the next day (Jan 1) is 24609. Does anyone know the logic behind these numbers and how to convert them back to a calendar date?

Add a text box in google calendar

I want to insert text box in google calendar using google calendar API. I searched in google regarding this, I did not get any links for this.

How can I use access tokens to insert new Google Calendars and events via JavaScript?

I’m trying to create a Chrome extension that creates Google Calendars and inserts events into those calendars, but I’m running into a little difficulty using the Google Calendar API since there don’t seem to be any concrete examples in JavaScript. Here’s what I have so far:

chrome.identity.getAuthToken({ interactive: true }, function(token) {
    if (chrome.runtime.lastError) {
        alert(chrome.runtime.lastError.message);
        return;
    }
    var x = new XMLHttpRequest();
    x.open('GET', 'https://www.googleapis.com/calendar/v3/users/me/calendarList?access_token=' + token);
    x.onload = function() {
        alert(x.response);
    };
    x.send();
});

This gets me as far as successfully getting an access token and using that to retrieve the calendar list of an authorized user–I can verify that that snippet works. So, I should be able to modify this from a GET request to a POST or something similar to create a Calendar or insert events into a Calendar, given the Calendar’s ID–my question is how can I go about this?

My current structure is a JavaScript content script that injects a button into a web page, processes the page data, and sends that data to a background page (from where the above snippet was taken), which is supposed to get access to a user’s calendars and then create a Calendar and insert events into that Calendar using the page data. So far, the content script works perfectly and I can get valid access tokens from the background page, so it’s just this last stage of insertion that I’m stuck on.

Using access tokens to insert new Google Calendars and events via JavaScript?

I’m trying to create a Chrome extension that can create Google Calendars and insert events into those calendars, but I’m running into a little difficulty with usage of the Google Calendar API since there don’t seem to be any concrete examples using JavaScript. Here’s what I have so far:

chrome.identity.getAuthToken({ interactive: true }, function(token) {
    if (chrome.runtime.lastError) {
        alert(chrome.runtime.lastError.message);
        return;
    }
    var x = new XMLHttpRequest();
    x.open('GET', 'https://www.googleapis.com/calendar/v3/users/me/calendarList?access_token=' + token);
    x.onload = function() {
        alert(x.response);
    };
    x.send();
});

This gets me as far as successfully getting an access token and using that to retrieve the calendar list of an authorized user. How can I modify this to create a Calendar or insert events into one (given a Calendar ID)?

My current structure is a JavaScript content script that injects a button into a web page, processes the page data, and sends that data to a background page (from where the above snippet was taken), which is supposed to get access to a user’s calendars and then create a Calendar and insert events into that Calendar using the page data. So far, the content script works perfectly and I can get valid access tokens from the background page, so it’s just this last stage of insertion that I’m stuck on.