Question

I’m trying to run a javascript command in a content script using Personalized-Web (a Chrome extension). I’m new to javascript & jquery, but I’ve found that entering this code:

javascript:jQuery("div.photo-container").die();

into my browser bar on a particular page achieves the desired result: it undoes a .live call performed in one of the page’s javascripts.

However, if I include that same code or $("div.photo-container").die(); in a content script, it does not work. I’ve also attempted including this script tag in the page context:

<script type="text/javascript">
    $("div.photo-container").die();
</script>

and chrome claims that $ or jQuery are not defined. However, the page’s own javascripts don’t include or refer to the jQuery source at any point, as far as I can tell.

So, what’s the difference between the browser bar, the content script, and the in-page <script> tag? How can I use one of the ‘automatic’ methods (i.e., not paste it into the browser bar)?

Answer 1

If you inject that script tag into the page, it should work. For example:

// Runs in the context of the webpage.
var injectScript = function() {
  $("div.photo-container").die();
}

// Runs in the context of the content script. We basically just append the DOM
// with the injected script and execute it so it will run.
var script = document.createElement('script');
script.appendChild(document.createTextNode('(' + injectScript + ')();'));
document.body.appendChild(script);

The above should work assuming your page has defined the $. If the $ doesn’t exist, that means jQuery didn’t load yet. Make sure your manifest has document_end defined as well.

...
"content_scripts": [
  {
    "matches": ["http://www.rim.com/*"],
    "js": ["content_script.js"],
    "run_at": "document_end"
  }
],
...

If that doesn’t work then Sometimes depending on the website, it is good to lazy load or smart load till the content (script) gets loaded because the webdesigner is asynchronously loading the scripts or content. In that case, do some research to see how jquery is being loaded. For example, do a timer with setTimeout or DOM events to figure out when it is time to run your injection. I do that many times on difficult websites such as Google+ Extensions.