Technosoap's Notes

2025-04-28 13:46 Technosoap live-stream

2 min read

Title

Userscripts -- monkeying around with the twitch.tv homepage

Plan

  • 5 min introduction to Userscripts
  • try write a Userscript for twitch.tv that highlights some users in the “Followed channels” sidebar according to user settings.

Live notes

Developing in Chrome for now

I prefer Firefox, but Chrome is by far the most popular browser right now, so I’m developing in that, because my Javascript and web front-end knowledge is minimal.

Only pushing the envelope in one direction — “stay on the well worn path”/“pick your battles”

Use userscripts to avoid accidentally confusing test vs production deployments.

Finding the “Followed channels” elements

Looking for some sort of marker that I can use to identify all the entries in the “Followed channels” sidebar.

<div class="Layout-sc-1xcs6mc-0 xxjeD side-nav-card__title"><p title="GiantBombForever" data-a-target="side-nav-title" class="CoreText-sc-1txzju1-0 fdYGpZ HcPqQ InjectLayout-sc-1i43xsx-0">GiantBombForever</p></div>

side-nav-card__title looks like a winner!

Comparing querySelector and getElementsByClassName

Thank you twitch user RacePeaceDay for the hint!

querySelector / querySelectorAll let you use CSS selectors, so is more capable than getElementsByClassName (e.g. you can pseudo-selectors like first-child)

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

to set CSS !important, use element.setAttribute, not element.style.[...]

ref https://gist.github.com/tzi/2953155

element.setAttribute( 'style', 'background-image: url( "http://placekitten.com/200/300" ) !important' );

JavaScript footgun: remember your Object literals also have all built-in attributes too.

It breaks FrankerFaceZ extension :(

https://www.frankerfacez.com/

Not sure why. I’ll investigate next time.

Work so far pushed to https://github.com/technosoap/soap-twitch-follow-highlight-userscript

TODO investigate toolchain support for userscripts

  • TypeScript?
  • JSX/TSX?
  • wasm?

I suspect most people stick to the Javascript, and if they are going to go the effort of setting up a toolchain, they’ll go for a full blown web browser extension.

Graph View

Backlinks