将HTML从内容脚本注入到页面中 [英] Inject HTML into a page from a content script

问题描述

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

更新

Rob的建议工作（查看接受的答案）。唯一的额外步骤是在 web_accessible_resources 下的清单中注册该文件。

  {
 ... 
web_accessible_resources：[
myimportfile1.html，
myimportfile2 .html
，
 ... 
} 
  

解决方案

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

第1步：

$。get（chrome.extension.getURL（'/ template.html'），function（data）{
$（data）.appendTo（'body'）;
//如果你'使用jQuery 1.8+：
// $（$。parseHTML（data））。appendTo（'body'）;
}）;


第2步：

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

I am building a Chrome Extension and I have a requirement to overlay a blob of html on top of a few websites. At the moment I am using a JQuery .Get to pull the html from my server. In order to improve performance I am wondering if it is possible to include the html as a file in the extension directory and access the source directly from there? Does anyone know if this is possible?

UPDATE

Rob's suggestion does the job (see accepted answer). The only additional step is to register the file in the manifest under web_accessible_resources.

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

解决方案

Yes, that's possible. Use chrome.extension.getURL to get an absolute URL for the resource. For example:

Step 1:

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

Step 2:

Register the resource in the manifest under web_accessible_resources: See https://developer.chrome.com/extensions/manifest#web_accessible_resources (Provided by @QFDev)

这篇关于将HTML从内容脚本注入到页面中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！