Chrome扩展程序：将HTML添加到网页中

Question

我已经看到了这个答案：

Chrome extension: Insert fixed div as UI

将div插入当前网页。

但是，一直这样做很累：

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

是否可以插入格式完整的HTML模板（即，您在扩展程序中作为template.html包含）？

Answer 1

有几种方法。

通过web_accessible_resources将资源暴露给内容脚本

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

如果您的用户界面很复杂，则可以使用iframe方法-其内容将是一个完整的扩展环境，例如带有自己的chrome：// extension URL的browser_action弹出窗口。

不利之处在于，任何站点都可以直接读取您的资源，并且这些站点很容易检测到您的扩展程序。

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

content.js：

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

background.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模板中以文字字符串的形式包含HTML模板。