Chrome extension how to inject my content script into all Facebook pages

Question

My manifest looks like this:

{
  "manifest_version": 2,

  "name": "Facebook Extension",
  "version": "1.0",

  "browser_action": {
    "default_icon": "images/fbh.png",
    "default_popup": "fbh-popup.html"
  },

  "permissions": [
    "storage",
    "background",
    "tabs",
    "http://www.facebook.com/*",
    "https://www.facebook.com/*"
  ],

  "content_scripts": [
    {
      "matches": [
        "http://www.facebook.com/*", 
        "https://www.facebook.com/*"
      ],
      "js": ["js/jquery-1.9.1.min.js", "js/fbh-main.js"],
      "css": ["css/fbh-main.css"],
      "run_at": "document_end"
    }
  ],

  "background":{
    "persistent": true,
    "scripts": ["js/jquery-1.9.1.min.js","js/fbh-background.js"]
  }
}

I want to inject my content script each time I go to a new page within Facebook. For example, if I click on a user's profile I want to inject the content script.

In my background page I have the following listener:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
    console.log(changeInfo);
    if (changeInfo.status === 'complete') {
        chrome.tabs.executeScript(null, {file: "js/fbh-main.js"});
    }
});

There are a couple of problems with this, however. First, this function tries to inject my content script into all pages. I need to be able to read the manifest permissions. Second, if I start at www.facebook.com, the content script does what it's supposed to do. But if, from there, I click the profile for "foo" and go to www.facebook.com/foo, the content script IS injected (as evidenced by a console.log message) but it does not do what it's supposed to do. I think it's being injected too soon because if I navigate directly to www.facebook.com/foo, the content script is loaded and does its thing.

Is there a better way to do this?

Is [this question](http://stackoverflow.com/questions/6497548/chrome-extension-make-it-run-every-page-load) of any help? — thordarson, Feb 17 '13 at 01:35

score 1 · Answer 1 · answered Feb 17 '13 at 10:05

Try this code

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo,tab) {
    console.log(changeInfo);
    if ((tab.url.indexOf("http://www.facebook.com/") !=-1 || tab.url.indexOf("https://www.facebook.com/") !=-1) && changeInfo.status === 'complete') {
        chrome.tabs.executeScript(tabId, {file: "js/fbh-main.js"});
    }
});

chrome.tabs.executeScript(null, will execute script in active tab of Current Window, which may change on user interaction, chrome.tabs.executeScript(tabId will always ensure script injection in tab targeted.
chrome.tabs.onUpdated.addListener will fire for every tab, added filter tab.url.indexOf("https://www.facebook.com/") to ensure script is injected in face book pages.

Share your manifest ,content script and related files if problem still persist

Paul Fournel · Answer 2 · 2013-02-17T08:50:27.527

0

If your script is executed to soon, you can always use the $.(your code here); of jQuery

EDIT : For auto upadate issue, you can simply add a listener in the content script

document.addEventListener("DOMSubtreeModified", function(event){
    //something on the page has changed
});

edited Feb 17 '13 at 08:50

answered Feb 17 '13 at 00:51

Paul Fournel

10,807
9
40
68

I'm no Chrome Extensions expert, but isn't setting a hard coded timeout for your code kind of a bad practice? Shouldn't you be listening to an event instead? – thordarson Feb 17 '13 at 01:34
Thx, you are right, it was late :p I think the solution here is better. – Paul Fournel Feb 17 '13 at 08:51

Chrome extension how to inject my content script into all Facebook pages

2 Answers2