<!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc. Note:
1) The <head> information in this page is significant, should be uniform
across api docs and should be edited only with knowledge of the
templating mechanism.
3) All <body>.innerHTML is genereated as an rendering step. If viewed in a
browser, it will be re-generated from the template, json schema and
authored overview content.
4) The <body>.innerHTML is also generated by an offline step so that this
page may easily be indexed by search engines.
--><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css">
<link href="css/print.css" rel="stylesheet" type="text/css" media="print">
<script type="text/javascript" src="../../../third_party/jstemplate/jstemplate_compiled.js">
</script>
<script type="text/javascript" src="js/api_page_generator.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/sidebar.js"></script>
<title>Content Scripts - Google Chrome Extensions - Google Code</title></head>
<body> <div id="gc-container" class="labs">
<div id="devModeWarning">
You are viewing extension docs in chrome via the 'file:' scheme: are you expecting to see local changes when you refresh? You'll need run chrome with --allow-file-access-from-files.
</div>
<!-- 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
are not operated on by way of the jsskip="true" -->
<div style="display:none">
<!-- VALUE -->
<div id="valueTemplate">
<dt>
<var>paramName</var>
<em>
<!-- TYPE -->
<div style="display:inline">
(
<span class="optional">optional</span>
<span class="enum">enumerated</span>
<span id="typeTemplate">
<span>
<a> Type</a>
</span>
<span>
<span>
array of <span><span></span></span>
</span>
<span>paramType</span>
<span></span>
</span>
</span>
)
</div>
</em>
</dt>
<dd class="todo">
Undocumented.
</dd>
<dd>
Description of this parameter from the json schema.
</dd>
<dd>
This parameter was added in version
<b><span></span></b>.
You must omit this parameter in earlier versions,
and you may omit it in any version. If you require this
parameter, the manifest key
<a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a>
can ensure that your extension won't be run in an earlier browser version.
</dd>
<!-- OBJECT PROPERTIES -->
<dd>
<dl>
<div>
<div>
</div>
</div>
</dl>
</dd>
<!-- OBJECT METHODS -->
<dd>
<div></div>
</dd>
<!-- OBJECT EVENT FIELDS -->
<dd>
<div></div>
</dd>
<!-- FUNCTION PARAMETERS -->
<dd>
<div></div>
</dd>
</div> <!-- /VALUE -->
<div id="functionParametersTemplate">
<h5>Parameters</h5>
<dl>
<div>
<div>
</div>
</div>
</dl>
</div>
</div> <!-- /SUBTEMPLATES -->
<a id="top"></a>
<div id="skipto">
<a href="#gc-pagecontent">Skip to page content</a>
<a href="#gc-toc">Skip to main navigation</a>
</div>
<!-- API HEADER -->
<table id="header" width="100%" cellspacing="0" border="0">
<tbody><tr>
<td valign="middle"><a href="http://code.google.com/"><img src="images/code_labs_logo.gif" height="43" width="161" alt="Google Code Labs" style="border:0; margin:0;"></a></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" value="" size="55">
<input class="gsc-search-button" type="submit" name="sa" value="Search">
<br>
<span class="greytext">e.g. "page action" or "tabs"</span>
</div>
</form>
<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&t13n_langs=en"></script>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse&lang=en"></script>
</td>
</tr>
</tbody></table>
<div id="codesiteContent" class="">
<a id="gc-topnav-anchor"></a>
<div id="gc-topnav">
<h1>Google Chrome Extensions (<a href="http://code.google.com/labs/">Labs</a>)</h1>
<ul id="home" class="gc-topnav-tabs">
<li id="home_link">
<a href="index.html" title="Google Chrome Extensions home page">Home</a>
</li>
<li id="docs_link">
<a href="docs.html" title="Official Google Chrome Extensions documentation">Docs</a>
</li>
<li id="faq_link">
<a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions">FAQ</a>
</li>
<li id="samples_link">
<a href="samples.html" title="Sample extensions (with source code)">Samples</a>
</li>
<li id="group_link">
<a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum">Group</a>
</li>
</ul>
</div> <!-- end gc-topnav -->
<div class="g-section g-tpl-170">
<!-- SIDENAV -->
<div class="g-unit g-first" id="gc-toc">
<ul>
<li><a href="getstarted.html">Getting Started</a></li>
<li><a href="overview.html">Overview</a></li>
<li><a href="whats_new.html">What's New?</a></li>
<li><h2><a href="devguide.html">Developer's Guide</a></h2>
<ul>
<li>Browser UI
<ul>
<li><a href="browserAction.html">Browser Actions</a></li>
<li><a href="contextMenus.html">Context Menus</a></li>
<li><a href="notifications.html">Desktop Notifications</a></li>
<li><a href="omnibox.html">Omnibox</a></li>
<li><a href="options.html">Options Pages</a></li>
<li><a href="override.html">Override Pages</a></li>
<li><a href="pageAction.html">Page Actions</a></li>
</ul>
</li>
<li>Browser Interaction
<ul>
<li><a href="bookmarks.html">Bookmarks</a></li>
<li><a href="cookies.html">Cookies</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="history.html">History</a></li>
<li><a href="management.html">Management</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="windows.html">Windows</a></li>
</ul>
</li>
<li>Implementation
<ul>
<li><a href="a11y.html">Accessibility</a></li>
<li><a href="background_pages.html">Background Pages</a></li>
<li class="leftNavSelected">Content Scripts</li>
<li><a href="xhr.html">Cross-Origin XHR</a></li>
<li><a href="idle.html">Idle</a></li>
<li><a href="i18n.html">Internationalization</a></li>
<li><a href="messaging.html">Message Passing</a></li>
<li><a href="npapi.html">NPAPI Plugins</a></li>
</ul>
</li>
<li>Finishing
<ul>
<li><a href="hosting.html">Hosting</a></li>
<li><a href="external_extensions.html">Other Deployment Options</a></li>
</ul>
</li>
</ul>
</li>
<li><h2><a href="apps.html">Packaged Apps</a></h2></li>
<li><h2><a href="tutorials.html">Tutorials</a></h2>
<ul>
<li><a href="tut_debugging.html">Debugging</a></li>
<li><a href="tut_analytics.html">Google Analytics</a></li>
<li><a href="tut_oauth.html">OAuth</a></li>
</ul>
</li>
<li><h2>Reference</h2>
<ul>
<li>Formats
<ul>
<li><a href="manifest.html">Manifest Files</a></li>
<li><a href="match_patterns.html">Match Patterns</a></li>
</ul>
</li>
<li><a href="permission_warnings.html">Permission Warnings</a></li>
<li><a href="api_index.html">chrome.* APIs</a></li>
<li><a href="api_other.html">Other APIs</a></li>
</ul>
</li>
<li><h2><a href="samples.html">Samples</a></h2></li>
<div class="line"> </div>
<li><h2>More</h2>
<ul>
<li><a href="http://code.google.com/chrome/webstore/docs/index.html">Chrome Web Store</a></li>
<li><a href="http://code.google.com/chrome/apps/docs/developers_guide.html">Hosted Apps</a></li>
<li><a href="themes.html">Themes</a></li>
</ul>
</li>
</ul>
</div>
<script>
initToggles();
</script>
<div class="g-unit" id="gc-pagecontent">
<div id="pageTitle">
<h1 class="page_title">Content Scripts</h1>
</div>
<!-- TABLE OF CONTENTS -->
<div id="toc">
<h2>Contents</h2>
<ol>
<li>
<a href="#registration">Manifest</a>
<ol>
<li>
<a href="#include-exclude-globs">Include and exclude globs</a>
</li>
</ol>
</li><li>
<a href="#pi">Programmatic injection</a>
<ol>
<li style="display: none; ">
<a>h3Name</a>
</li>
</ol>
</li><li>
<a href="#execution-environment">Execution environment</a>
<ol>
<li style="display: none; ">
<a>h3Name</a>
</li>
</ol>
</li><li>
<a href="#host-page-communication">Communication with the embedding page</a>
<ol>
<li style="display: none; ">
<a>h3Name</a>
</li>
</ol>
</li><li>
<a href="#security-considerations">Security considerations</a>
<ol>
<li style="display: none; ">
<a>h3Name</a>
</li>
</ol>
</li><li>
<a href="#extension-files">Referring to extension files</a>
<ol>
<li style="display: none; ">
<a>h3Name</a>
</li>
</ol>
</li><li>
<a href="#examples"> Examples </a>
<ol>
<li style="display: none; ">
<a>h3Name</a>
</li>
</ol>
</li><li>
<a href="#videos"> Videos </a>
<ol>
<li style="display: none; ">
<a>h3Name</a>
</li>
</ol>
</li>
<li style="display: none; ">
<a href="#apiReference">API reference</a>
<ol>
<li>
<a href="#properties">Properties</a>
<ol>
<li>
<a href="#property-anchor">propertyName</a>
</li>
</ol>
</li>
<li>
<a>Methods</a>
<ol>
<li>
<a href="#method-anchor">methodName</a>
</li>
</ol>
</li>
<li>
<a>Events</a>
<ol>
<li>
<a href="#event-anchor">eventName</a>
</li>
</ol>
</li>
<li>
<a href="#types">Types</a>
<ol>
<li>
<a href="#id-anchor">id</a>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
<!-- /TABLE OF CONTENTS -->
<!-- Standard content lead-in for experimental API pages -->
<p id="classSummary" style="display: none; ">
For information on how to use experimental APIs, see the <a href="experimental.html">chrome.experimental.* APIs</a> page.
</p>
<!-- STATIC CONTENT PLACEHOLDER -->
<div id="static"><div id="pageData-name" class="pageData">Content Scripts</div>
<div id="pageData-showTOC" class="pageData">true</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><li>Increase the font size to make text more legible
</li><li>Find and process <a href="http://microformats.org/">microformat</a> data in the DOM
</li></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>
<li>
Make <a href="xhr.html">cross-site XMLHttpRequests</a>
</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
<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>
<tbody><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>
Controls the 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.</td>
</tr>
<tr>
<td><code>css<code></code></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></code></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>
<td><code>run_at<code></code></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></code></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 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>
</tr>
<tr>
<td><code>exclude_globs</code></td>
<td>array of string</td>
<td><em>Optional.</em>
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>
</tr>
</tbody></table>
<h3 id="include-exclude-globs">Include and exclude 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_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.
</p>
<p></p>
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.
<p></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><p>For example, consider this simple page:
</p><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:
</p><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><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><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.
</p><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 custom DOM events and storing data in a known location. Consider: </p>
<pre>http://foo.com/example.html
===========================
var customEvent = document.createEvent('Event');
customEvent.initEvent('myCustomEvent', true, true);
function fireCustomEvent(data) {
hiddenDiv = document.getElementById('myCustomEventDiv');
hiddenDiv.innerText = data
hiddenDiv.dispatchEvent(customEvent);
}</pre>
<pre>contentscript.js
================
var port = chrome.extension.connect();
document.getElementById('myCustomEventDiv').addEventListener('myCustomEvent', function() {
var eventData = document.getElementById('myCustomEventDiv').innerText;
port.postMessage({message: "myCustomEvent", values: eventData});
});</pre>
<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>
<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 (e.g., by <a href="messaging.html">asking your background page to make an
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:
</p><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>
The
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/howto/contentscript_xhr">contentscript_xhr</a> example
shows how an extension can perform
cross-site requests for its content script.
You can find other simple examples of communication via messages in the
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/messaging/">examples/api/messaging</a>
directory.
</p>
<p>
See
<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
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/extensions/email_this_page/">email_this_page</a>
for examples of programmatic injection.
</p>
<p>
For more examples and for help in viewing the source code, see
<a href="samples.html">Samples</a>.
</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>
<!-- API PAGE -->
<div class="apiPage" style="display: none; ">
<a name="apiReference"></a>
<h2>API reference: chrome.apiname </h2>
<!-- PROPERTIES -->
<div class="apiGroup">
<a name="properties"></a>
<h3 id="properties">Properties</h3>
<div>
<a></a>
<h4>getLastError</h4>
<div class="summary">
<!-- Note: intentionally longer 80 columns -->
<span>chrome.extension</span><span>lastError</span>
</div>
<div>
</div>
</div>
</div> <!-- /apiGroup -->
<!-- METHODS -->
<div id="methodsTemplate" class="apiGroup">
<a></a>
<h3>Methods</h3>
<!-- iterates over all functions -->
<div class="apiItem">
<a></a> <!-- method-anchor -->
<h4>method name</h4>
<div class="summary"><span>void</span>
<!-- Note: intentionally longer 80 columns -->
<span>chrome.module.methodName</span>(<span><span>, </span><span></span>
<var><span></span></var></span>)</div>
<div class="description">
<p class="todo">Undocumented.</p>
<p>
A description from the json schema def of the function goes here.
</p>
<!-- PARAMETERS -->
<h4>Parameters</h4>
<dl>
<div>
<div>
</div>
</div>
</dl>
<!-- RETURNS -->
<h4>Returns</h4>
<dl>
<div>
<div>
</div>
</div>
</dl>
<!-- CALLBACK -->
<div>
<div>
<h4>Callback function</h4>
<p>
The callback <em>parameter</em> should specify a function
that looks like this:
</p>
<p>
If you specify the <em>callback</em> parameter, it should
specify a function that looks like this:
</p>
<!-- Note: intentionally longer 80 columns -->
<pre>function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>;</pre>
<dl>
<div>
<div>
</div>
</div>
</dl>
</div>
</div>
<!-- MIN_VERSION -->
<p>
This function was added in version <b><span></span></b>.
If you require this function, the manifest key
<a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a>
can ensure that your extension won't be run in an earlier browser version.
</p>
</div> <!-- /description -->
</div> <!-- /apiItem -->
</div> <!-- /apiGroup -->
<!-- EVENTS -->
<div id="eventsTemplate" class="apiGroup">
<a></a>
<h3>Events</h3>
<!-- iterates over all events -->
<div class="apiItem">
<a></a>
<h4>event name</h4>
<div class="summary">
<!-- Note: intentionally longer 80 columns -->
<span class="subdued">chrome.bookmarks</span><span>onEvent</span><span class="subdued">.addListener</span>(function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>);
</div>
<div class="description">
<p class="todo">Undocumented.</p>
<p>
A description from the json schema def of the event goes here.
</p>
<!-- PARAMETERS -->
<div>
<h4>Parameters</h4>
<dl>
<div>
<div>
</div>
</div>
</dl>
</div>
</div> <!-- /decription -->
</div> <!-- /apiItem -->
</div> <!-- /apiGroup -->
<!-- TYPES -->
<div class="apiGroup">
<a name="types"></a>
<h3 id="types">Types</h3>
<!-- iterates over all types -->
<div class="apiItem">
<a></a>
<h4>type name</h4>
<div>
</div>
</div> <!-- /apiItem -->
</div> <!-- /apiGroup -->
</div> <!-- /apiPage -->
</div> <!-- /gc-pagecontent -->
</div> <!-- /g-section -->
</div> <!-- /codesiteContent -->
<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>
©2011 Google
</p>
<!-- begin analytics -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
// chrome doc tracking
try {
var engdocs = _gat._getTracker("YT-10763712-2");
engdocs._trackPageview();
} catch(err) {}
// code.google.com site-wide tracking
try {
_uacct="UA-18071-1";
_uanchor=1;
_uff=0;
urchinTracker();
}
catch(e) {/* urchinTracker not available. */}
</script>
<!-- end analytics -->
</div>
</div> <!-- /gc-footer -->
</div> <!-- /gc-container -->
</body></html>