StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POgetElementById not working in Google Chrome extension for <embed>
text
Body
copied!<p>In my Google Chrome extension content script I have the following:</p> <pre><code>jQuery(document).ready(function() { var player = document.getElementById('player'); console.log(player); console.log(document); }); </code></pre> <p>I'm running it on any Hulu video, which has the following embed with id='player'</p> <pre><code><embed id="player" type="application/x-shockwave-flash" src="/site-player/playerwrapper.swf?cb=e80c477cL" width="100%" height="428" style="z-index:10;" name="player" quality="high" allowscriptaccess="always" allowfullscreen="true" bgcolor="#000000" flashvars="bitrate=700000&amp;user_id=-1&amp;startLoadWrapperTime=1299572732904&amp;overrideBrand=&amp;referrer=http://www.hulu.com/watch/20338/saturday-night-live-steve-carell-monologue#continuous_play=on&amp;continuous_play_on=true&amp;sortBy=&amp;initMode=4&amp;modes=4&amp;content_id=7751491&amp;cb=2011-3-8-8&amp;v=3"> </code></pre> <p>For example, the following link <a href="http://www.hulu.com/watch/20337/saturday-night-live-snl-digital-short-the-japanese-office" rel="nofollow">http://www.hulu.com/watch/20337/saturday-night-live-snl-digital-short-the-japanese-office</a></p> <p>But when the script is run, console.log(player) returns null. However, console.log(document) returns the proper document object. Even if I try <code>var player = Document.prototype.getElementById.apply(document, ['player']);</code> I still get null.</p> <p>The funny thing is, if I try it from the Chrome JavaScript Console, it works fine, I get the proper <code><embed></code> printed to console.</p> <p>Any ideas why this isn't working in my content script?</p> <p>UPDATE: As requested, here are the complete contents of my chrome extension folder:</p> <p>manifest.json:</p> <pre><code>{ "name": "gebidtest", "version": "1", "permissions": [ "http://*/*", "https://*/*" ], "content_scripts": [{ "matches": ["http://*/*"], "js": ["jquery-1.5.1.min.js","app.js"] }] } </code></pre> <p>app.js:</p> <pre><code>jQuery(document).ready( function() { var player = document.getElementById('player'); console.log(player); console.log(document); }); </code></pre> <p>jquery-1.5.1.min.js: I just downloaded it</p> <p>I'm using <code>Chrome version 10.0.648.127</code> on a Mac, but I also tried it on a PC with the same results</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload