[英]Load iframe into the page, using Chrome Extension content script
I am able to add HTML/CSS dynamically into the page using a content script. 我可以使用内容脚本动态地将HTML / CSS添加到页面中。 But I tried adding an iframe tag, and ran into a little bit of trouble.
但我尝试添加iframe标签,并遇到了一些麻烦。
Here is my code: 这是我的代码:
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);
note the modalIFrameURL value is: 请注意modalIFrameURL值是:
chrome-extension://omelijcoklpokoeobkpepoipjpbakoeo/modal-iframe.html
This is what I get at the top left of the page: 这是我在页面左上角的内容:
If I hover over the gray fail box, it says: 如果我将鼠标悬停在灰色的故障框上,它会说:
Requests to the server have been blocked by an extension.
对服务器的请求已被扩展程序阻止。
Does anyone know how to load an iframe from a content-script? 有谁知道如何从内容脚本加载iframe? What I am looking to do is load an HTML file from my Chrome Extension codebase into that iframe.
我要做的是将Chrome扩展程序代码库中的HTML文件加载到该iframe中。
I ran into this a few weeks ago. 几个星期前我遇到了这个问题。 I found that adding a "web_accessible_resources" section to my manifest.json file resolved it.
我发现在manifest.json文件中添加“web_accessible_resources”部分解决了它。
From what you are calling out, it should look like: 从你的呼唤,它应该看起来像:
"web_accessible_resources": [
"modal-iframe.html"
],
https://developer.chrome.com/extensions/manifest/web_accessible_resources https://developer.chrome.com/extensions/manifest/web_accessible_resources
Just make sure that you are including "modal-iframe.html" in your extension build directory. 只需确保在扩展构建目录中包含“modal-iframe.html”即可。
Hope that helps. 希望有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.