Implement <iframe> redirect mechanism

Add "Redirect mechanism" <select> that replaces "always update tab" checkbox Deprecate 'always-tab-update' option, replace with 'redirectMechanism' Closes #122
jimschubert · Jun 27, 2016 · 317d46e · 317d46e
1 parent d329c2b
commit 317d46e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 23 deletions.
diff --git a/css/common.css b/css/common.css
@@ -34,6 +34,7 @@ padding:0;
 margin:0;
 min-height:200px;
 max-height:4000px;
+height:100%;
 }
 
 blockquote {
@@ -43,13 +44,18 @@ blockquote {
 }
 
 body {
-  min-width:560px;
   color: rgba(10,10,10,0.7);
   font-family: sans-serif;
   background-color: rgba(250,250,250,1);
   overflow-x:auto;
 }
 
+iframe {
+  border: 0;
+  width: 100%;
+  height: 100%;
+}
+
 h2 {
   font-size:1.2em;
   margin-bottom:3px;
@@ -433,4 +439,4 @@ span#app-prefs i {
 
 @media only screen and (max-width : 685px ) {
     div.bookmarks-container {margin-left:35px !important;}
-}
+}
diff --git a/js/background.js b/js/background.js
@@ -2,7 +2,7 @@
 'use strict';
 var slice = Array.prototype.slice;
 var manifest = chrome.runtime.getManifest();
-var allOptions = ["usingStorageApi", "url", "syncOptions", "lastInstall", "showWelcome", "upgrade_3.1", "always-tab-update"];
+var allOptions = ["usingStorageApi", "url", "syncOptions", "lastInstall", "showWelcome", "upgrade_3.1", "redirectMechanism", /*deprecated*/"always-tab-update"];
 
 function log(){
     var args = slice.call(arguments);

diff --git a/js/options_controller.js b/js/options_controller.js
@@ -16,11 +16,11 @@
                     .then(function (result) {
                         $scope.sync = result.syncOptions || result.syncOptions !== false;
 
-                        return Storage[$scope.sync ? 'getSync' : 'getLocal'](['url', 'always-tab-update']);
+                        return Storage[$scope.sync ? 'getSync' : 'getLocal'](['url', 'redirectMechanism', /*deprecated*/'always-tab-update']);
                     })
                     .then(function (result) {
                         $scope.url = result.url;
-                        $scope.alwaysTabUpdate = result['always-tab-update'];
+                        $scope.redirectMechanism = result.redirectMechanism || (result['always-tab-update'] ? 'update' : 'redirect');
                     });
             }
 
@@ -34,7 +34,7 @@
             $scope.save = function () {
                 var promise = Storage[$scope.sync ? 'saveSync' : 'saveLocal']({
                     'url': $scope.url,
-                    'always-tab-update': $scope.alwaysTabUpdate
+                    'redirectMechanism': $scope.redirectMechanism
                 });
                 promise.then(function () {
                     $scope.show_saved = true;
@@ -58,8 +58,8 @@
                 Storage.saveLocal({'syncOptions': selected});
             };
 
-            $scope.changeRedirect = function (selected) {
-                Storage.saveLocal({'always-tab-update': selected});
+            $scope.changeRedirect = function (redirectMechanism) {
+                Storage.saveLocal({'redirectMechanism': redirectMechanism});
             };
 
             $scope.getSyncedUrl = function () {
@@ -115,4 +115,4 @@
             getPermissions();
         }
     ]);
-})(angular);
+})(angular);
diff --git a/js/redirect.js b/js/redirect.js
@@ -2,22 +2,31 @@
 (function init(angular) {
     "use strict";
     try {
-        chrome.storage.local.get(["url", "tab.selected", "always-tab-update"], function (items) {
+        chrome.storage.local.get(["url", "tab.selected", "redirectMechanism", /*deprecated*/"always-tab-update"], function (items) {
             var url = items.url;
             if (url) {
                 url = (0 !== url.indexOf("about:") && 0 !== url.indexOf("data:") && -1 === url.indexOf("://")) ? ("http://" + url) : url;
-                if (/^http[s]?:/i.test(url) && items["always-tab-update"] !== true) {
-                    document.location.href = url;
-                } else {
-                    chrome.tabs.getCurrent(function (tab) {
-                        // a keen user may open the extension's background page and set:
-                        // chrome.storage.local.set({'tab.selected': false});
-                        var selected = items["tab.selected"] === undefined ? true : (items["tab.selected"] == "true");
-                        chrome.tabs.update(tab.id, {
-                            "url": url,
-                            "highlighted": selected
+                switch (items.redirectMechanism || (items["always-tab-update"] ? 'update' : 'redirect')) {
+                    case 'redirect':
+                        document.location.href = url;
+                        break;
+                    case 'update':
+                        chrome.tabs.getCurrent(function (tab) {
+                            // a keen user may open the extension's background page and set:
+                            // chrome.storage.local.set({'tab.selected': false});
+                            var selected = items["tab.selected"] === undefined ? true : (items["tab.selected"] == "true");
+                            chrome.tabs.update(tab.id, {
+                                "url": url,
+                                "highlighted": selected
+                            });
                         });
-                    });
+                        break;
+                    case 'iframe':
+                        var iframe = document.createElement('iframe');
+                        iframe.src = url;
+                        document.body.style.overflow = 'hidden';
+                        document.body.appendChild(iframe);
+                        break;
                 }
             } else {
                 angular.resumeBootstrap();

diff --git a/options.html b/options.html
@@ -34,7 +34,12 @@ <h2>Redirect URL</h2>
                     <button title="One-time get Synced URL" ng-click="getSyncedUrl()" class="fa fa-cloud-download"></button>
                     <p>
                         <label>
-                            <input type="checkbox" ng-model="alwaysTabUpdate" ng-change="changeRedirect(alwaysTabUpdate)"> Always update tab, not redirect. <small>(Enable for cursor in the address bar)</small>
+                            Redirect mechanism
+                            <select ng-model="redirectMechanism" ng-change="changeRedirect(redirectMechanism)">
+                                <option value="redirect" selected>Redirect. Default method</option>
+                                <option value="update">Update. Enables cursor in address bar, but may eat URL</option>
+                                <option value="iframe">&lt;iframe&gt;. Does not update address bar</option>
+                            </select>
                         </label>
                     </p>
                     <p>
@@ -203,4 +208,4 @@ <h2><span class="google-icon">Email</span></h2>
 <script type="text/javascript" src="js/services.js"></script>
 <script type="text/javascript" src="js/app.js"></script>
 </body>
-</html>
+</html>