时间戳

首页 > 解决方案 > Chrome 扩展：将 HTML 添加到网页中

google-chrome-extension - Chrome 扩展：将 HTML 添加到网页中

问题描述

我看过这个答案：

Chrome 扩展：插入固定 div 作为 UI

它将一个 div 插入到当前网页中。

但是，一直这样做会很烦人：

                            "div.id = 'myDivId';" +
                            "div.style.position = 'fixed';" + 
                            "div.style.top = '50%';" +
                            "div.style.left = '50%';" +

是否可以插入一个完整的 HTML 模板（即，您将其作为 template.html 包含在扩展中）？

标签： google-chrome-extension

解决方案

有几种方法。

通过web_accessible_resources向内容脚本公开资源

然后内容脚本几乎可以直接在图像、视频、iframe 中使用它们（通过使用chrome.runtime.getURLfetch() ），或者使用和读取 html 文件的内容XMLHttpRequest。

如果您的 UI 很复杂，请使用 iframe 方法 - 它的内容将是一个成熟的扩展环境，例如带有自己的 chrome://extension URL 的 browser_action 弹出窗口。

缺点是任何站点都可以直接读取您的资源，并且这些站点可以很容易地检测到您的扩展程序的存在。

使用消息传递并通过后台脚本读取资源

内容.js：

chrome.runtime.sendMessage({cmd: 'getTemplate'}, html => {
  document.body.insertAdjacentHTML('beforeend', html);
});

背景.js：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.cmd === 'getTemplate') {
    fetch('/templates/foo.html').then(r => r.text()).then(sendResponse);
    return true;
  }
});

使用你的编译器/捆绑器

主要捆绑器/编译器的插件允许将文件内容内联到另一个中，因此您可以在编译的内容脚本中包含 HTML 模板作为文字字符串。

推荐阅读