OLD | NEW |
1 <h1>Content Scripts</h1> | 1 <h1>Content Scripts</h1> |
2 | 2 |
3 | 3 |
4 <p> | 4 <p> |
5 Content scripts are JavaScript files that run in the context of web pages. | 5 Content scripts are JavaScript files that run in the context of web pages. |
6 By using the standard | 6 By using the standard |
7 <a href="http://www.w3.org/TR/DOM-Level-2-HTML/">Document | 7 <a href="http://www.w3.org/TR/DOM-Level-2-HTML/">Document |
8 Object Model</a> (DOM), | 8 Object Model</a> (DOM), |
9 they can read details of the web pages the browser visits, | 9 they can read details of the web pages the browser visits, |
10 or make changes to them. | 10 or make changes to them. |
(...skipping 324 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
335 | 335 |
336 <p>Another important benefit of isolated worlds is that they completely separate
the JavaScript on the page from the JavaScript in extensions. This allows us to
offer extra functionality to content scripts that should not be accessible from
web pages without worrying about web pages accessing it. | 336 <p>Another important benefit of isolated worlds is that they completely separate
the JavaScript on the page from the JavaScript in extensions. This allows us to
offer extra functionality to content scripts that should not be accessible from
web pages without worrying about web pages accessing it. |
337 | 337 |
338 | 338 |
339 <h2 id="host-page-communication">Communication with the embedding page</h2> | 339 <h2 id="host-page-communication">Communication with the embedding page</h2> |
340 | 340 |
341 <p>Although the execution environments of content scripts and the pages that hos
t them are isolated from each other, they share access to the page's DOM. If the
page wishes to communicate with the content script (or with the extension via t
he content script), it must do so through the shared DOM.</p> | 341 <p>Although the execution environments of content scripts and the pages that hos
t them are isolated from each other, they share access to the page's DOM. If the
page wishes to communicate with the content script (or with the extension via t
he content script), it must do so through the shared DOM.</p> |
342 <p>An example can be accomplished using window.postMessage (or window.webkitPost
Message for Transferable objects):</p> | 342 <p>An example can be accomplished using window.postMessage (or window.webkitPost
Message for Transferable objects):</p> |
343 <pre>contentscript.js | 343 <pre>contentscript.js |
344 ================ | 344 ================ |
345 var port = chrome.extension.connect(); | 345 var port = chrome.runtime.connect(); |
346 | 346 |
347 window.addEventListener("message", function(event) { | 347 window.addEventListener("message", function(event) { |
348 // We only accept messages from ourselves | 348 // We only accept messages from ourselves |
349 if (event.source != window) | 349 if (event.source != window) |
350 return; | 350 return; |
351 | 351 |
352 if (event.data.type && (event.data.type == "FROM_PAGE")) { | 352 if (event.data.type && (event.data.type == "FROM_PAGE")) { |
353 console.log("Content script received: " + event.data.text); | 353 console.log("Content script received: " + event.data.text); |
354 port.postMessage(event.data.text); | 354 port.postMessage(event.data.text); |
355 } | 355 } |
(...skipping 96 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
452 | 452 |
453 <p> | 453 <p> |
454 The next video describes message passing, | 454 The next video describes message passing, |
455 featuring an example of a content script | 455 featuring an example of a content script |
456 sending a request to its parent extension. | 456 sending a request to its parent extension. |
457 </p> | 457 </p> |
458 | 458 |
459 <p> | 459 <p> |
460 <iframe title="YouTube video player" width="640" height="390" src="http://www.yo
utube.com/embed/B4M_a7xejYI?rel=0" frameborder="0" allowfullscreen></iframe> | 460 <iframe title="YouTube video player" width="640" height="390" src="http://www.yo
utube.com/embed/B4M_a7xejYI?rel=0" frameborder="0" allowfullscreen></iframe> |
461 </p> | 461 </p> |
OLD | NEW |