我正在开发一个Chrome扩展程序,它将使用content_script
注入一个iframe,它将成为popup.html的容器。一切正常,但是,在PDF查看器上测试时,它无法在PDF查看器上正确显示,如下所示。
关于我的代码,这就是我正在做的事情。
content_script.js
chrome.runtime.onMessage.addListener((request) => {
const contentScript = new ContentScript();
switch (request.action) {
case "browser_action_click":
contentScript.injectIframe();
break;
// remove codes from brevity
}
return true;
})
export class ContentScript {
injectIframe() {
const iframe = document.createElement("iframe");
iframe.setAttribute("id", "popup-iframe");
iframe.src = chrome.runtime.getURL("index.html");
// inject
if (document.body) {
document.body.insertBefore(iframe, document.body.lastChild);
}
iframe.onload = () => {
iframe.style.height = "428px";
}
}
}
content_script.css
#popup-iframe {
position: fixed;
top: 14px;
right: 20px;
width: 330px;
border: 0;
padding: 0;
box-sizing: border-box;
z-index: 2147483647;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
}
我还检查其他扩展程序,他们能够像Evernote一样正确显示其扩展视图,如下所示。
他们如何正确地注入iframe?