如何在PDF查看器上注入内容脚本视图?

时间:2017-08-04 05:19:27

标签: javascript pdf iframe google-chrome-extension

我正在开发一个Chrome扩展程序,它将使用content_script注入一个iframe,它将成为popup.html的容器。一切正常,但是,在PDF查看器上测试时,它无法在PDF查看器上正确显示,如下所示。

enter image description here

关于我的代码,这就是我正在做的事情。

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一样正确显示其扩展视图,如下所示。

enter image description here

他们如何正确地注入iframe?

0 个答案:

没有答案