A browser extension for reducing the noise on Twitter 🙌 Works in Firefox and Chromium
With the new Twitter layout hitting our screens, some weren't too happy about the "noise".
FWIW, I don't mind the new layout. I've almost forgotten how the old one looked now 😂 However, the new one is a little noisy when scrolling.
Enter "Focussed Twitter"!
What started as a bookmarklet is now a browser extension!
The idea for "Focussed Twitter" is to make it easier to focus on the tweets.
The original idea for better UX was that if I scrolled Twitter, I wanted everything else to fade away for a moment.
No need to remove elements or break the behavior/layout 👍
Everything that "Focussed Twitter" does can be switched off or configured to your liking in the extension options 💪
- Dim sides on scroll
- Set the dim
- Hide the sidebar
- Hide separators
- Remove tweet borders
- Increase the margin between tweets
- Permanently dim sides
- Focussed composing
- Hide metric counts
- Hide DMs drawer
`Focussed Twitter' is powered by CSS variables and MutationObserver. When an option is changed, the script updates inline CSS variables on the document. These then do things like trigger opacity changes and update transition timings 🤓
I'd love some! ❤️ Any PRs are welcome or suggestions.
Ideas include:
- Creating a better icon 😅
- Porting to other browsers besides Firefox && Chrome
- Cleaner styling for the popup window 😅
The code is in a place where it's not too heavy. There is a reason for this. If Twitter decides to change the UI structure significantly at some point, the extension will need updating.
- Rename
manifest.chrome.jsontomanifest.json. - Load the unpacked extension into Chrome by pointing at the focussed twitter directory.
- Rename
manifest.firefox.dev.jsontomanifest.json. - Load the add on into Firefox by pointing at the manifest file.
Made in haste by @jh3y 😅