Small fixes and updates to use browser-polyfill

Author: gordonped

background/background.js

@@ -1,8 +1,4 @@
-if (chrome) {
-  chrome.runtime.onMessage.addListener(notify);
-}else {
-  browser.runtime.onMessage.addListener(notify);
-}
+browser.runtime.onMessage.addListener(notify);
 
 function createReadableVersion(dom) {
   var reader = new Readability(dom);
@@ -14,7 +10,7 @@ function convertArticleToMarkdown(article) {
   var turndownService = new TurndownService()
   var markdown = turndownService.turndown(article.content);
 
-  //add article titel as header
+  //add article title as header
   markdown = "# " + article.title + "\n" + markdown;
 
   //add summary if exist
@@ -36,40 +32,23 @@ function downloadMarkdown(markdown, title) {
     type: "text/markdown;charset=utf-8"
   });
   var url = URL.createObjectURL(blob);
-  if (chrome) {
-    chrome.downloads.download({
-      url: url,
-      filename: generateValidFileName(title) + ".md",
-      saveAs: true
-    }, function(id) {
-      chrome.downloads.onChanged.addListener((delta ) => {
-        //release the url for the blob
-        if (delta.state && delta.state.current == "complete") {
-          if (delta.id === id) {
-            window.URL.revokeObjectURL(url);
-          }
-        }
-      });
-    });
-  }else {
-    browser.downloads.download({
-      url: url,
-      filename: generateValidFileName(title) + ".md",
-      incognito: true,
-      saveAs: true
-    }).then((id) => {
-      browser.downloads.onChanged.addListener((delta ) => {
-        //release the url for the blob
-        if (delta.state && delta.state.current == "complete") {
-          if (delta.id === id) {
-            window.URL.revokeObjectURL(url);
-          }
+
+  browser.downloads.download({
+    url: url,
+    filename: generateValidFileName(title) + ".md",
+    saveAs: true
+  }).then((id) => {
+    browser.downloads.onChanged.addListener((delta ) => {
+      //release the url for the blob
+      if (delta.state && delta.state.current == "complete") {
+        if (delta.id === id) {
+          window.URL.revokeObjectURL(url);
         }
-      });
-    }).catch((err) => {
-      console.error("Download failed" + err)
+      }
     });
-  }
+  }).catch((err) => {
+    console.error("Download failed" + err)
+  });
 }
 
 
@@ -84,12 +63,7 @@ function notify(message) {
 
     var article = createReadableVersion(dom);
     var markdown = convertArticleToMarkdown(article);
-    //downloadMarkdown(markdown, article);
-    if (chrome) {
-      chrome.runtime.sendMessage({type: "display.md", markdown: markdown, article: article});
-    } else {
-      browser.runtime.sendMessage({ type: "display.md", markdown: markdown, article: article });
-    }
+    browser.runtime.sendMessage({ type: "display.md", markdown: markdown, article: article });
   }
   else if (message.type == "download") {
     downloadMarkdown(message.markdown, message.title);

browser-polyfill.min.js

@@ -0,0 +1,7 @@
+function notifyExtension() {
+    //var serializer = new XMLSerializer();
+    //var content = serializer.serializeToString(document);
+    var content = document.documentElement.outerHTML;
+    browser.runtime.sendMessage({ type: "clip", "dom": content});
+}
+notifyExtension();

contentScript/pageScraper.js

@@ -1,7 +1,7 @@
 {
 
     "manifest_version": 2,
-    "name": "markdown-clipper",
+    "name": "MarkDownload - Markdown Web Clipper",
     "version": "2.0",
     "author": "Enrico Kaack/Gordon Pedsersen",
 
@@ -31,9 +31,7 @@
     },
 
     "background": {
-        "scripts": ["background/turndown.js", "/background/Readability.js", "background/background.js"]
+        "scripts": ["browser-polyfill.min.js", "background/turndown.js", "/background/Readability.js", "background/background.js"]
     }
-
-
 
   }

contentScript/pageScrapper.js

@@ -6,10 +6,15 @@
     <meta charset="utf-8">
     <style>
       *{margin:0;padding:0;}
+      body {
+        width:350px;
+        height:500px;
+        border-radius: 0.5em;
+        overflow: hidden;
+      }
       @keyframes spinner {
         to {transform: rotate(360deg);}
-      }
-      
+      }      
       #spinner:before {
         content: '';
         box-sizing: border-box;
@@ -25,11 +30,6 @@
         border-right: 2px solid transparent;
         animation: spinner .6s linear infinite;
       }
-      body {
-        width:350px;
-        height:500px;
-        border-radius: 0.5em;
-      }
       textarea#md {
         height:calc(100% - 3em);
         width:calc(100% - 1em);
@@ -40,6 +40,7 @@
         width: 100%;
         height: 100%;
         display:none;
+        flex-direction: column;
       }
       a#download {
         display:block;
@@ -61,7 +62,8 @@
     <a href="#" id="download">Download</a>
   </div>
   <div id="spinner"></div>
-  <script src="clipSite.js"></script>
+  <script type="application/javascript" src="../browser-polyfill.min.js"></script>
+  <script type="application/javascript" src="clipSite.js"></script>
 </body>
 
 </html>

manifest.json

@@ -1,34 +1,23 @@
-if (chrome) {
-    chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
-        var id = tabs[0].id;
-        var url = tabs[0].url;
-          chrome.tabs.executeScript(id, {
-              file: "/contentScript/pageScrapper.js"
-          }, function() {
-              console.log("Successfully injected");
-          });
-        
-    });
-} else {
-    browser.tabs.query({currentWindow: true, active: true})
-    .then((tabs) => {
-      var id = tabs[0].id;
-      var url = tabs[0].url;
-        browser.tabs.executeScript(id, {
-            file: "/contentScript/pageScrapper.js"
-        }).then( () => {
-            console.log("Successfully injected");
-        }).catch( (error) => {
-            console.error(error);
+
+browser.tabs.query({currentWindow: true, active: true})
+.then((tabs) => {
+    var id = tabs[0].id;
+    var url = tabs[0].url;
+    browser.tabs.executeScript(id, {
+        file: "/browser-polyfill.min.js"
+    }).then(() => {
+        return browser.tabs.executeScript(id, {
+            file: "/contentScript/pageScraper.js"
         });
-      });
-}
+    }).then( () => {
+        console.log("Successfully injected");
+    }).catch( (error) => {
+        console.error(error);
+    });
+});
 
-if (chrome) {
-    chrome.runtime.onMessage.addListener(notify);
-} else {
-    browser.runtime.onMessage.addListener(notify);
-}
+
+browser.runtime.onMessage.addListener(notify);
 
 function download(e) {
     e.preventDefault();
@@ -37,11 +26,8 @@ function download(e) {
         markdown: document.getElementById("md").value,
         title: document.getElementById("md").title
     };
-    if (chrome) {
-        chrome.runtime.sendMessage(message);
-    } else {
-        browser.runtime.sendMessage(message);
-    }
+
+    browser.runtime.sendMessage(message);
 }
 
 //function that handles messages from the injected script into the site
@@ -50,7 +36,7 @@ function notify(message) {
         document.getElementById("md").value = message.markdown;
         document.getElementById("md").title = message.article.title;
         document.getElementById("download").addEventListener("click", download);
-        document.getElementById("container").style.display = 'block';
+        document.getElementById("container").style.display = 'flex';
         document.getElementById("spinner").style.display = 'none';
     }
 }