mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
61 lines
2.2 KiB
HTML
61 lines
2.2 KiB
HTML
|
|
<h1 id="my-heading-1">This is a web page for testing content scripts</h1>
|
|
|
|
<p>This is a web page for testing the kind of access content scripts get to the web pages they run inside.
|
|
The page includes a page script, which does three things:
|
|
</p>
|
|
|
|
<ul>
|
|
<li>Adds a new paragraph, with code like this:
|
|
<pre>
|
|
var p = document.createElement("p");
|
|
p.textContent = "This paragraph was added by a page script.";
|
|
p.setAttribute("id", "page-script-para");
|
|
document.body.appendChild(p);
|
|
</pre>
|
|
</li>
|
|
<li>Adds a new variable "foo" to the global window object, with code like this:
|
|
|
|
<pre>
|
|
window.foo = "This global variable was added by a page script";
|
|
</pre>
|
|
</li>
|
|
<li>redefines the build-in window.confirm() function, with code like this:
|
|
<pre>
|
|
window.confirm = function() {
|
|
alert("The page script has also redefined 'confirm'");
|
|
}
|
|
</pre>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>If you now install the <a href="https://github.com/mdn/webextensions-examples/tree/master/content-scripts">content-scripts extension</a>, and reload the page, you'll now see two columns of buttons underneath this text.</p>
|
|
|
|
<p>Each column contains three buttons:</p>
|
|
<ul>
|
|
<li>Button 1 toggles a blue background for the paragraph the page script added.</li>
|
|
<li>Button 2 prints the value of "window.foo" in the text box below.</li>
|
|
<li>Button 3 calls window.confirm()</li>
|
|
</ul>
|
|
|
|
<p>The exact same code is running in each column. But the left-hand column is running in the page script, while the right-hand button is running in the content script. So you'll see the following:</p>
|
|
|
|
<ul>
|
|
<li>Button 1 gives the same result in both columns: content scripts can see and modify the DOM, even for elements added by page scripts.</li>
|
|
<li>Button 2 gives "undefined" for the content script column: content scripts can't see variables added by page scripts.</li>
|
|
<li>Button 3 calls the original, unmodified version of window.confirm(): content scripts are unaffected by redefinitions of built-in DOM functions that are made by page scripts.</li>
|
|
</ul>
|
|
|
|
<div id="wrap">
|
|
<div id="left-column">
|
|
</div>
|
|
<div id="right-column">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="output"></div>
|
|
|
|
<script src="content-scripts/insert-controls.js"></script>
|
|
<script src="page-scripts/page-script.js"></script>
|