Our team made a Chrome extension in React that smart inverts videos in the browser for QWER Hacks 2021.
We were inspired by technologies that change color rendering to ease eye strain.
Penumbra is a chrome extension that inverts bright colors of videos in the browser, allowing users to play videos in "dark mode" while preserving the color scheme of the rest of the browser.
Lecture without Penumbra color inverter.
Lecture video with Penumbra color inverter. Note: color hues are maintained.
Penumbra was built as a chrome extension, and uses React to modify webpage elements.
Penumbra successfully inverts the colors of videos, including those which are live streamed. Our "smart inversion" tool preserves color hues, and maintains desired aesthetics of the original video better than some other color inversion technologies.
We all learned how to build a chrome extension for the first time. For some of our team members, it was our first experience using react and figma.
We are considering functionality that would prevent Penumbra from inverting videos that are already recorded with a dark color scheme. At the moment, the user needs to manually toggle inverter. We also plan to publish Penumbra to the chrome web store, so that other students may use it.
You can download a release here then:
- Unzip the compressed directory
- Go to
chrome://extensions/
- Ensure
Developer Mode
is enabled - Click
load unpacked
- Select the unzipped folder
- Enjoy!
In the project directory, you must first run:
Downloads all of Penumbra's dependencies.
Runs the extension in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify