add bypassCSP option + fix sync options in background

background.js

@@ -26,9 +26,17 @@ function detectFeed(event) {
         event.responseHeaders.splice(i, 1);
       }
       else if (event.responseHeaders[i].name.toLowerCase() == 'content-security-policy') {
-        if (enableCss)
+
+        try {
+          let options = JSON.parse(localStorage.getItem('options'));
+
+          if (options.enableCss && options.bypassCSP)
             event.responseHeaders[i].value = patchCSP(event.responseHeaders[i].value);
         }
+        catch(e) {
+          console.log(e);
+        }
+      }
     }
 
     // don't cache requests we modified
@@ -40,13 +48,11 @@ function detectFeed(event) {
   }
 
   return { responseHeaders: event.responseHeaders };
+
+
 }
 
 const browser = window.browser || window.chrome;
-let enableCss = false;
-browser.storage.sync.get({enableCss: false}).then(function(options) {
-  enableCss = options.enableCss;
-})
 
 browser.webRequest.onHeadersReceived.addListener(
   detectFeed,

rsspreview.js

@@ -21,6 +21,7 @@
     fullPreview: false,
     doAuthor: false,
     enableCss: false,
+    bypassCSP: false,
     customCss: null,
     newTab: true
   };

settings/options.html

@@ -30,6 +30,7 @@
 
     <label class="setting browser-style"><input type="checkbox" id="enableCss" class="validate" > Enable custom CSS:</label><br />
     <textarea class="setting browser-style validate" id="customCss" rows="7" cols="50" style="font-family: monospace;"></textarea>
+    <label class="setting browser-style"><input type="checkbox" id="bypassCSP" class="validate" > Bypass CSP header when needed</label><br />
 
     <script src="options.js"></script>
 

settings/options.js

@@ -2,7 +2,7 @@
 function saveOptions(e) {
   e.preventDefault();
 
-  browser.storage.sync.set({
+  let options = {
     doThumb: document.querySelector("#doThumb").checked,
     doMaxWidth: document.querySelector("#doMaxWidth").checked,
     valMaxWidth: document.querySelector("#valMaxWidth").value,
@@ -12,9 +12,14 @@ function saveOptions(e) {
     doAuthor: document.querySelector("#doAuthor").checked,
     orangeIcon: document.querySelector("#orangeIcon").checked,
     enableCss: document.querySelector("#enableCss").checked,
+    bypassCSP: document.querySelector("#bypassCSP").checked,
     customCss: document.querySelector("#customCss").value,
     newTab: document.querySelector("#newTab").checked
-  });
+  };
+
+  browser.storage.sync.set(options);
+  localStorage.setItem('options', JSON.stringify(options));
+
 }
 
 
@@ -30,8 +35,11 @@ function restoreOptions() {
     document.querySelector("#doAuthor").checked = result.doAuthor;
     document.querySelector("#orangeIcon").checked = result.orangeIcon;
     document.querySelector("#enableCss").checked = result.enableCss;
+    document.querySelector("#bypassCSP").checked = result.bypassCSP;
     document.querySelector("#customCss").value = result.customCss;
     document.querySelector("#newTab").checked = result.newTab;
+
+    localStorage.setItem('options', JSON.stringify(result));
   }
 
   function onError(error) {
@@ -48,6 +56,7 @@ function restoreOptions() {
     doAuthor: false,
     orangeIcon: false,
     enableCss: false,
+    bypassCSP: false,
     customCss: null,
     newTab: true
   });