| OLD | NEW |
|---|
| 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: | 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: |
| 2 1) The <head> information in this page is significant, should be uniform | 2 1) The <head> information in this page is significant, should be uniform |
| 3 across api docs and should be edited only with knowledge of the | 3 across api docs and should be edited only with knowledge of the |
| 4 templating mechanism. | 4 templating mechanism. |
| 5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a | 5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a |
| 6 browser, it will be re-generated from the template, json schema and | 6 browser, it will be re-generated from the template, json schema and |
| 7 authored overview content. | 7 authored overview content. |
| 8 4) The <body>.innerHTML is also generated by an offline step so that this | 8 4) The <body>.innerHTML is also generated by an offline step so that this |
| 9 page may easily be indexed by search engines. | 9 page may easily be indexed by search engines. |
| 10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> | 10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> |
| 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| 12 <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css"> | 12 <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css"> |
| 13 <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> | 13 <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> |
| 14 <script type="text/javascript" src="../../../third_party/jstemplate/jstempla
te_compiled.js"> | 14 <script type="text/javascript" src="../../../third_party/jstemplate/jstempla
te_compiled.js"> |
| 15 </script> | 15 </script> |
| 16 <script type="text/javascript" src="js/api_page_generator.js"></script> | 16 <script type="text/javascript" src="js/api_page_generator.js"></script> |
| 17 <script type="text/javascript" src="js/bootstrap.js"></script> | 17 <script type="text/javascript" src="js/bootstrap.js"></script> |
| 18 <title>Content Scripts</title></head><body> <div id="gc-container" class="lab
s"> | 18 <title>Content Scripts - Google Chrome Extensions - Google Code</title></head>
<body> <div id="gc-container" class="labs"> |
| 19 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> | 19 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> |
| 20 <!-- In particular, sub-templates that recurse, must be used by allowing | 20 <!-- In particular, sub-templates that recurse, must be used by allowing |
| 21 jstemplate to make a copy of the template in this section which | 21 jstemplate to make a copy of the template in this section which |
| 22 are not operated on by way of the jsskip="true" --> | 22 are not operated on by way of the jsskip="true" --> |
| 23 <div style="display:none"> | 23 <div style="display:none"> |
| 24 | 24 |
| 25 <!-- VALUE --> | 25 <!-- VALUE --> |
| 26 <div id="valueTemplate"> | 26 <div id="valueTemplate"> |
| 27 <dt> | 27 <dt> |
| 28 <var>paramName</var> | 28 <var>paramName</var> |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 67 </div> <!-- /VALUE --> | 67 </div> <!-- /VALUE --> |
| 68 | 68 |
| 69 </div> <!-- /SUBTEMPLATES --> | 69 </div> <!-- /SUBTEMPLATES --> |
| 70 | 70 |
| 71 <a id="top"></a> | 71 <a id="top"></a> |
| 72 <div id="skipto"> | 72 <div id="skipto"> |
| 73 <a href="#gc-pagecontent">Skip to page content</a> | 73 <a href="#gc-pagecontent">Skip to page content</a> |
| 74 <a href="#gc-toc">Skip to main navigation</a> | 74 <a href="#gc-toc">Skip to main navigation</a> |
| 75 </div> | 75 </div> |
| 76 <!-- API HEADER --> | 76 <!-- API HEADER --> |
| 77 <div id="gc-header"> | 77 <table id="header" width="100%" cellspacing="0" border="0"> |
| 78 <div id="logo"> | 78 <tbody><tr> |
| 79 <td valign="middle"><img src="images/code_labs_logo.gif" height="43" wid
th="161" alt="Google Code Labs" style="border:0; margin:0;"></td> |
| 80 <td valign="middle" width="100%" style="padding-left:0.6em;"> |
| 81 <form action="http://www.google.com/cse" id="cse" style="margin-top:0.
5em"> |
| 82 <div id="gsc-search-box"> |
| 83 <input type="hidden" name="cx" value="002967670403910741006:61_cvz
fqtno"> |
| 84 <input type="hidden" name="ie" value="UTF-8"> |
| 85 <input type="text" name="q" size="55"> |
| 86 <input class="gsc-search-button" type="submit" name="sa" value="Se
arch"> |
| 87 <br> |
| 88 <span class="greytext">e.g. "ajax apis" or "open source"</span> |
| 89 </div> |
| 90 </form> |
| 79 | 91 |
| 80 | 92 <script type="text/javascript" src="http://www.google.com/jsapi"></scr
ipt> |
| 81 <img src="images/code_labs_logo.gif" height="43" width="161" alt="Googl
e Code Labs" style="border:0;"> | 93 <script type="text/javascript">google.load("elements", "1", {packages:
"transliteration"});</script> |
| 82 | 94 <script type="text/javascript" src="http://www.google.com/coop/cse/t13
n?form=cse&t13n_langs=en"></script> |
| 83 | 95 <script type="text/javascript" src="http://www.google.com/coop/cse/bra
nd?form=cse&lang=en"></script> |
| 84 </div> | 96 </td> |
| 85 <div id="search"> | 97 </tr> |
| 86 <div id="searchForm" class="searchForm"> | 98 </tbody></table> |
| 87 <form action="http://www.google.com/cse" id="cse"> | |
| 88 <div id="gsc-search-box"> | |
| 89 <input type="hidden" name="cx" value="002967670403910741006:61_cvzfq
tno"> | |
| 90 <input type="hidden" name="ie" value="UTF-8"> | |
| 91 <input type="text" name="q" size="31"> | |
| 92 <input class="gsc-search-button" type="submit" name="sa" value="Sear
ch"> | |
| 93 </div> | |
| 94 </form> | |
| 95 <p> </p> | |
| 96 </div> <!-- end searchForm --> | |
| 97 | |
| 98 <script type="text/javascript" src="http://www.google.com/jsapi"></scrip
t> | |
| 99 <script type="text/javascript">google.load("elements", "1", {packages: "
transliteration"});</script> | |
| 100 <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?
form=cse&t13n_langs=en"></script> | |
| 101 <script type="text/javascript" src="http://www.google.com/coop/cse/brand
?form=cse&lang=en"></script> | |
| 102 </div> <!-- end search --> | |
| 103 </div> <!-- end gc-header --> | |
| 104 | 99 |
| 105 <div id="codesiteContent"> | 100 <div id="codesiteContent"> |
| 106 | 101 |
| 107 <a id="gc-topnav-anchor"></a> | 102 <a id="gc-topnav-anchor"></a> |
| 108 <div id="gc-topnav"> | 103 <div id="gc-topnav"> |
| 109 <h1>Google Chrome Extensions (<a href="/labs/">Labs</a>)</h1> | 104 <h1>Google Chrome Extensions (<a href="/labs/">Labs</a>)</h1> |
| 110 <ul id="home" class="gc-topnav-tabs"> | 105 <ul id="home" class="gc-topnav-tabs"> |
| 111 <li id="home_link"> | 106 <li id="home_link"> |
| 112 <a href="index.html" class="selected" title="Google Chrome Extension
s documentation home page">Home</a> | 107 <a href="index.html" class="selected" title="Google Chrome Extension
s documentation home page">Home</a> |
| 113 </li> | 108 </li> |
| 114 <li id="blog_link"> | 109 <li id="group_link"> |
| 115 <a href="http://blog.chromium.org/" title="Chromium blog">Blog</a> | 110 <a href="http://groups.google.com/group/chromium-extensions" title="
Google Chrome Extensions mailing list">Group</a> |
| 116 </li> | 111 </li> |
| 117 <li id="faq_link"> | 112 <li id="samples_link"> |
| 118 <a href="faq.html" title="Google Chrome Extensions FAQ">FAQ</a> | 113 <a href="samples.html" title="Google Chrome Extensions samples">Samp
les</a> |
| 119 </li> | 114 </li> |
| 120 <li id="group_link"> | 115 <!-- |
| 121 <a href="http://groups.google.com/group/chromium-extensions" title="
Chromium-Extensions group">Group</a> | |
| 122 </li> | |
| 123 <li id="terms_link"> | 116 <li id="terms_link"> |
| 124 Terms | 117 Terms |
| 125 </li> | 118 </li> |
| 119 --> |
| 126 </ul> | 120 </ul> |
| 127 </div> <!-- end gc-topnav --> | 121 </div> <!-- end gc-topnav --> |
| 128 | 122 |
| 129 <div class="g-section g-tpl-170"> | 123 <div class="g-section g-tpl-170"> |
| 130 <!-- SIDENAV --> | 124 <!-- SIDENAV --> |
| 131 <div class="g-unit g-first" id="gc-toc"> | 125 <div class="g-unit g-first" id="gc-toc"> |
| 132 <ul> | 126 <ul> |
| 133 <li><a href="index.html">Home</a></li> | 127 <li><a href="index.html">Home</a></li> |
| 134 <li><a href="getstarted.html">Getting Started</a></li> | 128 <li><a href="getstarted.html">Getting Started</a></li> |
| 135 <li><a href="overview.html">Overview</a></li> | 129 <li><a href="overview.html">Overview</a></li> |
| (...skipping 273 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 409 | 403 |
| 410 <h2 id="execution-environment">Execution environment</h2> | 404 <h2 id="execution-environment">Execution environment</h2> |
| 411 | 405 |
| 412 <p>Content scripts execute in a special environment called an <em>isolated world
</em>. They have access to the DOM of the page they are injected into, but not t
o any JavaScript variables or functions created by the page. It looks to each co
ntent script as if there is no other JavaScript executing on the page it is runn
ing on. The same is true in reverse: JavaScript running on the page cannot call
any functions or access any variables defined by content scripts. | 406 <p>Content scripts execute in a special environment called an <em>isolated world
</em>. They have access to the DOM of the page they are injected into, but not t
o any JavaScript variables or functions created by the page. It looks to each co
ntent script as if there is no other JavaScript executing on the page it is runn
ing on. The same is true in reverse: JavaScript running on the page cannot call
any functions or access any variables defined by content scripts. |
| 413 | 407 |
| 414 </p><p>For example, consider this simple page: | 408 </p><p>For example, consider this simple page: |
| 415 | 409 |
| 416 </p><pre>hello.html | 410 </p><pre>hello.html |
| 417 ========== | 411 ========== |
| 418 <html> | 412 <html> |
| 419 <button id="button">click me</button> | 413 <button id="mybutton">click me</button> |
| 420 <script> | 414 <script> |
| 421 var greeting = "hello!"; | 415 var greeting = "hello, "; |
| 422 function sayGreeting() { | 416 var button = document.getElementById("mybutton"); |
| 423 alert(greeting); | 417 button.person_name = "Bob"; |
| 424 } | 418 button.addEventListener("click", function() { |
| 425 document.getElementById("button").onclick = sayGreeting; | 419 alert(greeting + button.person_name + "."); |
| 420 }, false); |
| 426 </script> | 421 </script> |
| 427 </html></pre> | 422 </html></pre> |
| 428 | 423 |
| 429 <p>Now, suppose this content script was injected into hello.html: | 424 <p>Now, suppose this content script was injected into hello.html: |
| 430 | 425 |
| 431 </p><pre>contentscript.js | 426 </p><pre>contentscript.js |
| 432 ================ | 427 ================ |
| 433 console.log(greeting); // undefined | 428 var greeting = "hola, "; |
| 434 console.log(sayGreeting); // undefined | 429 var button = document.getElementById("mybutton"); |
| 435 console.log(document.getElementById("button").onclick); // still undefined | 430 button.person_name = "Roberto"; |
| 436 document.getElementById("button").onclick = function() { | 431 button.addEventListener("click", function() { |
| 437 alert("hola!"); | 432 alert(greeting + button.person_name + "."); |
| 438 }</pre> | 433 }, false); |
| 434 </pre> |
| 439 | 435 |
| 440 <p>Now, if the button is pressed, you will see both greetings. | 436 <p>Now, if the button is pressed, you will see both greetings. |
| 441 | 437 |
| 442 </p><p>Isolated worlds allow each content script to make changes to its JavaScri
pt environment without worrying about conflicting with the page or with other co
ntent scripts. For example, a content script could include JQuery v1 and the pag
e could include JQuery v2, and they wouldn't conflict with each other. | 438 </p><p>Isolated worlds allow each content script to make changes to its JavaScri
pt environment without worrying about conflicting with the page or with other co
ntent scripts. For example, a content script could include JQuery v1 and the pag
e could include JQuery v2, and they wouldn't conflict with each other. |
| 443 | 439 |
| 444 </p><p>Another important benefit of isolated worlds is that they completely sepa
rate the JavaScript on the page from the JavaScript in extensions. This allows u
s to offer extra functionality to content scripts that should not be accessible
from web pages without worrying about web pages accessing it. | 440 </p><p>Another important benefit of isolated worlds is that they completely sepa
rate the JavaScript on the page from the JavaScript in extensions. This allows u
s to offer extra functionality to content scripts that should not be accessible
from web pages without worrying about web pages accessing it. |
| 445 | 441 |
| 446 | 442 |
| 447 </p><h2 id="host-page-communication">Communication with the embedding page</h2> | 443 </p><h2 id="host-page-communication">Communication with the embedding page</h2> |
| 448 | 444 |
| (...skipping 18 matching lines...) Expand all Loading... |
| 467 | 463 |
| 468 document.getElementById('myCustomEventDiv').addEventListener('myCustomEvent', fu
nction() { | 464 document.getElementById('myCustomEventDiv').addEventListener('myCustomEvent', fu
nction() { |
| 469 var eventData = document.getElementById('myCustomEventDiv').innerText; | 465 var eventData = document.getElementById('myCustomEventDiv').innerText; |
| 470 port.postMessage({message: "myCustomEvent", values: eventData}); | 466 port.postMessage({message: "myCustomEvent", values: eventData}); |
| 471 });</pre> | 467 });</pre> |
| 472 | 468 |
| 473 <p>In the above example, example.html (which is not a part of the extension) cre
ates a custom event and then can decide to fire the event by setting the event d
ata to a known location in the DOM and then dispatching the custom event. The co
ntent script listens for the name of the custom event on the known element and h
andles the event by inspecting the data of the element, and turning around to po
st the message to the extension process. In this way the page establishes a line
of communication to the extension. The reverse is possible through similar mean
s.</p> | 469 <p>In the above example, example.html (which is not a part of the extension) cre
ates a custom event and then can decide to fire the event by setting the event d
ata to a known location in the DOM and then dispatching the custom event. The co
ntent script listens for the name of the custom event on the known element and h
andles the event by inspecting the data of the element, and turning around to po
st the message to the extension process. In this way the page establishes a line
of communication to the extension. The reverse is possible through similar mean
s.</p> |
| 474 | 470 |
| 475 <h2 id="security-considerations">Security considerations</h2> | 471 <h2 id="security-considerations">Security considerations</h2> |
| 476 | 472 |
| 477 When writing a content script, you should be aware of two security issues. | 473 <p>When writing a content script, you should be aware of two security issues. |
| 478 First, be careful not to introduce security vulnerabilities into the web site | 474 First, be careful not to introduce security vulnerabilities into the web site |
| 479 your content script is injected into. For example, if your content script | 475 your content script is injected into. For example, if your content script |
| 480 receives content from another web site (e.g., by <a href="messaging.html">asking
your background page to make an | 476 receives content from another web site (e.g., by <a href="messaging.html">asking
your background page to make an |
| 481 XMLHttpRequest</a>), be careful to filter that content for <a href="http://en.wi
kipedia.org/wiki/Cross-site_scripting">cross-site | 477 XMLHttpRequest</a>), be careful to filter that content for <a href="http://en.wi
kipedia.org/wiki/Cross-site_scripting">cross-site |
| 482 scripting</a> attacks before injecting the content into the current page. | 478 scripting</a> attacks before injecting the content into the current page. |
| 483 For example, prefer to inject content via innerText rather than innerHTML. | 479 For example, prefer to inject content via innerText rather than innerHTML. |
| 484 Be especially careful when retrieving HTTP content on an HTTPS page because | 480 Be especially careful when retrieving HTTP content on an HTTPS page because |
| 485 the HTTP content might have been corrupted by a network <a href="http://en.wikip
edia.org/wiki/Man-in-the-middle_attack">"man-in-the-middle"</a> | 481 the HTTP content might have been corrupted by a network <a href="http://en.wikip
edia.org/wiki/Man-in-the-middle_attack">"man-in-the-middle"</a> |
| 486 if the user is on a hostile network.<p></p> | 482 if the user is on a hostile network.</p> |
| 487 | 483 |
| 488 <p>Second, although running your content script in an isolated world provides | 484 <p>Second, although running your content script in an isolated world provides |
| 489 some protection from the web page, a malicious web page might still be able | 485 some protection from the web page, a malicious web page might still be able |
| 490 to attack your content script if you use content from the web page | 486 to attack your content script if you use content from the web page |
| 491 indiscriminately. For example, the following patterns are dangerous: | 487 indiscriminately. For example, the following patterns are dangerous: |
| 492 </p><pre>contentscript.js | 488 </p><pre>contentscript.js |
| 493 ================ | 489 ================ |
| 494 var data = document.getElementById("json-data") | 490 var data = document.getElementById("json-data") |
| 495 // WARNING! Might be evaluating an evil script! | 491 // WARNING! Might be evaluating an evil script! |
| 496 var parsed = eval("(" + data + ")") | 492 var parsed = eval("(" + data + ")") |
| (...skipping 213 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 710 urchinTracker(); | 706 urchinTracker(); |
| 711 } | 707 } |
| 712 catch(e) {/* urchinTracker not available. */} | 708 catch(e) {/* urchinTracker not available. */} |
| 713 </script> | 709 </script> |
| 714 <!-- end analytics --> | 710 <!-- end analytics --> |
| 715 </div> | 711 </div> |
| 716 </div> <!-- /gc-footer --> | 712 </div> <!-- /gc-footer --> |
| 717 </div> <!-- /gc-container --> | 713 </div> <!-- /gc-container --> |
| 718 </body></html> | 714 </body></html> |
| 719 | 715 |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 437001:
Docs polish (Closed)
