-
-
The chrome extension panel demo image
Inspiration
The initial purpose of this mini-project is to fulfill the challenge of "Create a Browser Extension".
Idea Brainstorming The idea comes from looking at my complicated browser bookmarks since 2020. I have saved a lot of bookmarks, and currently, it has about 1000 bookmarks from different resources. This makes me feel unclean about how I use my browser. The chore of deleting unnecessary bookmarks is also difficult enough for users because there are presses to be made just to get rid of unwanted bookmarks. Therefore, I created a prototype app that deletes a bookmark after a period of time.
What it does
User workflow After installing the Chrome extension, the user will be able to go to any website and right-click to bring up the context menu. The user will press the button "Add to temp bookmark". This will save the website to the storage and the user will see the link to be accessible from the Chrome extension panel. In the panel, each website links with their time of expiration are shown, and these data are rerendered after every second to keep up to date with the time of expiration. After the expiration, the bookmark will be deleted from the storage.
How we built it
Technology - HTML, CSS, Javascript, Chrome API Basic HTML and CSS are used. Javascript is used to integrate Chrome API into the browser and to manipulate the Document Object Model (DOM). Chrome API uses Chrome.storage, chrome.bookmarks, and chrome.contextMenus.
Challenges we ran into
The first step of the challenge is thinking about what app to create. While there are a variety of apps to create or recreate, I found that most are in somewhat big projects that could not be done within this week before the end of the hackaton. Moreover, I didn't want to create an app that would have output but no use cases to anyone. Therefore, I started to think about what difficulties or problems I have using other websites or Chrome Browser in general.
My first plan failed. The idea was to add a button beside each event in the GHW where users would be able to save the events they would like to attend and they would be able to refer back to the extension panel. However, I tried to inject HTML and Javascript code into text. Not having the neccessary knowledge of using Chrome API, I was not able to manipulate the schedule due to the rerendering from the website. Interestingly, I would be able to make this project happen, after I have done this current project idea.
Therefore, I attempted to do another by brainstorming the aforementioned idea. This time with the guidance of YouTube video and the familiarity of using Chrome API has led me to build a small prototype of my idea.
Accomplishments that we're proud of
I know that Chrome extensions exist, but never thought about building one. Being in GHW, I am very happy to experience with using a new API and technology. While learning Chrome API was challenging at first due to its own structure, I have now a deeper understanding of what Chrome can provide and how I have the knowledge to build Chrome extensions that can give value to people in the future.
What we learned
Being used to using React, building this project has challenged me to relearn the fundamentals of Javascript and DOM. It feels like the time when I started learning HTML, CSS, and Javascript for the first time. While I do understand the concepts of these, since I have not used the related codes for a while, I found myself in the situation of looking into the documentation to make sure the codes are correct. Needless to say, I have gained the experience of using Google Chrome API.
What's next for Temporary Bookmark Chrome Extension
While I have to submit this project due to time constraints, I have a plan to extend this simple prototype into a full working bookmark manager. I also would like to talk to more people about their experiences in using these bookmarks and add features accordingly.
Log in or sign up for Devpost to join the conversation.