Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2)

Side by Side Diff: chrome/common/extensions/docs/static/content_scripts.html

Issue 339064: Add new user script injection point: document_idle. (Closed)
Patch Set: smaller, cleaner, better Created 11 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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 &lt;extensionDir>/images/myimage.png:</em> 268 <em>//Code for displaying &lt;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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698