Inspiration
As a web developer, sometimes I stumble upon a site and wonder what was going through the developer's head when they designed the site. I always have to fix the site even though I know that it won't be saved. But what if it can be saved?
What it does
flUId is a chrome extension that allows a user to select DOM elements and modify its CSS styles. All changes are saved locally and loaded up the next time the user accesses the site. The extension can target a single element, a single ID, an entire class, or even all instances of a tag name.
How we built it
As a chrome extension, flUId is able to inject javascript after the page loads. When the user right clicks on a DOM element and selects the flUId option, the javascript detects the element being clicked. Given the element, the class names, ids, and the tag corresponding to the element can also be found. Then, the stylesheets are loaded into the javascript and are looped through to find matches for the previously found class names, ids, and tag. Through this method, we were able to find which CSS styles an element had. The user is then given a toolbar where they can see the CSS styles and edit them. After they have finished, the settings are saved into local storage. When the user loads a site, the extension checks for the url in the local storage and applies all styles specified.
Challenges we ran into
Most of our challenges stemmed from the fact that CSS and javascript were not made to work together. They were made to accomplish different tasks and then forced to work together. It was difficult to find the attributes that an element had and even more difficult to separate the attributes into their respective sources (class, id, or tag). Another perhaps even more difficult challenge was creating the system to allow a user to select a DOM element by clicking on the element. When hovering over an element, we changed the background color to indicate what was being selected. This meant that we needed to save the previous background color. What made it especially difficult was that when hovering over an element, all the elements behind it are also being hovered. We had to find all elements being hovered and detect which was the top level element. Another challenge was working with chrome extensions, which we had never done before. Quite a bit of time was spent trying to communicate between content scripts (which were injected into the web page) and background scripts (which always ran in the background).
Accomplishments that we're proud of
We're proud that we were able to write a fully functional chrome extension on our first attempt. We're proud that one of our team members was able to experience his first hackathon and actually contribute to our project.
What we learned
We learned how to properly write chrome extensions. We all agree that it can be a very powerful and useful tool. Also, we're we now have a better understanding of the ways that javascript can connect to CSS. We gained a deeper knowledge of the interaction between javascript's event listeners.
What's next for flUId
Looking to the future, we hope for users to be able to share their styles for a website with other users of flUId. We want to change the way web design works and put more in the hands of the ordinary developer. We hope that anyone will be able to jump into to the world of web development and receive immediate feedback on their work through flUId. Currently, the UI for flUId is not the easiest to use. We hope to improve it and also provide the ability to look through the source code line by line to select a DOM element.
Log in or sign up for Devpost to join the conversation.