6 ms·
I love the section on "Earning the pixels", as this is something I also put a lot of time into in extensions, from the target site itself to the options page in
by insin 4y ago
I love the section on "Earning the pixels", as this is something I also put a lot of time into in extensions, from the target site itself to the options page in my extensions having per-browser CSS to make sure it fits in with the browser's own options UI (and in light and dark mode).
With Twitter, earning the pixels in the site UI is even more fraught as it's a React Native for Web app, so you really don't want to touch the app's own DOM directly, as it will most likely get wiped out on the next render.
e.g. The latest version of Tweak New Twitter [0] keeps you on the "Following" timeline, gets rids of the new "For you" tab and adds a new "Retweets" tab - to highlight the Retweets tab as active when the user clicks it, I had to add a styling hook class to <body> and use that to manually style the Retweet tab as active and override styles for existing tabs to make them display as inactive. Another layer of fun: at any point the user can change the Default/Dim/Lights out theme and the highlight colour using the Display dialogue, so I needed to figure out how to detect these changes, figure out what was now being used and re-apply them to custom UI on the fly.
[0] https://github.com/insin/tweak-new-twitter#tweak-new-twitter https://github.com/insin/tweak-new-twitter#tweak-new-twitter