0

I'm working on a Chrome extension that will use content_script to inject an iframe that will be a container of the popup.html. Everything is working fine, however, when testing it on a PDF viewer it does not correctly show on the PDF viewer as shown below.

enter image description here

On my codes, this is what I'm doing.

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);
}

I also check on other extension and they were able to show their extension view correctly like the Evernote as shown below.

enter image description here

How do they correctly inject the iframe?

rpmansion
  • 1,964
  • 1
  • 9
  • 26
  • @wOxxOm it does run. it does inject the view but the behavior is different in PDF viewer. – rpmansion Aug 04 '17 at 05:36
  • Ah, the first screenshot now makes sense. You need `iframe.style.position = 'fixed'` and set `.top`, `.right` etc. – wOxxOm Aug 04 '17 at 05:41
  • @wOxxOm I already did that on the css file counter part of content_script. let me just update my question to include the css. – rpmansion Aug 04 '17 at 05:43
  • Well, simply try to set the style on the element itself. You can do it interactively in devtools. – wOxxOm Aug 04 '17 at 05:44
  • @wOxxOm ok. haha I did even try doing the inline style. It does work now :) – rpmansion Aug 04 '17 at 05:49
  • BTW, simply use `appendChild` instead of `insertBefore`. Currently you're inserting your iframe before the PDF viewer element, which is wrong I think. – wOxxOm Aug 04 '17 at 05:51
  • @wOxxOm If you don't mind what is the difference? I know both will insert the iframe. – rpmansion Aug 04 '17 at 05:55
  • Well, it's just overcomplicated for no gain. – wOxxOm Aug 04 '17 at 05:58
  • @rpmansion, Your current use of [`insertBefore()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) is not exactly the same as `appendChild()`. Your use inserts your `iframe` prior to the `body.lastChild`. Using `appendChild()` will insert the `iframe` after the current `body.lastChild`, as the new `body.lastChild`. Which to use will depend on where you want your `iframe` in the DOM. I would've assumed you would want it either first (i.e. `document.body.insertBefore(iframe,document.body.firstChild)`, or last). You should use what works for what you are desiring to do. – Makyen Aug 04 '17 at 06:25

0 Answers0