Add API status for WebRequest mode.

And try to use it (not working at all, yet) See #193
kiwix · Jan 3, 2018 · 7a732a2 · 7a732a2
1 parent 3f97a11
commit 7a732a2
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 0 deletions.
diff --git a/manifest.json b/manifest.json
@@ -37,6 +37,10 @@
         "scripts": ["webextension/backgroundscript.js"]
     },
 
+    "permissions": [
+        "<all_urls>", "webRequest", "webRequestBlocking"
+    ],
+
     "author": "mossroy",
     "homepage_url": "http://www.kiwix.org",
     "offline_enabled": true

diff --git a/www/index.html b/www/index.html
@@ -230,13 +230,20 @@ <h3>Expert settings</h3>
                                                 <strong>ServiceWorker</strong> (faster but unstable, and not supported by all platforms)
                                             </label>
                                         </div>
+                                        <div class="radio">
+                                            <label>
+                                                <input type="radio" name="contentInjectionMode" value="webrequest" id="webrequestModeRadio">
+                                                <strong>WebRequest</strong> (faster but unstable, and not supported by all platforms)
+                                            </label>
+                                        </div>
                                     </div>
                                 </div>
                                 <div class="panel panel-info" id="apiStatusDiv">
                                     <div class="panel-heading">API Status</div>
                                     <div class="panel-body">
                                         <div id="serviceWorkerStatus"></div>
                                         <div id="messageChannelStatus"></div>
+                                        <div id="webRequestStatus"></div>
                                     </div>
                                 </div>
                             </div>

diff --git a/www/js/app.js b/www/js/app.js
@@ -222,10 +222,31 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
             $('#serviceWorkerStatus').removeClass("apiAvailable apiUnavailable")
                     .addClass("apiUnavailable");
         }
+        if (isWebRequestAvailable()) {
+            $('#webRequestStatus').html("WebRequest filterResponseData API available");
+            $('#webRequestStatus').removeClass("apiAvailable apiUnavailable")
+                    .addClass("apiAvailable");
+        } else {
+            $('#webRequestStatus').html("WebRequest filterResponseData API unavailable");
+            $('#webRequestStatus').removeClass("apiAvailable apiUnavailable")
+                    .addClass("apiUnavailable");
+        }
     }
 
     var contentInjectionMode;
 
+    // In order to work on both Firefox and Chromium/Chrome (and derivatives).
+    // browser and chrome variables expose almost the same APIs
+    var genericBrowser;
+    if (typeof browser !== 'undefined') {
+        // Firefox
+        genericBrowser = browser;
+    }
+    else {
+        // Chromium/Chrome
+        genericBrowser = chrome;
+    }
+
     /**
      * Sets the given injection mode.
      * This involves registering (or re-enabling) the Service Worker if necessary
@@ -289,6 +310,23 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
                 navigator.serviceWorker.controller.postMessage({'action': 'init'}, [messageChannel.port2]);
                 console.log("init message sent to ServiceWorker");
             }
+        } else if (value === 'webrequest') {
+            if (!isWebRequestAvailable()) {
+                alert("The WebRequest filterResponseData API is not available on your device. Falling back to JQuery mode");
+                setContentInjectionMode('jquery');
+                return;
+            }
+            // Find the current tab id
+            genericBrowser.tabs.getCurrent(function (tab) {
+                // Register the webRequest API
+                console.log("WebRequest Listener set for tab id " + tab.id);
+                genericBrowser.webRequest.onBeforeRequest.addListener(
+                    webRequestListener,
+                    {tabId: tab.id}
+                    ["blocking"]
+                );
+            });
+
         }
         $('input:radio[name=contentInjectionMode]').prop('checked', false);
         $('input:radio[name=contentInjectionMode]').filter('[value="' + value + '"]').prop('checked', true);
@@ -297,6 +335,28 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
         cookies.setItem('lastContentInjectionMode', value, Infinity);
     }
 
+    /**
+     * Listener triggered by the webRequest API
+     * @param details
+     */
+    function webRequestListener(details) {
+        console.log("webRequestListener triggered", details);
+        let filter = genericBrowser.webRequest.filterResponseData(details.requestId);
+        let decoder = new TextDecoder("utf-8");
+        let encoder = new TextEncoder();
+
+        filter.ondata = event => {
+            let str = decoder.decode(event.data, {stream: true});
+            // Just change any instance of Kiwix in the HTTP response
+            // to something else.
+            str = str.replace(/Kiwix/g, 'Kiwixzzz');
+            filter.write(encoder.encode(str));
+            filter.disconnect();
+        };
+
+        return {};
+    }
+
     /**
      * If the ServiceWorker mode is selected, warn the user before activating it
      * @param chosenContentInjectionMode The mode that the user has chosen
@@ -345,6 +405,28 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
         return ('serviceWorker' in navigator);
     }
 
+    /**
+     * Tells if the WebRequest API is available
+     * https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/webRequest
+     * @returns {Boolean}
+     */
+    function isWebRequestAvailable() {
+        try {
+            if (genericBrowser) {
+                var webRequest = genericBrowser.webRequest;
+                return (webRequest.filterResponseData);
+            }
+            else {
+                return false;
+            }
+        }
+        catch (e){
+            return false;
+        }
+        return false;
+    }
+
+
     /**
      * Tells if the MessageChannel API is available
      * https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel