OLD | NEW |
1 <div id="pageData-title" class="pageData">Content Scripts</div> | 1 <div id="pageData-title" class="pageData">Content Scripts</div> |
2 <div id="pageData-showTOC" class="pageData">true</div> | 2 <div id="pageData-showTOC" class="pageData">true</div> |
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 86 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
97 <td>Optional. The list of JavaScript files to be injected into matching page
s. These are injected in the order they appear in this array.</td> | 97 <td>Optional. The list of JavaScript files to be injected into matching page
s. These are injected in the order they appear in this array.</td> |
98 </tr> | 98 </tr> |
99 <tr> | 99 <tr> |
100 <td>css</td> | 100 <td>css</td> |
101 <td>array of strings</td> | 101 <td>array of strings</td> |
102 <td>Optional. The list of CSS files to be injected into matching pages. Thes
e are injected in the order they appear in this array, before any DOM is constru
cted or displayed for the page.</td> | 102 <td>Optional. The list of CSS files to be injected into matching pages. Thes
e are injected in the order they appear in this array, before any DOM is constru
cted or displayed for the page.</td> |
103 </tr> | 103 </tr> |
104 <tr> | 104 <tr> |
105 <td>run_at</td> | 105 <td>run_at</td> |
106 <td>string</td> | 106 <td>string</td> |
107 <td>Optional. Controls when the files in <code>js</code> are injected. Can b
e <code>"document_start"</code> or <code>"document_end"</code>. Defaults to <cod
e>"document_end"</code>. In the case of <code>"document_start"</code>, the files
are injected after any files from <code>"css"</code>, but before any other DOM
is constructed or any other script is run. In the case of <code>"document_end"</
code>, the files are injected after the DOM is complete, but before subresources
like images and frames have necessarily loaded.</td> | 107 <td>Optional. Controls when the files in <code>js</code> are injected. Can b
e <code>"document_start"</code>, <code>"document_end"</code>, or <code>"document
_idle"</code>. Defaults to <code>"document_idle"</code>. |
| 108 |
| 109 <br><br> |
| 110 |
| 111 In the case of <code>"document_start"</code>, the files are injected after a
ny files from <code>"css"</code>, but before any other DOM is constructed or any
other script is run. |
| 112 |
| 113 <br><br> |
| 114 |
| 115 In the case of <code>"document_end"</code>, the files are injected immediate
ly after the DOM is complete, but before subresources like images and frames hav
e loaded. |
| 116 |
| 117 <br><br> |
| 118 |
| 119 In the case of <code>"document_idle"</code>, the browser chooses a time to i
nject scripts between <code>"document_end"</code> and immediately after the <cod
e><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-onload">wi
ndow.onload</a></code> event fires. The exact moment of injection depends on how
complex the document is and how long it is taking to load, and is optimized for
page load speed. |
| 120 |
| 121 <br><br> |
| 122 |
| 123 <b>NOTE:</b> In <code>document_idle</code>, content scripts may not necessar
ily receive the window.onload event, because they may run after it has |
| 124 already fired. In most cases, listening for the onload event is unnecessary
for content scripts running at <code>document_idle</code> because they are guara
nteed to run after the DOM is complete. If your script definitely needs to run a
fter <code>window.onload</code> you can check if it has already fired by using t
he <code><a href="http://www.whatwg.org/specs/web-apps/current-work/#dom-documen
t-readystate">document.readyState</a></code> property.</td> |
108 </tr> | 125 </tr> |
109 </table> | 126 </table> |
110 | 127 |
111 | 128 |
112 <h2 id="execution-environment">Execution environment</h2> | 129 <h2 id="execution-environment">Execution environment</h2> |
113 | 130 |
114 <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. | 131 <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. |
115 | 132 |
116 <p>For example, consider this simple page: | 133 <p>For example, consider this simple page: |
117 | 134 |
(...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
245 just like you would any other URL, | 262 just like you would any other URL, |
246 as the following code shows. | 263 as the following code shows. |
247 </p> | 264 </p> |
248 | 265 |
249 | 266 |
250 <pre> | 267 <pre> |
251 <em>//Code for displaying <extensionDir>/images/myimage.png:</em> | 268 <em>//Code for displaying <extensionDir>/images/myimage.png:</em> |
252 var imgURL = <b>chrome.extension.getURL("images/myimage.png")</b>; | 269 var imgURL = <b>chrome.extension.getURL("images/myimage.png")</b>; |
253 document.getElementById("someImage").src = imgURL; | 270 document.getElementById("someImage").src = imgURL; |
254 </pre> | 271 </pre> |
OLD | NEW |