Sustainability Salamander

Inspiration

We were inspired by shopping extensions such as honey and the growing concern over product sustainability. With just 100 companies contributing the majority of global emissions, we felt that it was necessary to raise awareness of this problem.

What it does

Finds the brand of the product you are looking at on Amazon and tells you how sustainable the company is

How we built it

We used vanilla JavaScript, HTML, and CSS to create a file structure based on the Chrome extension documentation. We added event listeners to listen for certain elements from the DOM of the current Amazon page (in our case, the manufacturer). We then moved to Figma to create mockups for the popup of our extension. Finally, we coded out the layout of the popup as well as added interactivity using JavaScript.

Challenges we ran into

We had some challenges with making the extension fully functional with bugs, shutting it down after a certain amount of time, and difficulty with the search bar.

Accomplishments that we're proud of

We’re proud of creating a working Google Chrome extension from scratch. The extension uses event listeners to interact with the DOM of the currently opened tab. All of us are proud that we learned about something new: some of us weren’t familiar with JavaScript, Figma, or building Chrome extensions at all when this hackathon first started.

What we learned

How to make google extensions using manifest 3, html5, css, and javascript How big corporate companies are affecting the environment

What's next for Sustainability Salamander

More bug fixes Better sustainability company suggestions Data that changes in real time

Built With

• css
• figma
• html
• javascript
• manifest