Chrome Browser Extension - Video Playback Rate
This extension is primarily for chrome and (so far) mostly based on the getting started tutorial from Chrome Developers.
Why does this repository exist?
Well ... quite simple:
- I wanted to check out how a browser extension is made (a bit more hands-on)
- Wanted to explore some new things (e.g. Typescript, Rollup, Prettier, Linting, Workflows, GH-Hooks and so on...)
- Even though there are already extensions out there to increase the speed of a video, I wanted my own 🤪
I'm just getting started with this and build it in public in order to hold myself accountable and actually pull through. 🪅 Progress will be slow due to lots of other thing going on in my life.
ToDo
- Actually implement the core/base functionality (KISS)
- How is an extension being deployed?
- How is a third party library being added (npm)?
- Kind of answered this myself, although not really using a third party library but WebComponents instead
What else could I do with it?
- Rework UI & use ShadowParts (Shadow DOM CSS)
- Add proper error-handling
- Make extension themable (include in options)
- Learn more about .d.ts files and how to declare & add them into the project
- Make UI respect your latest change within the tab (if you selected 2 and reopen the extension it should also reflect speedValue 2)
- Configure prettier
- Add and configure ESLint
- Rethink the folder structure
- Configure rollup.js for building the project
- TS => JS => bundle/build/merge JS + Public folder => Dist
- [?] Make extension cross-browser compatible
- [?] Refactoring & Creation of Types
Architectural Overview of an Extension
The full and official introduction (from Chrome) can be found here.
Note: With Manifest V3 the "background page" is now using a Service Worker.
High-Level Overview
Content scripts
More details on content scripts can be found here.
Communication between the content script and the parent extension is done either by using the storage API or using messages.
