0

I'm writing a chrome extension that needs to replace the content of facebook posts that contain certain keywords. It's working fine on page load, but when I follow any links within facebook the script doesn't run. (So it works on the home page, but if I press the "home" link it loads that same page without this script)

I had a console log message saying that the script was loaded, which I'd only see once for the first page.

I've managed to make it load code every time the new page is loaded by setting

 "all_frames": true

Now, when I click on the new page I get the console message saying it's loaded when I follow a link (in fact, I get that message multiple times even if I don't follow a link)

I searched for the div tags to check by using jquery and:

$("div.userContentWrapper").each(function( index ) {
    check_node($(this));
});

Which works perfectly when refreshing the page on on the first page load. However, when this is re-run later (and after I get the second "loaded" message in the console log) it's not finding any of these divs (even though they clearly still exist in the page) - I've tried using setTimeout to check that it wasn't being run too soon, with no success.

Any ideas how I can achieve this? Essentially, I want to run check_node() for all divs with the class of "userContentWrapper", and I want to run that every time I load a new page.

(I also want to run that when scrolling as the page auto-loads new posts, but I'm doing that with a mutation observer)

the code

manifest.json

{
    "manifest_version": 2,
    "name": "Fad Stopper",
    "version": "1.2",
    "description": "Removes annoying fads from Facebook and Twitter",
    "content_scripts": [
    {
        "matches": ["https://twitter.com/*", "*://www.facebook.com/*"],
        "js": ["jquery-2.1.1.min.js", "content.js"],
        "run_at": "document_end",
        "all_frames": true
    }
    ],
    "permissions": [
        "storage"
    ],
    "options_page": "options.html"
}

content.js (I'm listing only the important code, not the entirety of the file)

console.log('fadstopper loaded! '+Math.random().toString());

$( document ).ready(function() {
    console.log( "ready! "+$site );
    $("div.userContentWrapper").each(function( index ) {
        console.log("Found node");
        check_node($(this));
    });
});

function check_node($node) {
  // Blah blah, do check & replace content if necessary
}

Any help is SUPER appreciated!

Tushar
  • 481
  • 6
  • 26
Azrael
  • 31
  • 3
  • I cannot mark this as duplicate, but essentially your question boils down to http://stackoverflow.com/questions/24590970/chrome-extension-on-facebook-with-dynamic-posts – Xan Sep 23 '14 at 10:55
  • Xan - thanks for the link - I've got that part of the code working (using mutation observers to watch the dom change as new posts are added into the existing page) - my question here is how to pick up the new posts after clicking a link and facebook loads a new page, although the code runs it doesn't seem to pick up the nodes to check (even the mutation observers don't pick them up) – Azrael Sep 23 '14 at 23:54

0 Answers0