forked from Yixi/ChromeExtensionDocument
/
content_scripts.html
769 lines (696 loc) · 32 KB
/
content_scripts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="stable/static/css/site.css" rel="stylesheet" type="text/css">
<link href="stable/static/css/print.css" rel="stylesheet" type="text/css" media="print">
<link href="stable/static/css/prettify.css" rel="stylesheet" type="text/css">
<link href="//www.google.com/images/icons/product/chrome-16.png" rel="icon" type="image/ico">
<title>Content Scripts - chrome插件中文开发文档(非官方)</title>
</head>
<body>
<a id="top"></a>
<div id="header">{Header content}</div>
<a id="gc-topnav-anchor"></a>
<div id="gc-topnav">
<h1>Google Chrome Extensions</h1>
<ul id="home" class="gc-topnav-tabs">
<li id="home_link">
<a href="index.html" title="Google Chrome Extensions home page"><div>Home</div></a>
</li>
<li id="docs_link">
<a href="docs.html" title="Official Google Chrome Extensions documentation"><div>Docs</div></a>
</li>
<li id="faq_link">
<a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions"><div>FAQ</div></a>
</li>
<li id="samples_link">
<a href="samples.html" title="Sample Extensions (with source code)"><div>Samples</div></a>
</li>
<li id="group_link">
<a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum"><div>Group</div></a>
</li>
<li id="so_link">
<a href="http://stackoverflow.com/questions/tagged/google-chrome-extension" title="[google-chrome-extension] tag on Stack Overflow"><div>Questions?</div></a>
</li>
</ul>
</div>
<div id="gc-container">
<div id="gc-sidebar">
<ul
class="level1 ">
<li class="level2">
<a href="getstarted.html" class="level2 ">Getting Started</a>
</li>
<li class="level2">
<a href="overview.html" class="level2 ">Overview</a>
</li>
<li class="level2">
<a href="whats_new.html" class="level2 ">What's New?</a>
</li>
<li class="level2">
<a href="devguide.html" class="level2 ">Developer's Guide</a>
<ul
class="level2 ">
<li class="level3">
<a class="button level3">
<span class="level3">Browser UI</span>
<div class="toggleIndicator level3"></div>
</a>
<ul toggleable
class="level3 hidden">
<li class="level4">
<a href="browserAction.html" class="level4 ">Browser Actions</a>
</li>
<li class="level4">
<a href="contextMenus.html" class="level4 ">Context Menus</a>
</li>
<li class="level4">
<a href="notifications.html" class="level4 ">Desktop Notifications</a>
</li>
<li class="level4">
<a href="omnibox.html" class="level4 ">Omnibox</a>
</li>
<li class="level4">
<a href="options.html" class="level4 ">Options Pages</a>
</li>
<li class="level4">
<a href="override.html" class="level4 ">Override Pages</a>
</li>
<li class="level4">
<a href="pageAction.html" class="level4 ">Page Actions</a>
</li>
</ul>
</li>
<li class="level3">
<a class="button level3">
<span class="level3">Browser Interaction</span>
<div class="toggleIndicator level3"></div>
</a>
<ul toggleable
class="level3 hidden">
<li class="level4">
<a href="bookmarks.html" class="level4 ">Bookmarks</a>
</li>
<li class="level4">
<a href="cookies.html" class="level4 ">Cookies</a>
</li>
<li class="level4">
<a href="devtools.html" class="level4 ">Developer Tools</a>
</li>
<li class="level4">
<a href="events.html" class="level4 ">Events</a>
</li>
<li class="level4">
<a href="history.html" class="level4 ">History</a>
</li>
<li class="level4">
<a href="management.html" class="level4 ">Management</a>
</li>
<li class="level4">
<a href="tabs.html" class="level4 ">Tabs</a>
</li>
<li class="level4">
<a href="windows.html" class="level4 ">Windows</a>
</li>
</ul>
</li>
<li class="level3">
<a class="button level3">
<span class="level3">Implementation</span>
<div class="toggleIndicator level3 toggled"></div>
</a>
<ul toggleable
class="level3 ">
<li class="level4">
<a href="a11y.html" class="level4 ">Accessibility</a>
</li>
<li class="level4">
<a href="event_pages.html" class="level4 ">Event Pages</a>
</li>
<li class="level4">
<a href="contentSecurityPolicy.html" class="level4 ">Content Security Policy</a>
</li>
<li class="level4">
<a class="level4 selected">Content Scripts</a>
</li>
<li class="level4">
<a href="xhr.html" class="level4 ">Cross-Origin XHR</a>
</li>
<li class="level4">
<a href="i18n.html" class="level4 ">Internationalization</a>
</li>
<li class="level4">
<a href="messaging.html" class="level4 ">Message Passing</a>
</li>
<li class="level4">
<a href="permissions.html" class="level4 ">Optional Permissions</a>
</li>
<li class="level4">
<a href="npapi.html" class="level4 ">NPAPI Plugins</a>
</li>
</ul>
</li>
<li class="level3">
<a class="button level3">
<span class="level3">Finishing</span>
<div class="toggleIndicator level3"></div>
</a>
<ul toggleable
class="level3 hidden">
<li class="level4">
<a href="hosting.html" class="level4 ">Hosting</a>
</li>
<li class="level4">
<a href="external_extensions.html" class="level4 ">Other Deployment Options</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="level2">
<a href="tutorials.html" class="level2 ">Tutorials</a>
<ul
class="level2 ">
<li class="level3">
<a href="tut_migration_to_manifest_v2.html" class="level3 ">Manifest V2</a>
</li>
<li class="level3">
<a href="tut_debugging.html" class="level3 ">Debugging</a>
</li>
<li class="level3">
<a href="tut_analytics.html" class="level3 ">Google Analytics</a>
</li>
<li class="level3">
<a href="tut_oauth.html" class="level3 ">OAuth</a>
</li>
</ul>
</li>
<li class="level2">
<span class="level2">Reference</span>
<ul
class="level2 ">
<li class="level3">
<a class="button level3">
<span class="level3">Formats</span>
<div class="toggleIndicator level3"></div>
</a>
<ul toggleable
class="level3 hidden">
<li class="level4">
<a href="manifest.html" class="level4 ">Manifest Files</a>
</li>
<li class="level4">
<a href="match_patterns.html" class="level4 ">Match Patterns</a>
</li>
</ul>
</li>
<li class="level3">
<a href="permission_warnings.html" class="level3 ">Permission Warnings</a>
</li>
<li class="level3">
<a href="api_index.html" class="level3 ">chrome.* APIs</a>
</li>
<li class="level3">
<a href="api_other.html" class="level3 ">Other APIs</a>
</li>
</ul>
</li>
<li class="level2">
<span class="level2">More</span>
<ul
class="level2 ">
<li class="level3">
<a href="http://code.google.com/chrome/webstore/docs/index.html" class="level3 ">Chrome Web Store</a>
</li>
<li class="level3">
<a href="http://code.google.com/chrome/apps/docs/developers_guide.html" class="level3 ">Hosted Apps</a>
</li>
<li class="level3">
<a href="themes.html" class="level3 ">Themes</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="gc-pagecontent">
<h1 class="page_title">Content Scripts</h1>
<div id="toc">
<h2>Contents</h2>
<ol>
<li>
<a href=#registration>Manifest</a>
<ol>
<li><a href=#match-patterns-globs>Match patterns and globs</a></li>
</ol>
</li>
<li>
<a href=#pi>Programmatic injection</a>
</li>
<li>
<a href=#execution-environment>Execution environment</a>
</li>
<li>
<a href=#host-page-communication>Communication with the embedding page</a>
</li>
<li>
<a href=#security-considerations>Security considerations</a>
</li>
<li>
<a href=#extension-files>Referring to extension files</a>
</li>
<li>
<a href=#examples> Examples </a>
</li>
<li>
<a href=#videos> Videos </a>
</li>
</ol>
</div>
<p>
Content scripts are JavaScript files that run in the context of web pages.
By using the standard
<a href="http://www.w3.org/TR/DOM-Level-2-HTML/">Document
Object Model</a> (DOM),
they can read details of the web pages the browser visits,
or make changes to them.
</p>
<p>
Here are some examples of what content scripts can do:
</p>
<ul>
<li>Find unlinked URLs in web pages and convert them into hyperlinks
<li>Increase the font size to make text more legible
<li>Find and process <a href="http://microformats.org/">microformat</a> data in the DOM
</ul>
<p>
However, content scripts have some limitations.
They <b>cannot</b>:
</p>
<ul>
<li>
Use chrome.* APIs
(except for parts of
<a href="extension.html"><code>chrome.extension</code></a>)
</li>
<li>
Use variables or functions defined by their extension's pages
</li>
<li>
Use variables or functions defined by web pages or by other content scripts
</li>
</ul>
<p>
These limitations aren't as bad as they sound.
Content scripts can <em>indirectly</em> use the chrome.* APIs,
get access to extension data,
and request extension actions
by exchanging <a href="messaging.html">messages</a>
with their parent extension.
Content scripts can also
make <a href="xhr.html">cross-site XMLHttpRequests</a>
to the same sites as their parent extensions,
and they can
<a href="#host-page-communication">communicate with web pages</a>
using the shared DOM.
For more insight into what content scripts can and can't do,
learn about the
<a href="#execution-environment">execution environment</a>.
</p>
<h2 id="registration">Manifest</h2>
<p>If your content script's code should always be injected,
register it in the
<a href="manifest.html">extension manifest</a>
using the <code>content_scripts</code> field,
as in the following example.
</p>
<pre>{
"name": "My extension",
...
<b>"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
]</b>,
...
}</pre>
<p>
If you want to inject the code only sometimes,
use the
<a href="manifest.html#permissions"><code>permissions</code></a> field instead,
as described in <a href="#pi">Programmatic injection</a>.
</p>
<pre>{
"name": "My extension",
...
<b>"permissions": [
"tabs", "http://www.google.com/*"
]</b>,
...
}</pre>
<p>
Using the <code>content_scripts</code> field,
an extension can insert multiple content scripts into a page;
each of these content scripts can have multiple JavaScript and CSS files.
Each item in the <code>content_scripts</code> array
can have the following properties:</p>
<table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><code>matches</code></td>
<td>array of strings</td>
<td><em>Required.</em>
Specifies which pages this content script will be injected into.
See <a href="match_patterns.html">Match Patterns</a>
for more details on the syntax of these strings
and <a href="#match-patterns-globs">Match patterns and globs</a>
for information on how to exclude URLs.</td>
</tr>
<tr>
<td><code>exclude_matches</code></td>
<td>array of strings</td>
<td><em>Optional.</em>
Excludes pages that this content script would otherwise be
injected into.
See <a href="match_patterns.html">Match Patterns</a>
for more details on the syntax of these strings
and <a href="#match-patterns-globs">Match patterns and globs</a>
for information on how to exclude URLs.</td>
</tr>
<tr>
<td><code>css<code></td>
<td>array of strings</td>
<td><em>Optional.</em>
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>
</tr>
<tr>
<td><code>js<code></td>
<td><nobr>array of strings</nobr></td>
<td><em>Optional.</em>
The list of JavaScript files to be injected into matching pages. These are injected in the order they appear in this array.</td>
</tr>
<tr id="run_at">
<td><code>run_at<code></td>
<td>string</td>
<td><em>Optional.</em>
Controls when the files in <code>js</code> are injected. Can be "document_start", "document_end", or "document_idle". Defaults to "document_idle".
<br><br>
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.
<br><br>
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.
<br><br>
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.
<br><br>
<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
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>
</tr>
<tr>
<td><code>all_frames<code></td>
<td>boolean</td>
<td><em>Optional.</em>
Controls whether the content script runs in all frames of the matching page, or only the top frame.
<br><br>
Defaults to <code>false</code>, meaning that only the top frame is matched.</td>
</tr>
<tr>
<td><code>include_globs</code></td>
<td>array of string</td>
<td><em>Optional.</em>
Applied after <code>matches</code> to include only those URLs that also match this glob. Intended to emulate the <a href="http://wiki.greasespot.net/Metadata_Block#.40include"><code>@include</code></a> Greasemonkey keyword.
See <a href="#match-patterns-globs">Match patterns and globs</a> below for more details.</td>
</tr>
<tr>
<td><code>exclude_globs</code></td>
<td>array of string</td>
<td><em>Optional.</em>
Applied after <code>matches</code> to exclude URLs that match this glob.
Intended to emulate the <a href="http://wiki.greasespot.net/Metadata_Block#.40include"><code>@exclude</code></a> Greasemonkey keyword.
See <a href="#match-patterns-globs">Match patterns and globs</a> below for more details.</td>
</tr>
</table>
<h3 id="match-patterns-globs">Match patterns and globs</h3>
<p>
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_matches</code> or <code>exclude_globs</code> pattern.
Because the <code>matches</code> property is required, <code>exclude_matches</code>, <code>include_globs</code>, and <code>exclude_globs</code> can only be used to limit which pages will be affected.
</p>
<p>
For example, assume <code>matches</code> is <code>["http://*.nytimes.com/*"]</code>:
</p>
<ul>
<li>If <code>exclude_matches</code> is <code>["*://*/*business*"]</code>, then the content script would be injected into "http://www.nytimes.com/health" but not into "http://www.nytimes.com/business".</li>
<li>If <code>include_globs</code> is <code>["*nytimes.com/???s/*"]</code>, then the content script would be injected into "http:/www.nytimes.com/arts/index.html" and "http://www.nytimes.com/jobs/index.html" but not into "http://www.nytimes.com/sports/index.html".</li>
<li>If <code>exclude_globs</code> is <code>["*science*"]</code>, then the content script would be injected into "http://www.nytimes.com" but not into "http://science.nytimes.com" or "http://www.nytimes.com/science".</li>
</ul>
<p>
<p>
Glob properties follow a different, more flexible syntax than <a href="match_patterns.html">match patterns</a>. Acceptable glob strings are URLs that may contain "wildcard" asterisks and question marks. The asterisk (*) matches any string of any length (including the empty string); the question mark (?) matches any single character.
</p>
<p>
For example, the glob "http://???.example.com/foo/*" matches any of the following:
</p>
<ul>
<li>"http://www.example.com/foo/bar"</li>
<li>"http://the.example.com/foo/"</li>
</ul>
<p>
However, it does <em>not</em> match the following:
</p>
<ul>
<li>"http://my.example.com/foo/bar"</li>
<li>"http://example.com/foo/"</li>
<li>"http://www.example.com/foo"</li>
</ul>
<h2 id="pi">Programmatic injection</h2>
<p>
Inserting code into a page programmatically is useful
when your JavaScript or CSS code
shouldn't be injected into every single page
that matches the pattern —
for example, if you want a script to run
only when the user clicks a browser action's icon.
</p>
<p>
To insert code into a page,
your extension must have
<a href="xhr.html#requesting-permission">cross-origin permissions</a>
for the page.
It also must be able to use the <code>chrome.tabs</code> module.
You can get both kinds of permission
using the manifest file's
<a href="manifest.html#permissions">permissions</a> field.
</p>
<p>
Once you have permissions set up,
you can inject JavaScript into a page by calling
<a href="tabs.html#method-executeScript"><code>executeScript()</code></a>.
To inject CSS, use
<a href="tabs.html#method-insertCSS"><code>insertCSS()</code></a>.
</p>
<p>
The following code
(from the
<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)
reacts to a user click
by inserting JavaScript into the current tab's page
and executing the script.
</p>
<pre>
<em>/* in background.html */</em>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{code:"document.body.bgColor='red'"});
});
<em>/* in manifest.json */</em>
"permissions": [
"tabs", "http://*/*"
],
</pre>
<p>
When the browser is displaying an HTTP page
and the user clicks this extension's browser action,
the extension sets the page's <code>bgcolor</code> property to 'red'.
The result,
unless the page has CSS that sets the background color,
is that the page turns red.
</p>
<p>
Usually, instead of inserting code directly (as in the previous sample),
you put the code in a file.
You inject the file's contents like this:
</p>
<pre>chrome.tabs.executeScript(null, {file: "content_script.js"});</pre>
<h2 id="execution-environment">Execution environment</h2>
<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.
<p>For example, consider this simple page:
<pre>hello.html
==========
<html>
<button id="mybutton">click me</button>
<script>
var greeting = "hello, ";
var button = document.getElementById("mybutton");
button.person_name = "Bob";
button.addEventListener("click", function() {
alert(greeting + button.person_name + ".");
}, false);
</script>
</html></pre>
<p>Now, suppose this content script was injected into hello.html:
<pre>contentscript.js
================
var greeting = "hola, ";
var button = document.getElementById("mybutton");
button.person_name = "Roberto";
button.addEventListener("click", function() {
alert(greeting + button.person_name + ".");
}, false);
</pre>
<p>Now, if the button is pressed, you will see both greetings.
<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.
<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.
<h2 id="host-page-communication">Communication with the embedding page</h2>
<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>
<p>An example can be accomplished using window.postMessage (or window.webkitPostMessage for Transferable objects):</p>
<pre>contentscript.js
================
var port = chrome.extension.connect();
window.addEventListener("message", function(event) {
// We only accept messages from ourselves
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
console.log("Content script received: " + event.data.text);
port.postMessage(event.data.text);
}
}, false);</pre>
<pre>http://foo.com/example.html
===========================
document.getElementById("theButton").addEventListener("click", function() {
window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
}, false);</pre>
<p>In the above example, example.html (which is not a part of the extension) posts 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>
<h2 id="security-considerations">Security considerations</h2>
<p>When writing a content script, you should be aware of two security issues.
First, be careful not to introduce security vulnerabilities into the web site
your content script is injected into. For example, if your content script
receives content from another web site (for example, by making an <a
href="messaging.html">XMLHttpRequest</a>),
be careful to filter that content for <a
href="http://en.wikipedia.org/wiki/Cross-site_scripting">cross-site
scripting</a> attacks before injecting the content into the current page.
For example, prefer to inject content via innerText rather than innerHTML.
Be especially careful when retrieving HTTP content on an HTTPS page because
the HTTP content might have been corrupted by a network <a
href="http://en.wikipedia.org/wiki/Man-in-the-middle_attack">"man-in-the-middle"</a>
if the user is on a hostile network.</p>
<p>Second, although running your content script in an isolated world provides
some protection from the web page, a malicious web page might still be able
to attack your content script if you use content from the web page
indiscriminately. For example, the following patterns are dangerous:
<pre>contentscript.js
================
var data = document.getElementById("json-data")
// WARNING! Might be evaluating an evil script!
var parsed = eval("(" + data + ")")
contentscript.js
================
var elmt_id = ...
// WARNING! elmt_id might be "); ... evil script ... //"!
window.setTimeout("animate(" + elmt_id + ")", 200);
</pre>
<p>Instead, prefer safer APIs that do not run scripts:</p>
<pre>contentscript.js
================
var data = document.getElementById("json-data")
// JSON.parse does not evaluate the attacker's scripts.
var parsed = JSON.parse(data)
contentscript.js
================
var elmt_id = ...
// The closure form of setTimeout does not evaluate scripts.
window.setTimeout(function() {
animate(elmt_id);
}, 200);
</pre>
<h2 id="extension-files">Referring to extension files</h2>
<p>
Get the URL of an extension's file using
<code>chrome.extension.getURL()</code>.
You can use the result
just like you would any other URL,
as the following code shows.
</p>
<pre>
<em>//Code for displaying <extensionDir>/images/myimage.png:</em>
var imgURL = <b>chrome.extension.getURL("images/myimage.png")</b>;
document.getElementById("someImage").src = imgURL;
</pre>
<h2 id="examples"> Examples </h2>
<p>
You can find many
<a href="samples.html#script">examples that use content scripts</a>.
A simple example of communication via messages is in the
<a href="samples.html#51a83d2ba3a32e3ff1bdb624d4e18ccec4c4038e">timer sample</a>.
See <a href="samples.html#ede3c47b7757245be42ec33fd5ca63df4b490066">make_page_red</a> and
<a href="samples.html#028eb5364924344029bcbe1d527f132fc72b34e5">email_this_page</a>
for examples of programmatic injection.
</p>
<h2 id="videos"> Videos </h2>
<p>
The following videos discuss concepts that are important for content scripts.
The first video describes content scripts and isolated worlds.
</p>
<p>
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/laLudeUmXHM?rel=0" frameborder="0" allowfullscreen></iframe>
</p>
<p>
The next video describes message passing,
featuring an example of a content script
sending a request to its parent extension.
</p>
<p>
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/B4M_a7xejYI?rel=0" frameborder="0" allowfullscreen></iframe>
</p>
</div>
</div>
</body>
<script>
window.bootstrap = {
api_names: [{"name":"alarms"},{"name":"bookmarks"},{"name":"browserAction"},{"name":"browsingData"},{"name":"commands"},{"name":"contentSettings"},{"name":"contextMenus"},{"name":"cookies"},{"name":"debugger"},{"name":"declarativeWebRequest"},{"name":"devtools.inspectedWindow"},{"name":"devtools.network"},{"name":"devtools.panels"},{"name":"downloads"},{"name":"events"},{"name":"extension"},{"name":"fileBrowserHandler"},{"name":"fontSettings"},{"name":"history"},{"name":"i18n"},{"name":"idle"},{"name":"input.ime"},{"name":"management"},{"name":"omnibox"},{"name":"pageAction"},{"name":"pageCapture"},{"name":"permissions"},{"name":"privacy"},{"name":"proxy"},{"name":"runtime"},{"name":"scriptBadge"},{"name":"storage"},{"name":"tabs"},{"name":"topSites"},{"name":"tts"},{"name":"ttsEngine"},{"name":"types"},{"name":"webNavigation"},{"name":"webRequest"},{"name":"webstore"},{"last":true,"name":"windows"}].concat(
[{"name":"experimental.bluetooth"},{"name":"experimental.devtools.audits"},{"name":"experimental.devtools.console"},{"name":"experimental.discovery"},{"name":"experimental.identity"},{"name":"experimental.infobars"},{"name":"experimental.offscreenTabs"},{"name":"experimental.processes"},{"name":"experimental.record"},{"name":"experimental.speechInput"},{"name":"experimental.systemInfo.cpu"},{"name":"experimental.systemInfo.storage"},{"last":true,"name":"experimental.usb"}]),
branchInfo: {"channels":[{"path":"stable","name":"Stable"},{"path":"dev","name":"Dev"},{"path":"beta","name":"Beta"},{"path":"trunk","name":"Trunk"}],"current":"stable","showWarning":false}
};
</script>
<div id="gc-footer">
<div class="text">
<p>
Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,
the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
Attribution 3.0 License</a>, and code samples are licensed under the
<a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.
</p>
<p>
©2012 Google
</p>
<script src="stable/static/js/branch.js" type="text/javascript"></script>
<script src="stable/static/js/sidebar.js" type="text/javascript"></script>
<script src="stable/static/js/prettify.js" type="text/javascript"></script>
<script>
(function() {
// Auto syntax highlight all pre tags.
var preElements = document.getElementsByTagName('pre');
for (var i = 0; i < preElements.length; i++)
preElements[i].classList.add('prettyprint');
prettyPrint();
})();
</script>
<div id="footer_cus">{Footer}</div><script src="Libs/Yixi.js"></script><script src="http://s9.cnzz.com/stat.php?id=4928336&web_id=4928336" language="JavaScript"></script>
</div>
</div>
</html>