我可以使用内容脚本将 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
这是我在页面左上角看到的:
如果我将鼠标悬停在灰色失败框上,它会显示:
Requests to the server have been blocked by an extension.
有谁知道如何从内容脚本加载 iframe? 我要做的是将 HTML 文件从我的 Chrome 扩展代码库加载到该 iframe 中。
最佳答案
几周前我遇到了这个问题。我发现在我的 manifest.json 文件中添加一个“web_accessible_resources”部分解决了这个问题。
从你的呼唤来看,它应该是这样的:
"web_accessible_resources": [
"modal-iframe.html"
],
https://developer.chrome.com/extensions/manifest/web_accessible_resources
只需确保您在扩展构建目录中包含“modal-iframe.html”。
希望对您有所帮助。
关于javascript - 使用 Chrome 扩展内容脚本将 iframe 加载到页面中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48604989/