使用Chrome擴展程序內容腳本將iframe加載到頁面中

Question

我可以使用內容腳本動態地將HTML / CSS添加到頁面中。 但我嘗試添加iframe標簽，並遇到了一些麻煩。

這是我的代碼：

  const myIFrame = `
    <iframe src="${modalIFrameURL}"></iframe>
  `;
  let div = document.createElement('div');
  div.style.zIndex = 9999999;
  div.innerHTML = myIFrame;
  document.body.insertBefore(div, document.body.firstChild);

請注意modalIFrameURL值是：

chrome-extension://omelijcoklpokoeobkpepoipjpbakoeo/modal-iframe.html

這是我在頁面左上角的內容：

如果我將鼠標懸停在灰色的故障框上，它會說：

對服務器的請求已被擴展程序阻止。

有誰知道如何從內容腳本加載iframe？ 我要做的是將Chrome擴展程序代碼庫中的HTML文件加載到該iframe中。

Answer 1

幾個星期前我遇到了這個問題。 我發現在manifest.json文件中添加“web_accessible_resources”部分解決了它。

從你的呼喚，它應該看起來像：

"web_accessible_resources": [
    "modal-iframe.html"
],

https://developer.chrome.com/extensions/manifest/web_accessible_resources

只需確保在擴展構建目錄中包含“modal-iframe.html”即可。

希望有所幫助。