Question

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

更新

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

这是我的方法：

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 3

另一种方法是使用新的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 4

如果您在Chrome扩展程序中使用Angular，则可以使用ng-include

var injectedContent = document.createElement("div");
injectedContent.setAttribute("ng-include", "");
//ng-include src value must be wrapped in single quotes
injectedContent.setAttribute("src", "'" + chrome.extension.getURL("template.html") + "'");
existingElement.appendChild(injectedContent);

Answer 5

我使用此代码。它只有3行代码，你不需要任何jquery的垃圾。

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

从内容脚本将HTML注入页面

5 个答案: