diff --git a/no_empty_iframes/README.md b/no_empty_iframes/README.md new file mode 100644 index 0000000..c43f7be --- /dev/null +++ b/no_empty_iframes/README.md @@ -0,0 +1,28 @@ +# No Empty iframes + +## Test Page + +[Test page](https://overdodactyl.github.io/ShadowFox/no_empty_iframes_testpage) + +## 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..533538c --- /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.1", + "homepage_url": "https://github.com/overdodactyl/ShadowFox/tree/master/no_empty_iframes", + + "content_scripts": [ + { + "matches": [""], + "js": ["no_empty_iframes.js"], + "run_at": "document_start" + } + ] + +} diff --git a/no_empty_iframes/no_empty_iframes.js b/no_empty_iframes/no_empty_iframes.js new file mode 100644 index 0000000..32468c3 --- /dev/null +++ b/no_empty_iframes/no_empty_iframes.js @@ -0,0 +1,11 @@ +/* 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); + } + } +}