summaryrefslogtreecommitdiffstats
path: root/chrome/common/extensions/docs/content_scripts.html
diff options
context:
space:
mode:
Diffstat (limited to 'chrome/common/extensions/docs/content_scripts.html')
-rw-r--r--chrome/common/extensions/docs/content_scripts.html92
1 files changed, 44 insertions, 48 deletions
diff --git a/chrome/common/extensions/docs/content_scripts.html b/chrome/common/extensions/docs/content_scripts.html
index a20dcd9..0dc1407 100644
--- a/chrome/common/extensions/docs/content_scripts.html
+++ b/chrome/common/extensions/docs/content_scripts.html
@@ -15,7 +15,7 @@
</script>
<script type="text/javascript" src="js/api_page_generator.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
- <title>Content Scripts</title></head><body> <div id="gc-container" class="labs">
+ <title>Content Scripts - Google Chrome Extensions - Google Code</title></head><body> <div id="gc-container" class="labs">
<!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION -->
<!-- In particular, sub-templates that recurse, must be used by allowing
jstemplate to make a copy of the template in this section which
@@ -74,33 +74,28 @@
<a href="#gc-toc">Skip to main navigation</a>
</div>
<!-- API HEADER -->
- <div id="gc-header">
- <div id="logo">
-
-
- <img src="images/code_labs_logo.gif" height="43" width="161" alt="Google Code Labs" style="border:0;">
-
+ <table id="header" width="100%" cellspacing="0" border="0">
+ <tbody><tr>
+ <td valign="middle"><img src="images/code_labs_logo.gif" height="43" width="161" alt="Google Code Labs" style="border:0; margin:0;"></td>
+ <td valign="middle" width="100%" style="padding-left:0.6em;">
+ <form action="http://www.google.com/cse" id="cse" style="margin-top:0.5em">
+ <div id="gsc-search-box">
+ <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno">
+ <input type="hidden" name="ie" value="UTF-8">
+ <input type="text" name="q" size="55">
+ <input class="gsc-search-button" type="submit" name="sa" value="Search">
+ <br>
+ <span class="greytext">e.g. "ajax apis" or "open source"</span>
+ </div>
+ </form>
- </div>
- <div id="search">
- <div id="searchForm" class="searchForm">
- <form action="http://www.google.com/cse" id="cse">
- <div id="gsc-search-box">
- <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno">
- <input type="hidden" name="ie" value="UTF-8">
- <input type="text" name="q" size="31">
- <input class="gsc-search-button" type="submit" name="sa" value="Search">
- </div>
- </form>
- <p>&nbsp;</p>
- </div> <!-- end searchForm -->
-
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
- <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
- <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse&amp;t13n_langs=en"></script>
- <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse&amp;lang=en"></script>
- </div> <!-- end search -->
- </div> <!-- end gc-header -->
+ <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+ <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
+ <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse&amp;t13n_langs=en"></script>
+ <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse&amp;lang=en"></script>
+ </td>
+ </tr>
+ </tbody></table>
<div id="codesiteContent">
@@ -111,18 +106,17 @@
<li id="home_link">
<a href="index.html" class="selected" title="Google Chrome Extensions documentation home page">Home</a>
</li>
- <li id="blog_link">
- <a href="http://blog.chromium.org/" title="Chromium blog">Blog</a>
- </li>
- <li id="faq_link">
- <a href="faq.html" title="Google Chrome Extensions FAQ">FAQ</a>
- </li>
<li id="group_link">
- <a href="http://groups.google.com/group/chromium-extensions" title="Chromium-Extensions group">Group</a>
+ <a href="http://groups.google.com/group/chromium-extensions" title="Google Chrome Extensions mailing list">Group</a>
+ </li>
+ <li id="samples_link">
+ <a href="samples.html" title="Google Chrome Extensions samples">Samples</a>
</li>
+ <!--
<li id="terms_link">
Terms
</li>
+ -->
</ul>
</div> <!-- end gc-topnav -->
@@ -416,13 +410,14 @@ learn about the
</p><pre>hello.html
==========
&lt;html&gt;
- &lt;button id="button"&gt;click me&lt;/button&gt;
+ &lt;button id="mybutton"&gt;click me&lt;/button&gt;
&lt;script&gt;
- var greeting = "hello!";
- function sayGreeting() {
- alert(greeting);
- }
- document.getElementById("button").onclick = sayGreeting;
+ var greeting = "hello, ";
+ var button = document.getElementById("mybutton");
+ button.person_name = "Bob";
+ button.addEventListener("click", function() {
+ alert(greeting + button.person_name + ".");
+ }, false);
&lt;/script&gt;
&lt;/html&gt;</pre>
@@ -430,12 +425,13 @@ learn about the
</p><pre>contentscript.js
================
-console.log(greeting); // undefined
-console.log(sayGreeting); // undefined
-console.log(document.getElementById("button").onclick); // still undefined
-document.getElementById("button").onclick = function() {
- alert("hola!");
-}</pre>
+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.
@@ -474,7 +470,7 @@ document.getElementById('myCustomEventDiv').addEventListener('myCustomEvent', fu
<h2 id="security-considerations">Security considerations</h2>
-When writing a content script, you should be aware of two security issues.
+<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 (e.g., by <a href="messaging.html">asking your background page to make an
@@ -483,7 +479,7 @@ 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>
+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