1 <div id="pageData-name" class="pageData">Content Scripts</div> 2 <div id="pageData-showTOC" class="pageData">true</div> 3 4 <p> 5 Content scripts are JavaScript files that run in the context of web pages. 6 By using the standard 7 <a href="http://www.w3.org/TR/DOM-Level-2-HTML/">Document 8 Object Model</a> (DOM), 9 they can read details of the web pages the browser visits, 10 or make changes to them. 11 </p> 12 13 <p> 14 Here are some examples of what content scripts can do: 15 </p> 16 17 <ul> 18 <li>Find unlinked URLs in web pages and convert them into hyperlinks 19 <li>Increase the font size to make text more legible 20 <li>Find and process <a href="http://microformats.org/">microformat</a> data in the DOM 21 </ul> 22 23 <p> 24 However, content scripts have some limitations. 25 They <b>cannot</b>: 26 </p> 27 28 <ul> 29 <li> 30 Use chrome.* APIs 31 (except for parts of 32 <a href="extension.html"><code>chrome.extension</code></a>) 33 </li> 34 <li> 35 Use variables or functions defined by their extension's pages 36 </li> 37 <li> 38 Use variables or functions defined by web pages or by other content scripts 39 </li> 40 <li> 41 Make <a href="xhr.html">cross-site XMLHttpRequests</a> 42 </li> 43 </ul> 44 45 <p> 46 These limitations aren't as bad as they sound. 47 Content scripts can <em>indirectly</em> use the chrome.* APIs, 48 get access to extension data, 49 and request extension actions 50 by exchanging <a href="messaging.html">messages</a> 51 with their parent extension. 52 Content scripts can also 53 <a href="#host-page-communication">communicate with web pages</a> 54 using the shared DOM. 55 For more insight into what content scripts can and can't do, 56 learn about the 57 <a href="#execution-environment">execution environment</a>. 58 </p> 59 60 <h2 id="registration">Manifest</h2> 61 62 <p>If your content script's code should always be injected, 63 register it in the 64 <a href="manifest.html">extension manifest</a> 65 using the <code>content_scripts</code> field, 66 as in the following example. 67 </p> 68 69 <pre>{ 70 "name": "My extension", 71 ... 72 <b>"content_scripts": [ 73 { 74 "matches": ["http://www.google.com/*"], 75 "css": ["mystyles.css"], 76 "js": ["jquery.js", "myscript.js"] 77 } 78 ]</b>, 79 ... 80 }</pre> 81 82 <p> 83 If you want to inject the code only sometimes, 84 use the 85 <a href="manifest.html#permissions"><code>permissions</code></a> field instead, 86 as described in <a href="#pi">Programmatic injection</a>. 87 </p> 88 89 <pre>{ 90 "name": "My extension", 91 ... 92 <b>"permissions": [ 93 "tabs", "http://www.google.com/*" 94 ]</b>, 95 ... 96 }</pre> 97 98 <p> 99 Using the <code>content_scripts</code> field, 100 an extension can insert multiple content scripts into a page; 101 each of these content scripts can have multiple JavaScript and CSS files. 102 Each item in the <code>content_scripts</code> array 103 can have the following properties:</p> 104 105 <table> 106 <tr> 107 <th>Name</th> 108 <th>Type</th> 109 <th>Description</th> 110 </tr> 111 <tr> 112 <td><code>matches</code></td> 113 <td>array of strings</td> 114 <td><em>Required.</em> 115 Controls the pages this content script will be injected into. 116 See <a href="match_patterns.html">Match Patterns</a> 117 for more details on the syntax of these strings.</td> 118 </tr> 119 <tr> 120 <td><code>css<code></td> 121 <td>array of strings</td> 122 <td><em>Optional.</em> 123 The list of CSS files to be injected into matching pages. These are injected in the order they appear in this array, before any DOM is constructed or displayed for the page.</td> 124 </tr> 125 <tr> 126 <td><code>js<code></td> 127 <td><nobr>array of strings</nobr></td> 128 <td><em>Optional.</em> 129 The list of JavaScript files to be injected into matching pages. These are injected in the order they appear in this array.</td> 130 </tr> 131 <tr> 132 <td><code>run_at<code></td> 133 <td>string</td> 134 <td><em>Optional.</em> 135 Controls when the files in <code>js</code> are injected. Can be "document_start", "document_end", or "document_idle". Defaults to "document_idle". 136 137 <br><br> 138 139 In the case of "document_start", the files are injected after any files from <code>css</code>, but before any other DOM is constructed or any other script is run. 140 141 <br><br> 142 143 In the case of "document_end", the files are injected immediately after the DOM is complete, but before subresources like images and frames have loaded. 144 145 <br><br> 146 147 In the case of "document_idle", the browser chooses a time to inject scripts between "document_end" and immediately after the <code><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-onload">window.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. 148 149 <br><br> 150 151 <b>Note:</b> With "document_idle", content scripts may not necessarily receive the <code>window.onload</code> event, because they may run after it has 152 already fired. In most cases, listening for the <code>onload</code> event is unnecessary for content scripts running at "document_idle" because they are guaranteed to run after the DOM is complete. If your script definitely needs to run after <code>window.onload</code>, you can check if <code>onload</code> has already fired by using the <code><a href="http://www.whatwg.org/specs/web-apps/current-work/#dom-document-readystate">document.readyState</a></code> property.</td> 153 </tr> 154 <tr> 155 <td><code>all_frames<code></td> 156 <td>boolean</td> 157 <td><em>Optional.</em> 158 Controls whether the content script runs in all frames of the matching page, or only the top frame. 159 <br><br> 160 Defaults to <code>false</code>, meaning that only the top frame is matched.</td> 161 </tr> 162 <tr> 163 <td><code>include_globs</code></td> 164 <td>array of string</td> 165 <td><em>Optional.</em> 166 Applied after <code>matches</code> to control the pages that this content script will be injected into. Intended to emulate the <a href="http://wiki.greasespot.net/Metadata_Block#.40include"><code>@include</code></a> Greasemonkey keyword. See <a href="#include-exclude-globs">Include and exclude globs</a> below for more details.</td> 167 </tr> 168 <tr> 169 <td><code>exclude_globs</code></td> 170 <td>array of string</td> 171 <td><em>Optional.</em> 172 Applied after <code>matches</code> to control the pages that this content script will be injected into. Intended to emulate the <a href="http://wiki.greasespot.net/Metadata_Block#.40include"><code>@exclude</code></a> Greasemonkey keyword. See <a href="#include-exclude-globs">Include and exclude globs</a> below for more details.</td> 173 </tr> 174 </table> 175 176 <h3 id="include-exclude-globs">Include and exclude globs</h3> 177 178 <p> 179 The content script will be injected into a page if its URL matches any <code>matches</code> pattern and any <code>include_globs</code> pattern, as long as the URL doesn't also match an <code>exclude_globs</code> pattern. Because the <code>matches</code> property is required, <code>include_globs</code> and <code>exclude_globs</code> can only be used to limit which pages will be affected. 180 </p> 181 182 </p> 183 However, these glob properties follow a different syntax than <code>matches</code>, which is much more flexible. Acceptable strings are URLs that may contain "wildcard" asterisks and question marks. The asterisk (*) is used to match any string of any length (including the empty string); the question mark (?) is used to match any single character. 184 </p> 185 186 <p> 187 For example, the glob "http://???.example.com/foo/*" matches any of the following: 188 </p> 189 <ul> 190 <li>"http://www.example.com/foo/bar"</li> 191 <li>"http://the.example.com/foo/"</li> 192 </ul> 193 <p> 194 However, it does <em>not</em> match the following: 195 </p> 196 <ul> 197 <li>"http://my.example.com/foo/bar"</li> 198 <li>"http://example.com/foo/"</li> 199 <li>"http://www.example.com/foo"</li> 200 </ul> 201 202 <h2 id="pi">Programmatic injection</h2> 203 204 <p> 205 Inserting code into a page programmatically is useful 206 when your JavaScript or CSS code 207 shouldn't be injected into every single page 208 that matches the pattern — 209 for example, if you want a script to run 210 only when the user clicks a browser action's icon. 211 </p> 212 213 <p> 214 To insert code into a page, 215 your extension must have 216 <a href="xhr.html#requesting-permission">cross-origin permissions</a> 217 for the page. 218 It also must be able to use the <code>chrome.tabs</code> module. 219 You can get both kinds of permission 220 using the manifest file's 221 <a href="manifest.html#permissions">permissions</a> field. 222 </p> 223 224 <p> 225 Once you have permissions set up, 226 you can inject JavaScript into a page by calling 227 <a href="tabs.html#method-executeScript"><code>executeScript()</code></a>. 228 To inject CSS, use 229 <a href="tabs.html#method-insertCSS"><code>insertCSS()</code></a>. 230 </p> 231 232 <p> 233 The following code 234 (from the 235 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/make_page_red/">make_page_red</a> example) 236 reacts to a user click 237 by inserting JavaScript into the current tab's page 238 and executing the script. 239 </p> 240 241 <pre> 242 <em>/* in background.html */</em> 243 chrome.browserAction.onClicked.addListener(function(tab) { 244 chrome.tabs.executeScript(null, 245 {code:"document.body.bgColor='red'"}); 246 }); 247 248 <em>/* in manifest.json */</em> 249 "permissions": [ 250 "tabs", "http://*/*" 251 ], 252 </pre> 253 254 <p> 255 When the browser is displaying an HTTP page 256 and the user clicks this extension's browser action, 257 the extension sets the page's <code>bgcolor</code> property to 'red'. 258 The result, 259 unless the page has CSS that sets the background color, 260 is that the page turns red. 261 </p> 262 263 <p> 264 Usually, instead of inserting code directly (as in the previous sample), 265 you put the code in a file. 266 You inject the file's contents like this: 267 </p> 268 269 <pre>chrome.tabs.executeScript(null, {file: "content_script.js"});</pre> 270 271 272 <h2 id="execution-environment">Execution environment</h2> 273 274 <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 to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts. 275 276 <p>For example, consider this simple page: 277 278 <pre>hello.html 279 ========== 280 <html> 281 <button id="mybutton">click me</button> 282 <script> 283 var greeting = "hello, "; 284 var button = document.getElementById("mybutton"); 285 button.person_name = "Bob"; 286 button.addEventListener("click", function() { 287 alert(greeting + button.person_name + "."); 288 }, false); 289 </script> 290 </html></pre> 291 292 <p>Now, suppose this content script was injected into hello.html: 293 294 <pre>contentscript.js 295 ================ 296 var greeting = "hola, "; 297 var button = document.getElementById("mybutton"); 298 button.person_name = "Roberto"; 299 button.addEventListener("click", function() { 300 alert(greeting + button.person_name + "."); 301 }, false); 302 </pre> 303 304 <p>Now, if the button is pressed, you will see both greetings. 305 306 <p>Isolated worlds allow each content script to make changes to its JavaScript environment without worrying about conflicting with the page or with other content scripts. For example, a content script could include JQuery v1 and the page could include JQuery v2, and they wouldn't conflict with each other. 307 308 <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. 309 310 311 <h2 id="host-page-communication">Communication with the embedding page</h2> 312 313 <p>Although the execution environments of content scripts and the pages that host 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 the content script), it must do so through the shared DOM.</p> 314 315 <p>An example can be accomplished using custom DOM events and storing data in a known location. Consider: </p> 316 317 <pre>http://foo.com/example.html 318 =========================== 319 var customEvent = document.createEvent('Event'); 320 customEvent.initEvent('myCustomEvent', true, true); 321 322 function fireCustomEvent(data) { 323 hiddenDiv = document.getElementById('myCustomEventDiv'); 324 hiddenDiv.innerText = data 325 hiddenDiv.dispatchEvent(customEvent); 326 }</pre> 327 328 <pre>contentscript.js 329 ================ 330 var port = chrome.extension.connect(); 331 332 document.getElementById('myCustomEventDiv').addEventListener('myCustomEvent', function() { 333 var eventData = document.getElementById('myCustomEventDiv').innerText; 334 port.postMessage({message: "myCustomEvent", values: eventData}); 335 });</pre> 336 337 <p>In the above example, example.html (which is not a part of the extension) creates a custom event and then can decide to fire the event by setting the event data to a known location in the DOM and then dispatching the custom event. The content script listens for the name of the custom event on the known element and handles the event by inspecting the data of the element, and turning around to post 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 means.</p> 338 339 <h2 id="security-considerations">Security considerations</h2> 340 341 <p>When writing a content script, you should be aware of two security issues. 342 First, be careful not to introduce security vulnerabilities into the web site 343 your content script is injected into. For example, if your content script 344 receives content from another web site (e.g., by <a 345 href="messaging.html">asking your background page to make an 346 XMLHttpRequest</a>), be careful to filter that content for <a 347 href="http://en.wikipedia.org/wiki/Cross-site_scripting">cross-site 348 scripting</a> attacks before injecting the content into the current page. 349 For example, prefer to inject content via innerText rather than innerHTML. 350 Be especially careful when retrieving HTTP content on an HTTPS page because 351 the HTTP content might have been corrupted by a network <a 352 href="http://en.wikipedia.org/wiki/Man-in-the-middle_attack">"man-in-the-middle"</a> 353 if the user is on a hostile network.</p> 354 355 <p>Second, although running your content script in an isolated world provides 356 some protection from the web page, a malicious web page might still be able 357 to attack your content script if you use content from the web page 358 indiscriminately. For example, the following patterns are dangerous: 359 <pre>contentscript.js 360 ================ 361 var data = document.getElementById("json-data") 362 // WARNING! Might be evaluating an evil script! 363 var parsed = eval("(" + data + ")") 364 365 contentscript.js 366 ================ 367 var elmt_id = ... 368 // WARNING! elmt_id might be "); ... evil script ... //"! 369 window.setTimeout("animate(" + elmt_id + ")", 200); 370 </pre> 371 <p>Instead, prefer safer APIs that do not run scripts:</p> 372 <pre>contentscript.js 373 ================ 374 var data = document.getElementById("json-data") 375 // JSON.parse does not evaluate the attacker's scripts. 376 var parsed = JSON.parse(data) 377 378 contentscript.js 379 ================ 380 var elmt_id = ... 381 // The closure form of setTimeout does not evaluate scripts. 382 window.setTimeout(function() { 383 animate(elmt_id); 384 }, 200); 385 </pre> 386 387 <h2 id="extension-files">Referring to extension files</h2> 388 389 <p> 390 Get the URL of an extension's file using 391 <code>chrome.extension.getURL()</code>. 392 You can use the result 393 just like you would any other URL, 394 as the following code shows. 395 </p> 396 397 398 <pre> 399 <em>//Code for displaying <extensionDir>/images/myimage.png:</em> 400 var imgURL = <b>chrome.extension.getURL("images/myimage.png")</b>; 401 document.getElementById("someImage").src = imgURL; 402 </pre> 403 404 <h2 id="examples"> Examples </h2> 405 406 <p> 407 The 408 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/howto/contentscript_xhr">contentscript_xhr</a> example 409 shows how an extension can perform 410 cross-site requests for its content script. 411 You can find other simple examples of communication via messages in the 412 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/messaging/">examples/api/messaging</a> 413 directory. 414 </p> 415 416 <p> 417 See 418 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/make_page_red/">make_page_red</a> and 419 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/email_this_page/">email_this_page</a> 420 for examples of programmatic injection. 421 422 </p> 423 424 <p> 425 For more examples and for help in viewing the source code, see 426 <a href="samples.html">Samples</a>. 427 </p> 428 429 <h2 id="videos"> Videos </h2> 430 431 <p> 432 The following videos discuss concepts that are important for content scripts. 433 The first video describes content scripts and isolated worlds. 434 </p> 435 436 <p> 437 <iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/laLudeUmXHM?rel=0" frameborder="0" allowfullscreen></iframe> 438 </p> 439 440 <p> 441 The next video describes message passing, 442 featuring an example of a content script 443 sending a request to its parent extension. 444 </p> 445 446 <p> 447 <iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/B4M_a7xejYI?rel=0" frameborder="0" allowfullscreen></iframe> 448 </p> 449