Content script doesn't re-execute on page reload - facebook

Question

I'm creating a content script Chrome extension that hides the newsfeed on the Facebook homepage.
This script loads when I first open facebook.com, but fails when navigating into Facebook and back to the main page (which is a URL that's defined in the extension correctly).
Here's my manifest.js file:
{
"name": "NewsBlock",
"description": "NewsBlock - Facebook Newsfeed Hider",
"version": "1.0.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*", "storage"
],
"browser_action": {
"default_title": "NewsBlock",
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["https://www.facebook.com/"],
"js": ["myscript.js"]
}
],
"manifest_version": 2
}
Here's my myscript.js file:
if (document.getElementById('home_stream'))
document.getElementById('home_stream').style.visibility = "hidden";
if (document.getElementById('pagelet_home_stream'))
document.getElementById('pagelet_home_stream').style.visibility = "hidden";
console.log("NewsBlock Activated...")
Any help in understanding why this isn't loaded when I navigate back to the homepage on Facebook will be amazing.

Answer 1

That's because on many occasions the Facebook page uses the history.pushstate method to navigate. This method can change the current url without causing a new page load. The navigation is simulated by replacing part of the page content with the result of ajax calls.
You can use the chrome.webNavigation.onHistoryStateUpdated event to detect that situation, as suggested in this answer https://stackoverflow.com/a/17584559/1507998.

Answer 2

Some links in facebook call ajax functions, so most of time clicking on a link in facebook doesn't change the page, just loads content via ajax. So your content script executes only once.
There are two possible solution,
You can also add a DOM change listener like DOMSubtreeModified, and run the code every time when content is changed.
You can add CSS code to page, so it doesn't need to be run every time even if page is changed via ajax.
Like this,
manifest.json
{
"name": "NewsBlock",
"description": "NewsBlock - Facebook Newsfeed Hider",
"version": "1.0.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*", "storage"
],
"browser_action": {
"default_title": "NewsBlock",
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["https://www.facebook.com/"],
"js": ["myscript.js"],
"css": ["mystyle.css"]
}
],
"manifest_version": 2
}
mystyle.css
#home_stream, #pagelet_home_stream {
visibility: hidden;
}