javascript 使用 Chrome 内容脚本添加复杂的 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15873904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding complex HTML using a Chrome content script
提问by Malharhak
I am working with Chrome extension's content script to create a complex display that is added on web pages.
我正在使用 Chrome 扩展程序的内容脚本来创建添加到网页上的复杂显示。
I have first tested it directly integrated on a website, but now I need to put it in an extension.
我首先测试了它直接集成在网站上，但现在我需要把它放在一个扩展中。
The thing is that the content script API for Chrome only allows to inject javascript. That means that, to inject complex HTML layouts I would need to write it entirely with JS objects, which is long to write, hard to maintain and absolutely not designer-friendly.
问题是 Chrome 的内容脚本 API 只允许注入 javascript。这意味着，要注入复杂的 HTML 布局，我需要完全使用 JS 对象来编写它，这需要编写很长时间、难以维护并且绝对不适合设计人员。
I'm wondering if anyone know or can think of a clever way to get a better workflow on this.
我想知道是否有人知道或可以想出一种聪明的方法来获得更好的工作流程。
回答by Brock Adams
It's relatively easy to add whole web pages by having your content script inject them in an iframe. Just follow these guidelines:
通过让您的内容脚本将它们注入 iframe 来添加整个网页相对容易。只需遵循以下准则：
Place the
*.htmor*.htmlfiles in your extension's source folder(s).Place any
*.cssand*.jsfiles, 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.
将
*.htm或*.html文件放在扩展程序的源文件夹中。将任何
*.css与*.js文件，该HTML用途，扩展文件夹（S）了。将 HTML 文件声明为资源。例如：
"web_accessible_resources": ["Embedded_Hello_world.htm"]不要在 HTML 文件中使用任何内联或外部服务器 javascript。这避免了内容安全策略(CSP) 的问题。
这个问题不包括与页面/iframe 的通信，但如果你想这样做，它会涉及更多。在此处搜索 SO；它被覆盖了很多次。
Example:
例子：
You can see this in action by:
您可以通过以下方式看到这一点：
- Creating a new extension folder.
- Download jQueryinto 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.
- 创建一个新的扩展文件夹。
- 将jQuery下载到其中。
- 创建如下指定的 5 个文件。
- 加载解压后的扩展程序（您可以在此答案中看到类似的步骤。）
- 在 Chrome 中重新加载此页面；您将看到嵌入在顶部的“Hello World”页面。
Create these files in the extension folder:
在扩展文件夹中创建这些文件：
manifest.json:
清单.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:
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:
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:
你好世界.css：
body {
color: red;
background-color: lightgreen;
}
HelloWorld.js:
HelloWorld.js：
$(document).ready (jQueryMain);
function jQueryMain () {
$("body").append ('<p>Added by jQuery</p>');
}
回答by Photonic
This may be better, no external library and no iframe. Is nearly the same as iautomation solution.
这可能更好，没有外部库和 iframe。与 iautomation 解决方案几乎相同。
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var div = document.createElement('div');
div.innerHTML = this.responseText;
document.body.insertBefore(div, document.body.firstChild);
} else {
console.log('files not found');
}
};
xhttp.open("GET", chrome.extension.getURL("/content.htm"), true);
xhttp.send();
回答by iautomation
I had the same issue, that my extension heavily relies on script templates
我有同样的问题，我的扩展严重依赖脚本模板
Here's what I did:
这是我所做的：
- create
templates.htmlto store script templates in - add
templates.htmlto theweb_accessible_resourcesas in the the above answer^^ - access
templates.htmlfromcontent.jswith xhr and parse with jQuery
- 创建
templates.html以将脚本模板存储在 - 添加
templates.html到web_accessible_resources上面的答案中^^ - 访问
templates.html从content.js与XHR和解析与jQuery
manifest.json
清单文件.json
"web_accessible_resources": ["templates.html"]
templates.html
模板.html
<script id="template1" type="text/template">
<div class="template1">template1</div>
</script>
<script id="template2" type="text/template">
<div class="template2">template2</div>
</script>
content.js
内容.js
function getTemplates(){
return new Promise(function(resolve){
$.ajax({
url: chrome.extension.getURL('/templates.html'),
success: function(data) {
var $templates = $('<div></div>').append($.parseHTML(data)).find('script'),
templates = {};
$templates.each(function(){
templates[this.id] = this.innerHTML;
});
return resolve(templates);
}
});
});
}
getTemplates().then(function(templates){
console.log(templates.template1); //<div class="template1">template1</div>
});
