wridgeu / chrome-extension-video-playbackrate

Getting to know some stuff about browser/chrome extensions.

Hello there

My name is Marco 👋

I mostly do ABAP development in my regular job but love spending my free time on OSS, Web Development and lots of other interesting things and technologies. I also enjoy code reviews as well as talking about code and how to improve on it, so don't be afraid to message me. 🎤🐛 I'm open for any kind of feedback and always willing to learn & improve. Even more so since I'm completely self-taught in basically everything I do. 😶‍🌫️

I also love helping and teaching others, that is ... as far as I can. ☺️

• 📑 PersonalPage (demo/learning project)

---

GitHub Statistics

📄 UI5 Wiki (old notes from learning UI5, ~2020-2021)

Old notes from learning Web Development, or more specific, UI5 back around in 2020-2021. They're not updated anymore as the overall documentation of UI5 and it's ecosystem has evolved a lot. I strongly recommend and encourage checking out the docs to get started! Nowadays the "Wiki" is mostly used as playground for it's integration into my personal page.

chrome-extension-video-playbackrate's Issues

create long-lived connection

Might be necessary in order facilitate that the extensions functionality permanently exists.

• https://developer.chrome.com/docs/extensions/mv3/messaging/#connect

Not sure if it is really required by now.

cross-browser compatibility → build different versions?

Currently the extension is being developed against the Chrome browser. Long-Term a cross-browser compatibility would be nice.

• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension
• https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/

Adjust license

Look for a proper and fitting license.

Add context menu

Add extension and a few of it's basic settings to the context menu.

eg.

Create Pre-Commit Hook

Creation of a pre-commit hook to either abort commit if there are ESLint errors or execute things like Prettier automatically.

• https://github.com/typicode/husky
• https://prettier.io/docs/en/precommit.html

Add .github config

Add dependabot and optionally also a action that works in hand or together or instead of: #2

Maybe refactor regarding module usage

Currently there are several functions being exported, It'd probably be better to export entire objects 🤪 but more on that sometime else ...

figure out if event.target.selectedItem is faulty in UI5 select WebC

chrome-extension-video-playbackrate/src/options.ts

Line 37 in 57797c6

defaultSpeedSelector.addEventListener('change', async (event: any) => {

In my example case when selecting an option the event.target.x... was always one step behind and started usually (if not set within my code) with undefined.

Add .github config

Add an action that works hand in hand or together or instead of: #2

• continues with #4

adjust typescript types

check out different tooling

Explore some different toolings ... instead of completely building your own configuration with rollup (what I did until now), try using vite here as well.

Maybe even try using a framework (Vue or SolidJS are nice) instead of vanilla + UI5WebComponents.

Check out
https://github.com/crxjs/chrome-extension-tools → https://crxjs.dev/vite-plugin/

change popup behavior when no videos are on page (or pages without auth)

No videos on page could be handled (although not really sure if it's required because if there is no video ... there is obviously nothing to speed up.

Possible solution via popup:

On usage when used on -> chrome://extensions/

Investigate ContentScripts (were they replaced by ServiceWorkers in MV3?)

Check out content scripts to avoid being attached to the popup window see:

• https://stackoverflow.com/a/38948149/10323879
• https://developer.chrome.com/docs/extensions/mv3/content_scripts/
• https://stackoverflow.com/questions/55272272/chromeextension-storage-per-tab (tabId needs to be stored aswell)
• https://techinplanet.com/clear-temporary-storage-data-for-a-chrome-extension-when-browser-closes/

Use-Case:

Listen in the background (on the page) for changes e.g. via MutationObserver and handle them without using the popup.

Messaging necessary (as does the AdBlock-Plus addon)? Background null-port necessary to keep script running?

Refactoring the way .d.ts file(s) is/are used

Check .d.ts files out a bit more and do my shit properly :P ... maybe they're overkill and the types should be defined per module/file and maybe not. Who knows.

https://www.typescriptlang.org/docs/handbook/declaration-files/deep-dive.html

display current playbackspeed in icon

Create badge within the icon and display the current playbackspeed https://stackoverflow.com/a/5759182/10323879

Error when using the deployed version - tag 1.0.0

This could be due to the Service Worker not registering the contentscript.

Probable solutions

• https://stackoverflow.com/questions/28431505/unchecked-runtime-lasterror-when-using-chrome-api
• https://support.google.com/chrome/thread/2047906/unchecked-runtime-lasterror-the-message-port-closed-before-a-response-was-received?hl=en
  • https://developer.chrome.com/docs/extensions/reference/runtime/#event-onMessage
• https://stackoverflow.com/questions/54619817/how-to-fix-unchecked-runtime-lasterror-could-not-establish-connection-receivi

Adjust UI design (themable, shadow-DOM CSS)

• Make UI themable within the options page
• Rework UI of extension (Shadow DOM CSS Parts) => Adjusted handle in 980707b

Refactor modules/ts files

Instead of exposing X functions, I'd probably want to aim for objects or even make it class based, who knows.

Add prettier as plug-in for ESLint(?)

Possibly save on some configuration files? Gotta look into that: https://medium.com/javascript-scene/streamline-code-reviews-with-eslint-prettier-6fb817a6b51d#:~:text=Prettier%20can%20be%20run%20as,a%20win%20in%20my%20book.

https://github.com/prettier/eslint-plugin-prettier

Bundling: replace rollup with vite

Does this work? Is this a valid use-case? Let's see!