将HTML注入到内容脚本的页面中

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

UPDATE

罗布的建议下做这项工作（见接受的答案）。唯一的额外步骤是在清单web_accessible_resources下注册该文件。

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

来源

2013-05-02 QFDev

是的，这是可能的。使用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提供）

来源

2013-05-02 10:45:54

完美的作品，谢谢！唯一的额外步骤是将资源注册到web_accessible_resources下的清单中：http://developer.chrome.com/extensions/manifest.html#web_accessible_resources – QFDev 2013-05-02 14:07:18

@QFDev，您将这些代码放在哪里？ – Chamnap 2015-12-05 07:27:42

@Chamnap在我的情况下，我在我的内容脚本中有这个代码。 – QFDev 2015-12-05 12:50:20

这是我的方法：

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等

来源

2014-03-25 13:09:40 Kamil

看起来像Chrome浏览器已在主线程上弃用XMLHttpRequest（）。这就是当我为browserAction采用此代码时所得到的结果。单击方法： '主线程上的同步XMLHttpRequest已弃用，因为它对最终用户的体验有不利影响。如需更多帮助，请查看http：// xhr.spec.whatwg.org/.' – baskint 2015-10-28 15:24:33

将'.open（）'的最后一个参数更改为'true'，它将是异步的 – Kamil 2015-10-28 18:35:04

为了使异步，我必须更改最后一个将'.open（）'的参数设置为'true'，并将最后三行代码包装在'xmlHttp.onload = function（）{...} – richardkmiller 2017-08-09 13:52:28

如果您使用您的Chrome扩展角，你可以利用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);

来源

2015-04-22 06:14:57 WeNeigh

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

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

来源

2017-04-17 18:46:15

做的另一种方法是使用新的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 
    });

来源

2018-01-22 09:36:09 bruddah

将HTML注入到内容脚本的页面中

回答

相关问题