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 |