Anti-Facebook Shield: prevent wasting time on Facebook by auto-hiding Stories and Posts on Facebook web on desktop

Anti-Facebook Shield.md

NB: as of 16 April 2023, I no longer use Facebook. Never. SO, this gist is discontinued.
Latest update was at 12 Jul 2023

---

**Overview of the problem:**

Usually when you open Facebook main page facebook.com,
you suddenly find that you have wasted some time just scrolling endless stories and|or posts.
then you wish that you had not wasted your precious time like that.
one day, I was like you. then I decided that I will NOT scroll Facebook again.
but, the problem simply is that I can't hold my self.
I say "this is the last post I see today". then I scroll to the next. then to the next... etc
until I find my self losing precious time that I could have at least spent it on something more fun ,a movie for example.
so, here is the solution:
I wrote CSS & JS code to hide that crap so that I wont fall for that scrolling bait.
instead, I can continue to the place that I initially opened Facebook for
,eg: a specific Facebook page that I wanna see its updates
or a friend that I wanna chat with.
instead of just scroll and keep scrolling until I forget the reason why I opened facebook.com

Solution:
1 - install an Extension for your web browser that enables you to write custom JS and CSS code for websites.

I use this Extension for Brave browser : user-javascript-and-css

2 - copy the above CSS and JS code to the Extension and target https://w*.facebook.com/*

NB: I update this gist regularly to get it working with each new facebook update
so if it does not work for you, wait for my update.
Latest update is at 5 Feb 2023.
Give this gist a star 🌟 to tell me you are interested

Result 👇:

result.png

style.css

/* hide posts */
div[aria-posinset], div[class*=feed], div[role=article]{
	display: none;
	overflow-y: hidden;
}
body, html {
	overflow-y: hidden;
}

/* hide stories */
div[aria-label="Stories"] > div > div > div {
    display: none;
    /* margin: 200px; */
    /* align-items: center; */
    /* justify-content: center; */
}

/* show create_story btn */
div[aria-label="Stories"] > div > div > div:first-child {
    display: block !important;
    /* width: 100px !important; */
    /* padding: 200px; */
    /* margin: 0px; */
    max-width: 20%;
    /* align-items: center; */
    /* justify-content: center; */
    left: 38% !important;
    position: sticky;
    /* right: 5% !important; */
}

div[style="position: absolute; top: -10000px;"]{
	display: none;
}

z.index.js

var oldHref = document.location.href;
var bodyList = document.querySelector("body")
var facebookUrlRegx = new RegExp(/https:\/\/[a-z]*\.facebook.com\/[^\/]*\/{0,1}.*/)
function shouldBeHidden (){
	var url = document.location.href;
	if (
			(
				(!url.includes('/groups'))
				&&
				(!url.includes('/posts'))
				&&
				(!url.includes('/photo'))
				&&
				(!url.includes('/permalink'))
				&&
				(!url.includes('/video'))
				&&
				(!facebookUrlRegx.test(url))
			) || (
				url == 'https://www.facebook.com'
		    ) || (
		    	url == 'https://www.facebook.com/'
	    	)
		)
		{
			return true;
		} else {
			return false;
		}
}
cssTag = document.querySelector('style[data-source="User JavaScript and CSS extension"]');
func = async()=>{

    if (shouldBeHidden()){
		cssTag.disabled = false;
		// alert('hidden');

	}else{
    	await new Promise(r => setTimeout(r, 2000));
		cssTag.disabled = true;
		// alert('not hidden');
	}

}

// setInterval(func, 2000);
window.document.addEventListener('load', func)
func();

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (oldHref != document.location.href) {
        oldHref = document.location.href;
		func()
        }
    });
});

var config = {
    childList: true,
    subtree: true
};

observer.observe(bodyList, config);