Title
Userscripts #2 -- monkeying and spelunking in FFZ browser extensionPlan
Following on from 2025-04-28 13:46 Technosoap live-stream, look around FFZ source code:
- hopefully fix my userscript so it doesn’t break FFZ
- see how FFZ tackles goals that are similar to mine.
Then address any outstanding to-dos.
Live notes (tidied)
spelunking the FFZ codebase
https://github.com/FrankerFaceZ/FrankerFaceZ
From the readme:
localStorage.ffzDebugMode = true;might be handy later
Example of ffz--side-nav-card-offline in action:
<div class="ScTransitionBase-sc-hx4quq-0 hGaUsM tw-transition" aria-hidden="false" style="transition-property: transform, opacity; transition-timing-function: ease;">
<div>
<div class="Layout-sc-1xcs6mc-0 cwtKyw side-nav-card ffz--side-nav-card-offline">
[...]Hmm, the class is missing when my userscript active.
FFZ uses DOMTokenList.toggle to change elements whereas I’ve been using
setAttribute('style'. [...]). Perhaps I should do the same.
elemental.ts ElementalWrapper.add uses MutationObserver to this.emit(‘mutate’, […]);
can use GreaseMonkey functions like GM_addStyle in TamperMonkey, but do need to add to @grant
ref https://stackoverflow.com/questions/23683439/gm-addstyle-equivalent-in-tampermonkey
aside: Rubber duck debugging
https://en.wikipedia.org/wiki/Rubber_duck_debugging
aside: organizing notes and thoughts
https://www.soenkeahrens.de/en/takesmartnotes — in particular, trying to express a thought in your own words helps you remember it and is a self-check you understand it.
https://en.wikipedia.org/wiki/Getting_Things_Done
Work so far pushed to https://github.com/technosoap/soap-twitch-follow-highlight-userscript
Next time: get acquainted basic Chrome profiling/performance
I want to check moving from a fixed timer (setInterval) to MutationObserver
doesn’t create a resource hog.