使用Chrome内容脚本添加复杂的HTML [英] Adding complex HTML using a Chrome content script

问题描述

我正在使用Chrome扩展程序的内容脚本来创建在网页上添加的复杂显示。

我首先测试了它直接集成在网站上，但现在我需要把它放在一个扩展名中。

问题是Chrome的内容脚本API只允许注入javascript。这意味着，为了注入复杂的HTML布局，我需要完全用JS对象编写它，这些对象需要编写很长时间，很难维护，并且绝对不适合设计人员。

我想知道是否有人知道或可以想出一个聪明的方法来获得更好的工作流程。

通过让内容脚本将它们注入到iframe中，可以轻松地添加整个网页。只需遵循以下指南： $ b

1. 将 *。htm 或 *。html 您的扩展程序的源文件夹中的文件。

放置任何 * .css 和 *。js 文件，即HTML在扩展文件夹中使用的文件。



2. 将HTML文件声明为资源。 EG：
   
   

    web_accessible_resources：[Embedded_Hello_world.htm] 
     

   
   

不要使用任何 em> 或外部服务器，JavaScript中的HTML文件。这避免了内容安全策略（CSP）。


3. 这个问题不包括与页面/ iframe的通信，但是如果你想这样做，它会涉及更多一点。在这里搜索;它已被多次覆盖。

示例：

您可以通过以下方式查看此功能：

1. 创建新扩展文件夹。


2. 下载
3. 创建下面指定的5个文件。


4. 加载解压后的扩展名（您可以看到类似于noreferrer> jQuery ）步骤为此答案。）


5. 在Chrome中重新加载此页面;您将在顶部看到Hello World页面。

在扩展文件夹中创建这些文件：

manifest.json ：

  {
manifest_version：2，
content_scripts：[{
js：[iframeInjector.js]，
matches：[https：// stackoverflow。 com / questions / *

}]，
description：注入完整的预制网页，
name：注入整个网页 ，
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>嵌入式Hello World< / title> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8> 
 
< link href =HelloWorld.css =stylesheettype =text / css> 
 
< script type =text / javascriptsrc =jquery.min.js>< / script> 
< script type =text / javascriptsrc =HelloWorld.js>< / script> 
< / head>< body> 
< p> Hello World！< / p> 
< / body>< / html> 
  

HelloWorld.css：

  body {
 color：red; 
 background-color：lightgreen; 
} 
  

HelloWorld.js：

  $（document）.ready（jQueryMain）; 
 
函数jQueryMain（）{
 $（body）。append（'< p> jQuery增加< / p>'）; 
} 
  

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.

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.

解决方案

It's relatively easy to add whole web pages by having your content script inject them in an iframe. Just follow these guidelines:

1. Place the *.htm or *.html files in your extension's source folder(s).

2. Place any *.css and *.js files, that the HTML uses, in the extension folder(s) too.

3. Declare the HTML file(s) as resources. EG:

   "web_accessible_resources": ["Embedded_Hello_world.htm"]
   

   
   

4. Do not use any inline, or external server, javascript in your HTML files. This avoids problems with the Content Security Policy (CSP).

5. 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:

1. Creating a new extension folder.
2. Download jQuery into it.
3. Create the 5 files as specified below.
4. Load the unpacked extension (You can see similar steps in this answer.)
5. 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>');
}

这篇关于使用Chrome内容脚本添加复杂的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！