IFrame in Chrome Extension

Question

I'm wondering how to resize an iFrame dynamically (to the app size) in a ChromeOS app. At this point, it just shows up with a white background (replacing the site mentioned in the iFrame) with a black border around it (which should be there, as mentioned in the CSS).

Here's my window.html:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <script src="jquery-3.3.1.min.js"></script>
    <title> GRLC Browser </title>
    <style>
        #ifrm {
            width: 100%;
            height: 100%;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: 2px solid black;
        }
        .iframe {
            width: 100%;
            height: 100%;
        }
        diiv {
            width: 100%;
            height: 100%;
            border: 2px solid black;
        }
        /* DIV and IFRM sizing needs a Band-aid */
    </style>
    <script>
        // Auto Size Adjustment Needs a Banda-id
        var html = document.documentElement;
        var height = $(window).height();
        document.getElementById("diiv").setAttribute("style","height: " + height + "px;");
        document.getElementById("ifrm").setAttribute("style","height: " + height + "px;");
    </script>
</head>
<body>
    <div id="diiv">
    <iframe src="https://garli.co.in">
        <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
</body>

And here's my manifest.json:

{
"name": "GRLC Browser",
"description": "Search the Baked Blocks of Garlic on ChromeOS",
"version": "0.1",
"manifest_version": 2,
"app": {
    "background": {
        "scripts": ["background.js"]
    }
},
"incognito": "not_allowed",
"content_security_policy": "default-src 'self' 'unsafe-eval' 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-eval' 'unsafe-inline';",
"minimum_chrome_version": "47",
"icons": {
    "128": "icon-128.png"
 }
}

Thanks for the help in advance!

The first step is debugging: right-click the popup, inspect, read the console and you'll see an error. Then you'll google it to find out that [inline code isn't allowed by default](https://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working). — wOxxOm, Mar 02 '18 at 08:22

score 0 · Answer 1 · answered Mar 05 '18 at 21:18

Found this on the W3 website.

Basically: take the JavaScript, encrypt it in SHA-256/base64, and add it to the manifest.

This can help with encryption on Linux (requires OpenSSL): echo -n "alert('Hello, world.');" | openssl dgst -sha256 -binary | openssl enc -base64

Here's an example of the Content Security Policy value:

default-src 'self'; script-src 'self' https://example.com 'sha256-base64 encoded hash';

Hope that helps and that you don't need me to compile,

Matt

IFrame in Chrome Extension

1 Answers1