How to inject CSS into an iFrame in Node Webkit?

Question

I'm working on a small mac app version of a web app using nw.js and want to style it to look more "mac-app" like: How would I inject custom CSS into the iFrame that loads the app?

I've tried the standard way but it doesn't work because they're from different domains.

E.g. I pull in an iFrame of an external website:

<body>
<iframe id="app" src="https://example.com" nwdisable nwfaketop>
</iframe>
</body>

and want to put my own custom CSS on top of the iFrame.

use `postMessage()` from the outside and `addEventListener("message")` from the inside. — dandavis, Apr 12 '15 at 00:14
Please add some code to support your question and some more explanation! — Polynomial Proton, Apr 12 '15 at 00:19

score 0 · Answer 1 · answered Apr 20 '15 at 04:33

Use a <webview> instead. It comes from chrome and is documented there.

<body>
    <webview id="app" src="https://example.com"></webview>
</body>
<script>
    var wv = document.getElementById("app");
    wv.addEventListener("loadcommit", function(e){
        wv.insertCSS({code: "style {  }"}); // or...
        wv.insertCSS({file: "styles.css"});
    });
</script>

(Untested code)

score 0 · Answer 2 · edited May 23 '17 at 11:53

If you need to use an iframe and not a webview, you may be able to disable the cross-origin security with chromium-args such as --disable-web-security --user-data-dir (from here)

Then you could theoretically inject CSS in the "standard way":

var iframe = document.querySelector("iframe");
iframe.onload = function(){
    var doc = iframe.contentDocument;
    var style = doc.createElement("style");
    style.type = "text/css";
    style.appendChild(doc.createTextNode(css));
    doc.head.appendChild(style);
};

How to inject CSS into an iFrame in Node Webkit?

2 Answers2