MapIt for Google Calendar (A Chrome extension)

Dec 29, 2015

Last month I challenged myself to improve my productivity - start reducing the number of clicks! Earlier today I launched MapIt, a Chrome extension that automatically wraps event location with a Google Map hyperlink and saves a click!

Interested?

This blog post deep dives into developing a Chrome extension for Google Calendar.

Problem

calendar agenda before

You need to further expand (+ sign) for the map link - one additional click!

Solution

calendar agenda after

Automatically wrap event location with a Google Map hyperlink - save one click!

How?

Replace the innerText in class lv-location with innerHTML link to Google Maps
##Default code calendar code
##Modified code calendar code after

Getting Started with developing Chrome extension

## 1. manifest.json provides all information about the extension * line 3: extension name * line 4: extension version * line 5-10: content.js is a JavaScript file that runs in the context of “*://calendar.google.com/calendar/render*”. Here “*” handles http, https and query parameters. * line 11-14: background.js has access to Chrome API * line 15: permission to access tab and alarm

Interested in further reading? Check out Gabe Berke-Williams Chrome extension tutorial

2. background.js

  • line 2: Add listener to Chrome tabs
  • line 3: Check if all the page content is loaded
  • line 5: Send a message to content.js to start

3. content.js is a JavaScript file that runs in the context of Google Calendar (view=Agenda)

  • line 3: Wait for start message from background.js
  • line 11-24: Find all locations by class lv-location and add innerHTML
  • line 17: URIencode special characters, handle () and replace %20 with space

4. Handle user interaction - Browser resize

*line 8: Trigger Start() after browser resize

5. Handle user interaction - active & inactive tab

  • line 5: Add listener on activated tab
  • line 8: Check if active tab is Google Calendar (view=active)
  • line 9: Send a message to content.js to start

6. Handle user interaction - events are added, removed or modified

  • line 3: Add alarm to trigger every 2 minutes
  • line 17: Add listener on the alarm
  • line 20: Send a checking message to content.js
  • line 21-24: Keep track of the alarm count
  • line 37: Check # of lv-location and calendar-clicksaver-maplink

Observations:

  • Thinking thru to programatically handle various user interactions is critical since the page is reloaded and modified code vaporized - background.js does not detect any updates
  • There is a periodic refresh that is not detected by background.js . So sending a message to content.js every 2 minutes to check (#6) using Chrome alarm works well. This solution is not efficient. Perspectives welcome.
    calendar periodic refresh

#Interested? * Install MapItInstall MapIt from Chrome Web Store
* Code on GitHub

Tags

  • google
  • chrome extension
Harish Chakravarthy Harish Chakravarthy is an intrapreneur leveraging technology to make a positive difference. Interests include API integration, user experience, data visualization and analytics. Detailed bio.

Connect with Harish on Social Media Github Twitter LinkedIn