从内容脚本将HTML注入页面

Question

我正在构建Chrome扩展程序,我需要在几个网站上叠加一大块html.目前我正在使用JQuery .Get从我的服务器中提取html.为了提高性能,我想知道是否可以将html作为文件包含在扩展目录中并直接从那里访问源代码？有谁知道这是否可能？

UPDATE

Rob的建议完成了这项工作(见接受的答案).唯一的额外步骤是在web_accessible_resources下的清单中注册该文件.

{
  ...
  "web_accessible_resources": [
    "myimportfile1.html",
    "myimportfile2.html"
  ],
  ...
}

Answer 1

是的,这是可能的.使用chrome.extension.getURL以获取资源的绝对URL.例如:

步骤1:

$.get(chrome.extension.getURL('/template.html'), function(data) {
    $(data).appendTo('body');
    // Or if you're using jQuery 1.8+:
    // $($.parseHTML(data)).appendTo('body');
});

第2步:

在web_accessible_resources下的清单中注册资源:请参阅https://developer.chrome.com/extensions/manifest#web_accessible_resources(由@QFDev提供)

Answer 2

另一种方法是使用新的Fetch API：

如果该文件的名称是modal.html-更新manifest.json相应

"web_accessible_resources": [
    "modal.html",
],

并像这样注入它：

fetch(chrome.extension.getURL('/modal.html'))
    .then(response => response.text())
    .then(data => {
        document.body.innerHTML += data;
        // other code
        // eg update injected elements,
        // add event listeners or logic to connect to other parts of the app
    }).catch(err => {
        // handle error
    });

Answer 3

这是我的方法:

var xmlHttp = null;

xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", chrome.extension.getURL ("src/inject/inject.html"), false );
xmlHttp.send( null );

var inject  = document.createElement("div");
inject.innerHTML = xmlHttp.responseText
document.body.insertBefore (inject, document.body.firstChild);

没有jQuery等

Answer 4

我用这个代码。它只有 3 行代码，您不需要任何 jquery 的垃圾。

var iframe  = document.createElement ('iframe');
iframe.src  = chrome.runtime.getURL ('iframe.html');
document.body.appendChild (iframe);