1

I have a content script running inside the Gmail UI and I am injecting some new HTML at different points. This is all working, but to keep the code clean I wanted to insert pre-defined HTML markup into certain parts of the page in a single function call.

This all seems feasible using chrome.extension.getURL(), but when I was testing this, it looks like chrome.extension is undefined! I was unable to find anywhere in the documentation that says this shouldn't be defined and several places where it says it should.

I am using chrome Version 39.0.2171.95 (64-bit)

Here is what the chrome object looks like in the javascript console:

chrome object

First off, anyone know why chrome.extension might be undefined? Secondly, is there another (perhaps better) way to do this? I'd rather not just programmatically inject a large amount HTML into the page in code using jQuery, etc. in the content script, but can resort to this if there is no other way.

BryanP
  • 680
  • 6
  • 26
  • Did you try to actually execute `chrome.extension.getURL()` in your code as opposed to testing the console? Or is your question specifically about the console? – Xan Jan 13 '15 at 00:27
  • I did - chrome.extension.getURL() gives this: Uncaught TypeError: Cannot read property 'getURL' of undefined – BryanP Jan 13 '15 at 00:29
  • In your content script code? Or are you injecting some other code from the content script? – Xan Jan 13 '15 at 00:30
  • This is called inside my content script JS – BryanP Jan 13 '15 at 00:32
  • I don't think that's true. Anyway, writing an answer explaining it. – Xan Jan 13 '15 at 00:34
  • 1
    You are correct - I assumed (incorrectly) that since I injected another script from within a script defined in the manifest under "content scripts" that it is also a "content script" and would have the same properties in the chrome object. I appreciate the heads up! – BryanP Jan 13 '15 at 00:37
  • Aha. Well, I mention this situation (commonly called "page-level script") in my answer. I tried to make it as extensive as possible. – Xan Jan 13 '15 at 00:46

1 Answers1

6

If you're testing this in the console, you must be aware of the concept of the Isolated World. When you add a content script, it has a separate JavaScript context for itself that is isolated from the page.

At the top of the Console tab of Dev Tools, you'll see <top frame> in a dropdown. This is a dropdown that selects JS context it is executing in. It will list frames inside the document and all extensions that have content scripts injected.

The chrome object you show in the screenshot corresponds to what the webpage normally sees. If you switch context, you'll see a different picture:

Switching context

In any case, if you are really executing chrome.extension.getURL() in the content script - it will be well defined.

Now, if you injected a <script> tag in the page and tried it in that code - it would fail again, since the code will be in the page context. See this question for this situation.

Finally, most of the Chrome API will not be exposed to content scripts for security reasons. If an API is undefined when it shouldn't be, you may need a background page to do the job for you.

Community
  • 1
  • 1
Xan
  • 74,770
  • 16
  • 179
  • 206