Content script doesn't re-execute on page reload

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.

Community · Accepted Answer · 2017-05-23 10:25:25Z

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.

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Aug 1, 2013 at 19:01

rsanchez

14.7k1 gold badge40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tzvi Over a year ago

Humm, I just added this : chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) { console.log('Page uses History API and we heard a pushSate/replaceState.'); // do your thing }); reloaded the extension and I don't get the console.log

rsanchez Over a year ago

Did you add the webNavigation permission? Are you making the call from a background page? webNavigation is not available from a content script.

Okan Kocyigit · Accepted Answer · 2013-08-01 18:50:58Z

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;
}

Collectives™ on Stack Overflow

Content script doesn't re-execute on page reload

2 Answers 2

2 Comments

manifest.json

mystyle.css

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

manifest.json

mystyle.css

Comments

Your Answer

Sign up or log in

Post as a guest

Related