Chrome extensions are sandboxed. This means that, while they can access the page, they can’t interact with other Javascript variables that are live on the page or live in other Chrome extensions. All in all this is probably a good thing, because the global namespace gets polluted easily and there are probably security reasons why you want to have this feature as well.

However, this makes debugging Chrome extensions a pain in the neck, because none of the variables that are live in your extension are live in the page itself. This means that you can’t really debug them in the console. Lots of times all I want to do is inspect some objects on the page with jQuery and test that I’m selecting the right object on the page. I have jQuery in my extension, but I can’t run jQuery on the page, because the page doesn’t load it.

So I wrote a Chrome extension that’ll drop jQuery into any page you are testing, so you can inspect things from the console. It’s pretty simple again but will save me from writing console.log statements into my Chrome content script, tabbing over to chrome://extensions clicking “Reload”, refreshing the page, and then clicking around to trigger my behavior. You want to enable it while you are debugging your app, and then disable it when it’s complete, otherwise you’ll have a performance hit from the extra external request. It’s about three lines of Javascript, but they are a good three lines.

You can grab the extension here.

Liked what you read? I am available for hire.