I am currently on Module 3 of my Flatiron School Software Engineering Immersive course and have been experimenting with vanilla javascript by writing some small, simple apps. One of the apps I have written is a “Wish List” app that allows a user to create a list of items that they would like to receive as gifts.
After building a basic front end that allowed a user to enter a url for an item along with a price, description and also set an occasion to receive the gift, I decided that I wanted to streamline the experience for the user and allow them to capture the url of their current page and add it to their wish list automatically. This led me to explore google Chrome extensions and their capabilities, and the following is a walkthrough on how to create a simple extension that will grab the url and the title of the current page.
You can find and download the completed project from my Github account.
File Structure
To make our extension we require the following files, all residing in a single directory:
manifest.json
popup.html
popup.js
popup.css
icon.pngmanifest.json
The manifest file describes the packages contents to Chrome, and only needs to include a small amount of data.
{"manifest_version": 2,"name": "Will's First Chrome Extension","description": "This extension will add an item to your wish list!","version": "1.0","browser_action": {"default_icon": "icon.png","default_popup": "popup.html"},"permissions": ["activeTab"]}
All new Chrome extensions should specify a manifest_version of 2 as version 1 has now been deprecated. The rest of the data is pretty self explanatory; “name” is the extension’s name, “description” is the extension’s description and “version” is the extension’s version.
The “browser_action” key contains an object with 2 properties: “default_icon” allows us to set the icon that will appear within the Chrome window and allows users to activate the extension, and “default_popup” which allows us to specify the html file that we will use to allow users to interact with the extension.
The “permissions” key contains an array that allows us to set what permissions the extension should have. Access to the “activeTab” is sufficient for our needs, but other permissions could be added here if required.
popup.html
Having specified popup.html as our “default_popup” in the “browser_action” section of the manifest.json file, this is the file that will be executed when a user clicks on our extension icon. We can keep this file very simple for our needs:
<!doctype html><html><head><title>Add an item to your Wish list!</title><script src=”popup.js”></script><link rel=”stylesheet” type=”text/css” media=”screen” href=”popup.css”></head><body><h1>Add item to your Wish List!</h1><button id=”grabURL”>Add</button></body></html>
We simply create an HTML document, link it to our “popup.css” style sheet and “popup.js” script (where the extensions functionality will be written) and add some text in the form of an H1 tag and a button with an id of “grabURL”.
popup.js
This is where the extension’s functionality is written. The code below is annotated but the basic features are:
- Add an event listener to the button element in popup.html
- Create a form element, and set the action and method.
- Create a hidden form field for the page url, then grab that value from the tab.
- Create a hidden form field for the page title, then grab that value from the tab.
- Append the url and title to the form.
- Append the form to the document.
- Call “submit” on the form.
document.addEventListener(‘DOMContentLoaded’, function() {// ADD EVENT LISTENER TO 'grabURL' button in popup.htmlconst checkPageButton = document.getElementById(‘grabURL’);checkPageButton.addEventListener(‘click’, function() {chrome.tabs.getSelected(null, function(tab) {// CREATE FORMlet form = document.createElement(‘form’);// SET THE FORM ACTION - THE API ENDPOINT THAT YOU WANT TO POST THE DATA TOform.action = ‘http://localhost:3000/wishlist';// SET FORM METHODform.method = ‘post’;// CREATE HIDDEN URL INPUT FIELDlet url = document.createElement(‘input’);url.type = ‘hidden’;url.name = ‘url’;// GRAB URL VALUEurl.value = tab.url;// CREATE HIDDEN TITLE INPUT FIELDlet title = document.createElement(‘input’);title.type = ‘hidden’;title.name = ‘title’;// GRAB PAGE TITLEtitle.value = tab.title;// APPEND URL AND TITLE TO FORMform.append(url, title);// APPEND FORM TO DOCUMENTdocument.body.appendChild(form);// CALL SUBMIT ON FORMform.submit();});}, false);}, false);
popup.css
I just applied a small amount of css for some visual interest, but you could add as much as you like.
body {width: 200px;font-family: Helvetica, sans-serif;background-color: cornflowerblue;color: white;}
icon.png
The icon.png is the icon that will be displayed in the chrome window to activate the extension. I just used a stock icon.png that I found online.
Installing the Extension
The next stage is to install the extension onto your Chrome browser. Either navigate to Chrome > Preferences and select “Extensions”, or simply type “chrome://extensions/” into the address bar.
Click on “Load Unpacked” and select the directory containing your extension, and your extension will be installed.
Testing the extension
You can now see the extension icon in the top right hand corner of your browser window, and clicking on it will open the popup.html window. Clicking on the “Add” button will collect the site URL and title, and send a post request to the specified API endpoint.
Summary
As you can see, writing a basic Chrome extension can be fairly simple. Have you written a Chrome extension before? Do you have an idea for a cool Chrome extension to build? Leave a comment below.
