使用 Chrome 内容脚本添加复杂的 HTML [英] Adding complex HTML using a Chrome content script
问题描述
我正在使用 Chrome 扩展程序的内容脚本来创建添加到网页上的复杂显示.
I am working with Chrome extension's content script to create a complex display that is added on web pages.
我首先测试了它直接集成在网站上，但现在我需要将其放入扩展程序中.
I have first tested it directly integrated on a website, but now I need to put it in an extension.
问题是 Chrome 的内容脚本 API 只允许注入 javascript.这意味着，要注入复杂的 HTML 布局，我需要完全使用 JS 对象来编写它，这编写时间长、难以维护且绝对不适合设计人员.
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.
我想知道是否有人知道或可以想出一种聪明的方法来获得更好的工作流程.
I'm wondering if anyone know or can think of a clever way to get a better workflow on this.
推荐答案
通过将内容脚本注入 iframe 来添加整个网页相对容易.只需遵循以下准则:
It's relatively easy to add whole web pages by having your content script inject them in an iframe. Just follow these guidelines:
将
*.htm或*.html文件放在扩展程序的源文件夹中.
Place the
*.htmor*.htmlfiles in your extension's source folder(s).
将 HTML 使用的任何 *.css 和 *.js 文件也放在扩展文件夹中.
Place any *.css and *.js files, that the HTML uses, in the extension folder(s) too.
将 HTML 文件声明为资源.EG:
Declare the HTML file(s) as resources. EG:
"web_accessible_resources": ["Embedded_Hello_world.htm"]
不要在您的 HTML 文件中使用任何内联或外部服务器、javascript.这避免了内容安全政策 (CSP).
Do not use any inline, or external server, javascript in your HTML files. This avoids problems with the Content Security Policy (CSP).
这个问题不包括与页面/iframe 的通信，但如果你想这样做，它会涉及更多.在此处搜索 SO；它已被多次覆盖.
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.
您可以通过以下方式看到这一点:
You can see this in action by:
- 创建一个新的扩展文件夹.
- 将 jQuery 下载到其中.
- 创建如下指定的 5 个文件.
- 加载解压后的扩展程序(您可以在这个答案中看到类似的步骤.)
- 在 Chrome 中重新加载此页面；您将看到嵌入在顶部的Hello World"页面.
- 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.
在扩展文件夹中创建这些文件:
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>');
}
这篇关于使用 Chrome 内容脚本添加复杂的 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
