Chrome extension

OVERVIEW

In this project, I created a Chrome extension called the "Cookie Counter". This extension functions to increase awareness of a website's cookies - through replacing the images on a website with a cookie gif (based on how many cookies there are). The extension also has an option to delete the cookies on the current page.

DEVELOPMENT PROCESS

These are the main steps I took in approaching this project.

Cloning examples from the instructor and reading/analyzing them to learn how javascript worked

Found Google's cookie API, and narrowed down my project direction by using Google's cookie extension example as a starting point

Looking up readings for javascript, and how to connect html to it (did a lot of this throughout)

Laying out my files and customizing the CSS

Created a line on my extension to display the current number of cookies

Having that number update once a user chooses to delete cookies

Created a "enable cookie" checkbox

Connecting javascript to content script

Sending the number of cookies to content script once the checkbox is checked

(2 mid-process photos shown below)

ISSUE DEEP DIVE

I ran into several issues in this project. One of the most notable issues was displaying a line of text that updated the number of current cookies on a site. It was a logic issue where at first, I was unable to get the cookie number variable to be connected with my html's inline container.

I approached this problem with several steps, including:

Using console.log() to report back to see where in my code was coming up null

Started by referencing the deleteCookies function that was originally in the template code

Created a getCookies() function to grab the cookies.length once the domain's cookies were gathered

This function connected to another function of setCookie() which communicated that number back to the html inline container

My code was not working at this point, so I tried adding an EventListener that called a function when the DOM was fully loaded and parsed

This function would be able to grab the url and pass it in the earlier function I had made getCookies()

Lastly, I needed the extension to update this number whenever a user deleted the site's cookies

After failing to write a new function to do this, I instead went into the deleteCookies() function to set my cookies back to 0 once cookies were deleted

Final extension here or shown below (may take a while to load):