From 4c25c4f1a14f0515e7950c25046629db689e2347 Mon Sep 17 00:00:00 2001 From: overdodactyl Date: Sat, 24 Nov 2018 15:31:42 -0700 Subject: [PATCH] no_empty_iframes addon #222 --- no_empty_iframes/README.md | 24 ++++++++++++++++++++++++ no_empty_iframes/manifest.json | 17 +++++++++++++++++ no_empty_iframes/no_empty_iframes.js | 12 ++++++++++++ 3 files changed, 53 insertions(+) create mode 100644 no_empty_iframes/README.md create mode 100644 no_empty_iframes/manifest.json create mode 100644 no_empty_iframes/no_empty_iframes.js diff --git a/no_empty_iframes/README.md b/no_empty_iframes/README.md new file mode 100644 index 0000000..c80b6e9 --- /dev/null +++ b/no_empty_iframes/README.md @@ -0,0 +1,24 @@ +# No Empty iframes + +## What it does + +No Empty iframes adds a blank `div` to any iframes that have an empty `body`. + +## That sounds useless...what's the point? + +[ShadowFox](https://github.com/overdodactyl/ShadowFox) utilizes `userContent.css` and `userChrome.css` to create a universal dark theme for Firefox. In part, this means styling `about:blank`. A complication of this is that `about:blank` is also used for anonymous frames on webpages. Generally, iframes will contain content, making the following css rule specific enough: + +```css +html > body:empty { + background-color: var(--in-content-page-background)!important; + margin: 0!important +} +``` + +Some pages, however, have empty iframes that cause readability issues (see [#222](https://github.com/overdodactyl/ShadowFox/issues/222)). + +This extension injects an empty div into such iframes, allowing the rule above to work. + +## Better approaches? + +If anyone has a better approach/workaround for this problem, I would appreciate any suggestions. \ No newline at end of file diff --git a/no_empty_iframes/manifest.json b/no_empty_iframes/manifest.json new file mode 100644 index 0000000..13ee691 --- /dev/null +++ b/no_empty_iframes/manifest.json @@ -0,0 +1,17 @@ +{ + + "description": "Add an empty div to the body of any empty iframes. Supplemental addon to ShadowFox.", + "manifest_version": 2, + "name": "No Empty iframes", + "version": "1.0", + "homepage_url": "https://github.com/overdodactyl/ShadowFox/no_empty_iframes", + + "content_scripts": [ + { + "matches": [""], + "js": ["no_empty_iframes.js"], + "run_at": "document_end" + } + ] + +} diff --git a/no_empty_iframes/no_empty_iframes.js b/no_empty_iframes/no_empty_iframes.js new file mode 100644 index 0000000..05a29b0 --- /dev/null +++ b/no_empty_iframes/no_empty_iframes.js @@ -0,0 +1,12 @@ +/* Once page finishes loading, find all empty iframes + * and add empty div inside */ +window.onload = function() { + var frames = document.getElementsByTagName("iframe"); + for (var i = 0; i < frames.length; i++) { + var doc = frames[i].contentWindow.document; + if (doc.body.innerHTML === "") { + var elemDiv = document.createElement('div'); + doc.body.appendChild(elemDiv); + } + } +}