Overview and Usage

The core functionality of this project was to write the code for a browser extension that would change the mouse cursor into an image upon a toggle switch.

Cursor Changer Browser Extension in Action

To run this browser extension on your own device, the code can be found in this github repository called "cursor-extension". The repo can be cloned to your own device after which you can load the extension on the google extensions website.

Development Process

Popup with toggle

1. Cloned extensions repo ['Hello World' example] from class.

To start, I copied the code for the example extensions we had reviewed in class. I wanted my browser extension to use a popup, so I used the 'Hello World' extension example as my template. I then added a toggle to be used as a switch.

Popup with toggle and new cursor image

2. Add new cursor image to popup

I then added in an image next to the toggle to show what the new cursor would be changed to upon the toggle switch.

Browser extension popup with updated icon

3. Add new cursor image to extension icon

After getting the popup layout all configured, I updated the browser extension's icon from the 'Hello World' examples' to match the new cursor image.

Cursor changing upon toggle switch

4. Added code for action after toggle is enabled

I then referenced some of the code from the 'e-nator' extension example for my 'popup.js' code since a toggle is a checkbox input (and the 'e-nator' example used a checkbox). I used this structure to write out the code for the extension to update the cursor upon toggle switch:

    
  if (message == true) { // toggle enabled; change cursor
    changeCursor(); // function to change cursor
  } else { // toggle not enabled; don't change cursor
    document.body.style.cursor = 'default'; // cursor back to default 
  }

* note: full code is in the repo

Issue Deep-Dive

Issue #1: Misaligned toggle and image in popup

One issue I encountered when I first added the icon image to the popup, the content spacing was a bit funky as the toggle and the icon image weren't aligned. To resolve this, I opened up the DevTools window using 'Inspect' and I played around with the CSS layout for the popup using 'display: flex' until it was aligned next to each other. I learned that using the browser's developer tools, such as the DOM inspector, are helpful in seeing real-time changes without changing the actual file.

Misaligned toggle and icon image

Issue #2: Cursor did not update upon toggle switch

Another issue that I encountered was when I clicked on the toggle, the cursor should have been updated to the new icon. However, the cursor did not update to the image, but a 'help' cursor which meant that the image could not be found. Someone else in our class discord also had this problem where the image did not change upon toggle switch. I read through the Chrome Developer docs that Hannah had posted. Following the doc, I called 'chrome.runtime.getURL()' to get the absolute URL of the extension asset (the icon image for the new cursor) and declared the asset as a Web Accessible Resource in my manifest.json file.

Cursor did not update correctly

Upon inspecting the popup, an invalid error message was displayed. To resolve this error, I did some research online by looking up the error message "Unchecked runtime.lastError: Icon Invalid". I found a helpful article on Stack Overflow that explained that icon images for extensions need to be specified with size in order to show. So I resized my icon image file to 32x32 px and refreshed my extension, and the cursor successfully updated to the new one! I learned that inspecting the popup using the DevTools shows error messages (which are helpful to look at to see where the code has bugs), and there are many resources on Stack Overflow where people have run into the same issues as me.

Icon Invalid Error

Ideas & Future Work

Here are some additional ideas and features I would like to add to my browser extension in the future!

Include more toggles for users to choose from more than one cursor to change.
With the choice of various cursors to change, add an element where the extension icon is also updated when the cursor is changed.
Make it so that the cursor change is visible over the current tab instead of just constrained within the popup.

Kudos

Kudos to these helpful online resources! And special thanks to Hannah, Raina, and other peers as well :)

W3 Schools documentation on creating toggle switch
github repo from [ericyoondotcom's changemycursor] for inspo
W3 Schools documentation on Style cursor Property
Chrome Developer docs on Content Script files and loading secure content
Stack Overflow post on Icon Invalid error