Google Chromeの拡張機能で、HTMLファイルを使用する方法の私的メモ。
manifest.json
{
"web_accessible_resources": ["読み込みたいHTMLファイル.html"]
}
- HTMLをリソースとして宣言する
async function injectHtml(resource, dom) {
const res = await fetch(chrome.runtime.getURL(resource), { method: "GET" })
const html = await res.text()
dom.innerHTML = html
}
const target = document.getElementById("HTMLを挿入するDOM")
injectHtml("HTMLのファイル名", target)
-
web_accessible_resources
で宣言したファイルは、chrome.runtime.getURL()
からURL経由で利用できる。 - Chrome専用なのでビルドツールなしで
async
、await
が使えて楽しい。