Blog Post

For the past couple of months, I've been focused on building a personal project on the side. At some point, I realized that I could build a Chrome Extension as a tool to be utilized for this app so hey, why not learn a bit about the chrome.* APIs?

First off, let me say, it is some very well written documentation that you will appreciate. Right away, the docs tell you all the basic files you need and give you some boilerplate code to get started. Also included are some downloadable examples that vary in complexity. It will be helpful if you are already familiar with HTML/CSS/JavaScript, btw. Within the hour, I had a functional extension and wanted to share how to get started on your own:

For this project, let's make a Chrome Extension that can help you bookmark locations you want to visit which you will store for future use. Later you can hook it up to be sent to your database you have or some sort of Firebase-y service.

First, call in Chromes' API to grab some basic info from the page. In this case, you want the title of the page which is often the name of the location and the URL so you can visit the site again if you need to which will be using the Chrome Tabs API. These items will be pre-filled into the form on the popup for your extension as seen above as soon as you click on your logo.

You'll keep your popup-specific JS in a file named popup.js and then your JS related to the page itself will be named content.js. It's important that you keep these separate.

One thing to keep in mind while building a Chrome Extension is that you can't add inline JS to the HTML document (for security reasons). For instance, you will see I am adding an event listener to the addAddressBtn element to make it clickable. Moving along, we will be using the Chrome Tabs API to interact with the browser tabs -- this is for querying 'tabs' and assigning the url and title to variables.

Then, we store the value of the current tabs' title to place into the #page-title field and the url into the #page-url field. Boom, half done. Now, let's get into passing messages!

Next, we want to allow the user to select the address text of the location and once they have our extension popup open, they will find that they can easily paste it into the Address field. Since there is no real pattern online for mailing addresses, this is how we will handle it for our extension.

This function queries the Chrome Tabs API again, this time, we are passing messages between the extension and the content script. Below, the content.js file here is listening (using chrome.tabs.onMessage) for a message (JSON object) from the popup.js file (using chrome.tabs.sendMessage)and then handles it.

As it gets the current selection in the window, it turns it into a string to be sent back to the popup and pasted onto the textarea field. Now, you have an extension that you can hook up to your choice of backend to store this information and view it!