Building My First Chrome Extension
Initial Thoughts and Findings
I wanted to specifically develop an extension for Gmail, and that’s where I started getting nervous. The extension I ended up building is one that reminds users to think twice after they hit “Reply to All” on emails they’re Bcc’d on. You can currently find it in the Chrome Store (for free) here.
I put Chrome into Developer Mode and uploaded the unpacked boilerplate. I was then able to play with it within Chrome and see more of how it worked. I modified the code, which already picked up the logged in user’s email address, and compared it to the addresses listed in the BCC field. One issue with this method is that you can receive emails within Gmail that might not be what you’re logged in as. I don’t mean multiple accounts, I mean that your email address works with or without the dots, so I can get Bcc’d as “email@example.com”, instead of “firstname.lastname@example.org” and although it’s me getting Bcc’d, my code wouldn’t realize that.
With my first issue in mind, I decided instead to focus on the word “me” that appears if you’re the one Bcc’d on an email. I first had to pick up the span that encased the word “me” and then read the text of it. Seemed good to go, I grabbed a screenshot of my work to show off on Facebook and patted myself on the back. But, deciding to test it more, I discovered that elements within Gmail share classes and change IDs dynamically. That means I couldn’t rely on class names to pinpoint an element (since multiple elements have the same class) and I couldn’t rely on IDs because IDs changed as I went between emails. Interestingly, it’s always the same array of IDs, so I started tracking them and compiling a list of which IDs my code should look for. This seemed like a messy way to go. If I created a list of 10 IDs, but a user went through 11 emails, the extension would stop working unless they refreshed the page. I still have no idea how many IDs Gmail has for their elements.
I realized that I still had the issue being able to tell the email address of the logged in user, but having things break if dots were excluded (or extra dots included) in an email address. Some RegEx magic could help in that situation, but I thought of a different solution. I wrote my code to search for the words “Reply to All”, specifically within a span. When a user clicks on the words “Reply to All”, a function would run that checks the “To:” section of the open email. If it found the word “bcc” within that section, it would trigger an alert warning the user not to continue. (Thankfully the “To:” section contains a class that does not change, so I was able to target it.) I ran some tests to make sure that the alert would not trigger if, say, a user had “Reply to All” in the subject of body of an email (hence the “specifically within a span” above). It worked! It turned out I didn’t need to use the Gmail API at all, which allowed me to strip out a bunch of code.
Adding to the Chrome Store
Adding my extension to the Chrome Store was easy. I had to pay a one-time $5.00 fee to become a registered developer. I was then able to upload the extension, choose some information and wait for it to get approved. Approval, which could take up to 24 hours, somehow happened right away.
When I first added it to the store, it didn’t actually work. jQuery wasn’t being loaded properly, which I didn’t realize because I had jQuery loaded through a different extension. My initial testers discovered this. I fixed it and pushed an update and all was good, but it did teach me that to properly test an extension, I would need to disable all other extensions while testing.
There is still a little bit left to go, but nothing urgent:
- A landing page for the extension, to have something I can control and share with people besides just the store link.
- Better branding. I like my “facepalm” guy, but if this is a “oops blocker”, perhaps it should crossed out like a “No Smoking” sign? I just don’t like how those look. “Email Oops Blocker” is also a strange name. I had thought of calling it “Snafu Blocker”, but I wanted to include “Email” in the name (since that’s all it does).
- Analytics! I want to add analytics to the extension so I can gather data on it.
- I’m thinking of making a video showing how it works. Right now it’s a bit awkward that you need to send yourself an email that you’re also Bcc’d on and includes another participant just to test it.
- An optional tester! Building on what I just wrote above, I could make something, perhaps on the website, that allows you to have a test email sent to your address with just one click so you can see the extension in action.
- Chrome Store Optimization. I’m not sure why, but “Email Oops Blocker” yields zero search results in the Chrome Store. I need to figure out why.
- A “Marketing” Plan. There isn’t really much to market. This isn’t a product that comes with a business plan. But it would be nice to let more people know about it. I might pull it from the store to work on enhancements and in the meantime get it listed on Beta List. Once it’s live again, I might post it on Product Hunt and Hacker News and the like. We’ll see.
I would say that had I been able to work on it with full concentration, the entire process of coding, building the images, uploading and testing would have taken 6 hours tops. 3 hours for a more experienced coder.
Thanks for reading, please reach out in the comments section below with any questions or comments. I would be more than happy to share details of the actual coding experience in a different post.