48

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

更新

Rob 的建议可以完成这项工作（请参阅已接受的答案）。唯一的附加步骤是在web_accessible_resources下的清单中注册文件。

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

5 回答 5

68

是的，这是可能的。用于chrome.runtime.getURL获取资源的绝对 URL。例如：

第 1 步（标准 JavaScript）：

fetch(chrome.runtime.getURL('/template.html')).then(r => r.text()).then(html => {
  document.body.insertAdjacentHTML('beforeend', html);
  // not using innerHTML as it would break js event listeners of the page
});

第 1 步（jQuery）：

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

第2步：

在web_accessible_resources下的manifest.json中注册资源：

  "web_accessible_resources": [
    "template.html",
    "foo.jpg"
  ]
于 2013-05-02T10:45:54.820 回答
22

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

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

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

并像这样注入它：

    fetch(chrome.runtime.getURL('/modal.html'))
        .then(response => response.text())
        .then(data => {
            document.getElementById('inject-container').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
        });
于 2018-01-22T09:36:09.477 回答
6

这是我使用同步 XHR 的方法：

var xmlHttp = null;

xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", chrome.runtime.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 等。

于 2014-03-25T13:09:40.690 回答
6

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

var iframe  = document.createElement ('iframe');
iframe.src  = chrome.runtime.getURL ('iframe.html');
document.body.appendChild (iframe);
于 2017-04-17T18:46:15.673 回答
2

如果您在 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.runtime.getURL("template.html") + "'");
existingElement.appendChild(injectedContent);
于 2015-04-22T06:14:57.807 回答