MP1: Browser Extension Writeup

Overview and Usage

The core functionality of my project is to add a feature to the blocker example extension which allows the user to change the color of each block. Here is a link to the GitHub repository where the code for my extension is hosted: https://github.com/yumingt/bookmarker-extension. To run the code, simply clone the repository, type "chrome://extensions/" into your Chrome browser, click "Load unpacked", and select the folder of the cloned repository. From there, the extension should be accessible through the puzzle icon in the top right of the browser.

Here is a gif of my extension in action:

GIF of color blocker use case

Development Process

Here are the steps that outline my process for this project:

  1. Clone the example blocker web extension and run it locally
  2. Look at the example background colorizor code from class GitHub repository
  3. Copy and paste relevant code snippets from background colorizer code into blocker code
  4. Write code to add color picker and button to change color onto each block
  5. Edit and restructure the copied code so that it works with blocker code
  6. Debug and troubleshoot. Here is a screenshot of my project an unfinished state where I encountered an error where the color of the block was automatically set to black every time I added a block:
    7. Color blockers that are only black
  7. Host final web extension code on GitHub
  8. Do the writeup

Issue Deep-Dive

An issue that I encountered was a syntax error involving an anonymous function. I created an anonymous function which changes the color of a block every time the "change color" button is clicked, but I encountered an error where the function was being called every time I created a block which resulted in every block defaulting to a black background and the "change color" button was also not working.

I resolved this problem by using print statements and the console in my browser's developer tools to figure out if my "change color" button did anything when I clicked it. Although I did not get any errors, the button would not print anything and the anonymous function was not waiting to run.

After going through my code line by line, I had a friend try to help me debug my code. Finally, we noticed that the parentheses attached to the anonymous function were in the wrong place which was causing the function to run prematurely. Fixing this syntax error by moving the parentheses was what ended up solving my problem.

Ideas and Future:

  • Add feature to create color gradients on blocks
  • Add a button to invert colors on all blocks
  • Publish on the Chrome extension store

    • Kudos

    I would like to thank the GOAT Anderson J Shaw for helping me debug my code. You a real one