It's relatively easy to add whole web pages by having your content script inject them in an iframe. Just follow these guidelines:
Place the *.htm or *.html files in your extension's source folder(s).
Place any *.css and *.js files, that the HTML uses, in the extension folder(s) too.
Declare the HTML file(s) as resources. EG:
"web_accessible_resources": ["Embedded_Hello_world.htm"]
Do not use any inline, or external server, javascript in your HTML files. This avoids problems with the Content Security Policy (CSP).
This question doesn't cover communicating with the page/iframe, but if you want to do that, it is a bit more involved. Search here on SO; it's been covered many times.
Example:
You can see this in action by:
- Creating a new extension folder.
- Download jQuery into it.
- Create the 5 files as specified below.
- Load the unpacked extension (You can see similar steps in this answer.)
- Reload this page in Chrome; you'll see the "Hello World" page, embedded at the top.
Create these files in the extension folder:
manifest.json:
{
"manifest_version": 2,
"content_scripts": [ {
"js": [ "iframeInjector.js" ],
"matches": [ "https://stackoverflow.com/questions/*"
]
} ],
"description": "Inject a complete, premade web page",
"name": "Inject whole web page",
"version": "1",
"web_accessible_resources": ["Embedded_Hello_world.htm"]
}
iframeInjector.js:
var iFrame = document.createElement ("iframe");
iFrame.src = chrome.extension.getURL ("Embedded_Hello_world.htm");
document.body.insertBefore (iFrame, document.body.firstChild);
Embedded_Hello_world.htm:
<!DOCTYPE html>
<html><head>
<title>Embedded Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="HelloWorld.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="HelloWorld.js"></script>
</head><body>
<p>Hello World!</p>
</body></html>
HelloWorld.css:
body {
color: red;
background-color: lightgreen;
}
HelloWorld.js:
$(document).ready (jQueryMain);
function jQueryMain () {
$("body").append ('<p>Added by jQuery</p>');
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
