MapIt for Google Calendar (A Chrome extension)
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!
This blog post deep dives into developing a Chrome extension for Google Calendar.
You need to further expand (+ sign) for the map link - one additional click!
Automatically wrap event location with a Google Map hyperlink - save one click!
innerText in class
innerHTML link to Google Maps
Getting Started with developing Chrome extension
Interested in further reading? Check out Gabe Berke-Williams Chrome extension tutorial
- line 2: Add listener to Chrome tabs
- line 3: Check if all the page content is loaded
- line 5: Send a message to
- line 3: Wait for
- line 11-24: Find all locations by class
lv-locationand 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
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
- line 21-24: Keep track of the alarm count
- line 37: Check # of
- 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.jsevery 2 minutes to check (#6) using Chrome alarm works well. This solution is not efficient. Perspectives welcome.
- chrome extension