How I built my first Chrome Extension, AstroBook, in less than a day.

I was toying with the idea of building Chrome Extension for a while now. Everyone these days is so obsessed with building mobile apps, and the web is left overlooked, along with a long tail of great opportunities there. Such as browser extensions.

What’s cool about browser extensions?

  • Top of the mind — Is your site or app is having a hard time keeping mindshare of your target user’s audience? Do users forget to go back to your site when they experience the problem that you are solving? — Why not leverage sites that billions of people go everyday to, e.g. Facebook, Google, Twitter, etc. An extension, once installed, can simply augment Facebook’s features and display it’s UI components right within Facebook’s or Google’s UI. Super cool!

Idea 💫

And that’s what we’ll be building today — a zodiac compatibility extension, that checks how compatible you are with your Facebook friends.

Currently, when I want to check how compatible I am with someone’s sign, I go to their Facebook → copy their birthday → paste it into Google to find their sign → start another Google search request for e.g. “aries sagittarius compatibility” → click on the result and read.

Way too many steps! 😱 Wasting 15 minutes of my life each time. Let’s automate this madness!

Naming

Vision

Next step, show our compatibility:

Bam! Simple, fast, easy, elegant.

Let’s write some code, finally

{
"manifest_version": 2,
"name": "AstroBook",
"description": "Are you compatible with your Facebook Friends?",
"version": "1.2.1",
"icons": { "128": "icon.png" },
"content_scripts": [
{
"matches": [
"*://astrobook.co/*",
"*://*.facebook.com/*",
"*://twitter.com/*",
"*://*.twitter.com/*"
],
"js": ["jquery.min.js", "app.js"],
"css": ["app.css"]
}
],
"permissions": [
"tabs", "http://*/", "https://*/", "storage"
],
"web_accessible_resources": [
"matches.json"
]
}

icon.png is required. All extensions must have one. It’ll show up in browser’s dashboard. Here is our icon: 💫 Yay!

For this simple project I thought I should avoid all the fancy React.js wizardry and get by with vanilla JavaScript and some jQuery spaghetti code. I wont go much into detail about every single line of code I wrote (Feels like documenting my codebase, which I hate to do. Good code is self documenting), but I’ll just stress on a few tricky parts I’ve spent the most time on. So, the trickiest part was to identify when user’s birthday information is displayed on the screen, parse it and append my widget. This all boiled down to trial and error process with jQuery selectors and quite a bit of Facebook’s DOM analysis with DOM Inspector. At the core of the solution is a interval loop, that checks for url changes and is looking for span:contains("Birthday")

setInterval(function () {
if (currentURL !== encodeURIComponent(location.href)) {
currentURL = encodeURIComponent(location.href)
setTimeout(function () {
var birthdayDayCell = $('span:contains("Birthday")')
if ($('.astrobook').length > 0) {
return console.warn('AstroBook is already initialized.')
}
if (birthdayDayCell.length === 0) { return }
if (birthdayDayCell.length > 1) {
bDayCell = $(bDayCell[1])
}
initWidget(birthdayDayCell.parent().parent()) // Magic!
}, 1000)
}
}, 500)

initWidget($el) goes on and does all the job of parsing date from $el finding which Zodiac sign it is, and then append a widget adjacent to the element.

Local development process is fairly “okay”. You just have to load your extension’s directory into Chrome and then keep hitting “Reload” link all the time.
No hot reload 😥 available.

Okay, let’s see what we’ve got here. Opening Facebook, friend’s profile page:

Submission Process

Here are some screens from Chrome’s Web Store admin panel:

Interesting nuance. Each extension should be linked to a domain name. I wanted to do as little work as possible and registering domain, creating a landing page, was not part of my initial plan. Oh well, what needs to be done must be done. Finishing off the day around 11pm, I thought I’d postpone this for tomorrow.

Day 2

Best way to describe this new service, is to compare it with DigitalOcean. Think of AWS Lightsail as “DigitalOcean in orange colours”. It is identical. Same value prop, same pricing, same simplicity.
(Sorry, DigitalOcean 😢 I hope this won’t put you out of business just yet.)
A spawned an instance for $10/month, installed Dokku and pushed a fresh Sails.js project. Smooth sailing!

Again, I wanted to get through this as fast as possible and did not want to overthink the landing page. Hence I shamelessly stole landing page looks from Grammarly:

Nice! By the way, this gradient was inspired by WebGradient.

Day 3

Summary

Let me know what you think! Tweet me at @ksaitor. Like and share. 😊 Know someone who’d use AstroBook? Send it to them. Be a good friend.

--

--

CryptoJobsList.com - #1 job board to find and post web3, blockchain & cryptocurrency jobs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store