| 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 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 75 "css": ["mystyles.css"], | 75 "css": ["mystyles.css"], |
| 76 "js": ["jquery.js", "myscript.js"] | 76 "js": ["jquery.js", "myscript.js"] |
| 77 } | 77 } |
| 78 ]</b>, | 78 ]</b>, |
| 79 ... | 79 ... |
| 80 }</pre> | 80 }</pre> |
| 81 | 81 |
| 82 <p> | 82 <p> |
| 83 If you want to inject the code only sometimes, | 83 If you want to inject the code only sometimes, |
| 84 use the | 84 use the |
| 85 <a href="manifest.html#permissions"><code>permissions</code></a> field instead, | 85 <a href="declare_permissions.html"><code>permissions</code></a> field instead, |
| 86 as described in <a href="#pi">Programmatic injection</a>. | 86 as described in <a href="#pi">Programmatic injection</a>. |
| 87 </p> | 87 </p> |
| 88 | 88 |
| 89 <pre>{ | 89 <pre>{ |
| 90 "name": "My extension", | 90 "name": "My extension", |
| 91 ... | 91 ... |
| 92 <b>"permissions": [ | 92 <b>"permissions": [ |
| 93 "tabs", "http://www.google.com/*" | 93 "tabs", "http://www.google.com/*" |
| 94 ]</b>, | 94 ]</b>, |
| 95 ... | 95 ... |
| (...skipping 143 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 239 </p> | 239 </p> |
| 240 | 240 |
| 241 <p> | 241 <p> |
| 242 To insert code into a page, | 242 To insert code into a page, |
| 243 your extension must have | 243 your extension must have |
| 244 <a href="xhr.html#requesting-permission">cross-origin permissions</a> | 244 <a href="xhr.html#requesting-permission">cross-origin permissions</a> |
| 245 for the page. | 245 for the page. |
| 246 It also must be able to use the <code>chrome.tabs</code> module. | 246 It also must be able to use the <code>chrome.tabs</code> module. |
| 247 You can get both kinds of permission | 247 You can get both kinds of permission |
| 248 using the manifest file's | 248 using the manifest file's |
| 249 <a href="manifest.html#permissions">permissions</a> field. | 249 <a href="declare_permissions.html">permissions</a> field. |
| 250 </p> | 250 </p> |
| 251 | 251 |
| 252 <p> | 252 <p> |
| 253 Once you have permissions set up, | 253 Once you have permissions set up, |
| 254 you can inject JavaScript into a page by calling | 254 you can inject JavaScript into a page by calling |
| 255 $ref:tabs.executeScript. | 255 $ref:tabs.executeScript. |
| 256 To inject CSS, use | 256 To inject CSS, use |
| 257 $ref:tabs.insertCSS. | 257 $ref:tabs.insertCSS. |
| 258 </p> | 258 </p> |
| 259 | 259 |
| (...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 360 window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "
*"); | 360 window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "
*"); |
| 361 }, false);</pre> | 361 }, false);</pre> |
| 362 <p>In the above example, example.html (which is not a part of the extension) pos
ts messages to itself, which are intercepted and inspected by the content script
, and then posted to the extension process. In this way, the page establishes a
line of communication to the extension process. The reverse is possible through
similar means.</p> | 362 <p>In the above example, example.html (which is not a part of the extension) pos
ts messages to itself, which are intercepted and inspected by the content script
, and then posted to the extension process. In this way, the page establishes a
line of communication to the extension process. The reverse is possible through
similar means.</p> |
| 363 | 363 |
| 364 <h2 id="security-considerations">Security considerations</h2> | 364 <h2 id="security-considerations">Security considerations</h2> |
| 365 | 365 |
| 366 <p>When writing a content script, you should be aware of two security issues. | 366 <p>When writing a content script, you should be aware of two security issues. |
| 367 First, be careful not to introduce security vulnerabilities into the web site | 367 First, be careful not to introduce security vulnerabilities into the web site |
| 368 your content script is injected into. For example, if your content script | 368 your content script is injected into. For example, if your content script |
| 369 receives content from another web site (for example, by making an <a | 369 receives content from another web site (for example, by making an <a |
| 370 href="messaging.html">XMLHttpRequest</a>), | 370 href="xhr.html">XMLHttpRequest</a>), |
| 371 be careful to filter that content for <a | 371 be careful to filter that content for <a |
| 372 href="http://en.wikipedia.org/wiki/Cross-site_scripting">cross-site | 372 href="http://en.wikipedia.org/wiki/Cross-site_scripting">cross-site |
| 373 scripting</a> attacks before injecting the content into the current page. | 373 scripting</a> attacks before injecting the content into the current page. |
| 374 For example, prefer to inject content via innerText rather than innerHTML. | 374 For example, prefer to inject content via innerText rather than innerHTML. |
| 375 Be especially careful when retrieving HTTP content on an HTTPS page because | 375 Be especially careful when retrieving HTTP content on an HTTPS page because |
| 376 the HTTP content might have been corrupted by a network <a | 376 the HTTP content might have been corrupted by a network <a |
| 377 href="http://en.wikipedia.org/wiki/Man-in-the-middle_attack">"man-in-the-middle"
</a> | 377 href="http://en.wikipedia.org/wiki/Man-in-the-middle_attack">"man-in-the-middle"
</a> |
| 378 if the user is on a hostile network.</p> | 378 if the user is on a hostile network.</p> |
| 379 | 379 |
| 380 <p>Second, although running your content script in an isolated world provides | 380 <p>Second, although running your content script in an isolated world provides |
| (...skipping 71 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 |