Technical Summary 

 

The way that we decided to showcase our solution was through a Chrome Extension. In order to do this, we first began by following the Getting Started Tutorial from Google in order to create the basic files needed in order to build a Chrome Extension.

 

Our next step was to research different charting libraries that we could use, since we already had the mockup diagram for our product. After researching, we settled on using Chart.js, a popular and easy-to-use charting library for Javascript (the main language our Chrome Extension would be written in). We then worked on creating our "Ad Tracker" button. This would appear on Facebook’s toolbar for all registered users. We settled on moving the button to the upper right hand corner, as this looked better and easier to find than our original plan of placing it next to the "Home" and "Create" buttons.

 

Our next step was linking the button so that when clicked it would display the first chart, showing the advertising breakdown for the past 24 hours. From there, we worked on creating specific charts for each of the categories, so that the user would be taken to a new chart based on the category of interest. The bulk of this code was written in Javascript, as it is the main language for Chrome Extensions. In order to add more functionality, we created a "Back" button to switch between the charts, buttons to view advertisement breakdowns for the past week and past month, and modified the "Ad Tracker" button so it could hide the charts when the user was finished with them.

 

Lastly, we used css, another programming language, to improve the user interface and design.

​

Github link + code is available upon request.