no empty iframes run at doc start #222

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_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": ["<all_urls>"],
+      "js": ["no_empty_iframes.js"],
+      "run_at": "document_start"
+    }
+  ]
+
+}

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