CLICK HERE to download the extension here! And then go to “chrome://extensions/” and drag the downloaded file into the page.
I made a Chrome extension that lets people leave anonymous notes on any website. Anyone who has the Chrome extension can see the notes. The idea is that it would be fun to randomly find little notes left by people, kind of like a digital version of writing a note in a book for someone to discover. I’m aware that because of the anonymous nature it could potentially attract trolls, but I think it’ll be okay for now with ITP users.
The image above show some messages from our lovely Hacking the Browser class that they posted on google.com! Here’s what it looks like when you are posting a message.
I used Chrome’s tabs, browserAction, and runtime APIs. I also used a Firebase database for the message information. In the rest of the post, I’ll go over the main components of the extension.
The Manifest file
Starting with my manifest.json file, I had to get permissions for the tabs API because I needed to access the user’s URL and inject CSS into the page. I needed permissions for all URLs because I wanted my extension to work on any website.
I had the scripts for Firebase and JQuery in my extension file, so those are included as well. My extension has a popup for users to input their messages, so I also have the browser action API included.
Sending Data From the Popup to the Background script to Firebase
Here’s what my little popup looks like right now.
Starting with the user’s input from the popup, which is a message and a timestamp, I put that info into an object and then used the runtime API to send it to the background script using “chrome.runtime.sendMessage()”.
The background script receives the message using “chrome.runtime.onMessage.addListener()”. Following that, I am getting the current URL, creating a new object with all the data and then pushing it into my Firebase database.
Getting Data from Firebase and Inserting it into Websites
Next, I needed to get the data from Firebase and then display it on the website if users had made posts on it. To do this, I queried my database using “equalTo”. This returns the keys of the data, and then I was able to read the data once to get the values that are associated with those keys.
Before I can post it, I need to send this data, “msgToPost”, to my content script where I will display the messages on the website. To do this, I used the tabs API’s “sendMessage” to send the data to the active tab.
Now, I needed to run a content script to get the message to show up in the website.
And that results in the messages showing up!
Thanks to Cory and the Hacking the Browser class for a fun semester!