DISCLAIMER: I do not own the chrome extension, know it's developer, or have been paid to endorse it. My thoughts are my own.
While ad blockers can make browsing the web a significantly different experience than without, there is still a lot of content that I don't like seeing online. Not that there is anything inherently wrong with the things I don't enjoy viewing, it's just my personal preferences. I thought "gee, wouldn't it be great if there was a Chrome extension that could inject custom CSS rules you create into websites of your choosing to hide things you don't want to see?" Sure enough, there are several extensions made to do just that! I tried a few and found one that works well and has a nice UI.
User JavaScript and CSS is a great extension that I've been using to great effect. Here are a few of my favorite custom CSS rules I've created for myself to make browsing certain websites more enjoyable. Here are a few of my favorite custom CSS rules I've created for myself to make browsing certain websites more enjoyable.
I really don't like Youtube Shorts, and the site force-feeds you them constantly. There is no way to disable Shorts as the company seems pressured to compete with Tiktok. I don't think it encourages healthy, intentional, or mindful viewing and it feels more like brainrot when you viewing Shorts, as if the Tiktok content model is something to aspire to copy. These injections will hide them from your view.
ytd-emergency-onebox-renderer {
display: none;
}
/* Rows of youtube shorts on the search page */
ytd-reel-shelf-renderer {
display: none !important;
}
/* Rows of youtube shorts on the home page */
div#dismissible:has(span#title) {
display: none;
}
/* Misc bullshit messaging */
.ytd-statement-banner-renderer {
display: none;
}
I don't want to see what the people I follow like and retweet. I want to see their content!! Most of the retweets and likes from other people I see tend to be political, hot takes, or tiktok reposts. I don't miss this spam for the most part.
article:has([data-testid="socialContext"]) {
display: none;
}
I simply don't want to log in with my Google account, nor create an account. This clears the modals and allows usage of the basic models.
body {
pointer-events: auto;
}
div[data-testid=modal-no-auth-rate-limit] {
visibility: hidden;
display: none;
}
I'm not a fan of 'step fantasy' porn, where the actors pretend to be related. I really don't get this taboo appeal, but it's all over the platform. Sure you can set a Taste Profile if you have even a free account, but this only blocks categorical content on the My Recommendations page. Taste Profile doesn't apply when using the site in any other way than that.
/* step fantasy stuff */
a[title~="step" i],
a[title~="stepmom" i],
a[title~="stepdad" i],
a[title~="stepsis" i],
a[title~="stepsister" i],
a[title~="stepbro" i],
a[title~="stepbrother" i],
a[title~="stepdaughter" i],
a[title~="stepcousin" i],
a[data-title~="step" i],
a[data-title~="stepmom" i],
a[data-title~="stepdad" i],
a[data-title~="stepsis" i],
a[data-title~="stepsister" i],
a[data-title~="stepbro" i],
a[data-title~="stepbrother" i],
a[data-title~="stepdaughter" i],
a[data-title~="stepcousin" i] {
visibility: hidden;
}
This is a great website for viewing verb conjugations if you're learning spanish. This removes a modal that blocks the screen on page load
/* Limited page view popup. */
.ReactModalPortal {
visibility: hidden;
}
This (and any CSS injector) is not without it's shortcomings. There are some things that it can struggle with such as: