The header images on Canvas's Dashboard are usually boring. With this Chrome Extension, you can easily change them to be personalized to whatever image/gif you want! Updates for customizing past the Dashboard coming soon. (Also will refactor soon it's a mess in there...)
- Download this repository as a zip file or via cloning.
- Go to
chrome://extensionsin Chrome. - Click
Load unpackedand select this folder. - Chrome may ask you to enter 'Developer Mode'. Select 'Yes'. This allows unpublished extension may be run.
- Proceed to steps below.
- The only hands on step you'll need to do is to follow the link below to get a free Giphy API Key. Once you have it, go to the Popup folder and find
env.js. The only line you need to write replaceyou_api_key_herewith your api key. - Once you have your API key and have the extension loaded in Chrome, go to Canvas and open the Spice pop-up. There, you will find a search bar and a trending page for Giphy gifs. Feel free to explore trending or simply search for your favorite topic. Once you select a gif, select 'Upload' to see it on your Canvas page!
- To delete gifs, go to 'Saved', select the gifs you'd like to remove, and select 'Delete.'
- You can have as many or few images as you'd like.
- NOTE: If you have less images than cards, images will be repeated. For this reason, I like to have 2-5 gifs saved at a time.
- If you like the minimalist look of the preview above, I left the code doing that commented out in
content.js.
- Using env.js file to hold api key. Will need to create your own file containing your key as I have mine covered by my .gitignore.
- The preview gif is a big file so it's a bit laggy. The result in real time looks much better.
- Not published bc that takes time and I'd prob reach out to Canvas + go over Giphy's terms of use again.
- UI looks like shit
- Add background image + minimalist features
- Work on loading times + caching