Improve origin managing

background/background.js

@@ -103,10 +103,17 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
       if (err) {
         return
       }
-      if (!res.origins[res.location.origin]) { // v2.2 -> v2.3
+
+      var path =
+        res.origins[res.location.origin] ||
+        res.origins['*://' + res.location.host] ||
+        res.origins['*://*']
+
+      if (!path) { // v2.2 -> v2.3
         return
       }
-      if (!res.state && new RegExp(res.origins[res.location.origin]).test(res.location.href)) {
+
+      if (!res.state && new RegExp(path).test(res.location.href)) {
         chrome.tabs.executeScript(id, {
           code: [
             'document.querySelector("pre").style.visibility = "hidden"',

content/options.js

@@ -1,16 +1,27 @@
 
 var state = {
+  protocol: 'https',
+  protocols: ['https', 'http', '*'],
   origin: '',
   origins: {},
   timeout: null
 }
 
 var events = {
+  protocol: (e) => {
+    state.protocol = state.protocols[e.target.selectedIndex]
+  },
+
   add: () => {
-    if (!state.origin || /^file:/.test(state.origin)) {
+    var host = state.origin
+      .replace(/^(file|http(s)?):\/\//, '')
+      .replace(/\/.*$/, '')
+
+    if (!host) {
       return
     }
-    var origin = state.origin.replace(/\/$/, '')
+
+    var origin = state.protocol + '://' + host
     chrome.permissions.request({origins: [origin + '/*']}, (granted) => {
       if (granted) {
         chrome.runtime.sendMessage({message: 'add', origin}, (res) => {
@@ -70,11 +81,15 @@ m.mount(document.querySelector('main'), {
         m('h4', 'Add New Origin')
       ),
       m('.mdl-cell mdl-cell--8-col-tablet mdl-cell--12-col-desktop',
+        m('select.mdl-shadow--2dp', {onchange: events.protocol},
+          state.protocols.map((protocol) =>
+          m('option', {value: protocol}, protocol + '://')
+        )),
         m('.mdl-textfield mdl-js-textfield', {oncreate},
           m('input.mdl-textfield__input', {
             value: state.origin,
             onchange: events.origin,
-            placeholder: 'https://raw.githubusercontent.com'
+            placeholder: 'raw.githubusercontent.com'
           }),
           m('label.mdl-textfield__label')
         ),
@@ -83,16 +98,17 @@ m.mount(document.querySelector('main'), {
           'Add')
       ),
 
-      (Object.keys(state.origins).length || null) &&
       m('.mdl-cell mdl-cell--8-col-tablet mdl-cell--12-col-desktop',
         m('h4', 'Allowed Origins')
       ),
-      (Object.keys(state.origins).length || null) &&
       m('.mdl-cell mdl-cell--8-col-tablet mdl-cell--12-col-desktop',
         m('table.mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp',
           Object.keys(state.origins).sort().map((origin) =>
           m('tr',
-            m('td.mdl-data-table__cell--non-numeric', origin),
+            m('td.mdl-data-table__cell--non-numeric',
+              origin.replace(/^(\*|file|http(s)?).*/, '$1')),
+            m('td.mdl-data-table__cell--non-numeric',
+              origin.replace(/^(\*|file|http(s)?):\/\//, '')),
             m('td.mdl-data-table__cell--non-numeric',
               m('.mdl-textfield mdl-js-textfield', {oncreate},
                 m('input.mdl-textfield__input',

css/options.css

@@ -43,11 +43,20 @@ footer, #footer-push {
 
 
 /*form*/
+select {
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  font-size: 14px; line-height: 17px;
+  text-transform: uppercase;
+  background-color: #ececec;
+  border: none; border-radius: 2px;
+  cursor: pointer;
+  width: 110px; padding: 9px 12px;
+}
 .mdl-js-textfield:nth-of-type(1) {
   width: 400px;
   position: relative; top: 5px;
   padding: 0;
-  margin: 0 10px 0 0;
+  margin: 0 10px;
 }
 .mdl-textfield:nth-of-type(1) .mdl-textfield__label:after { bottom: 0; }
 
@@ -62,9 +71,10 @@ footer, #footer-push {
 }
 .mdl-data-table tr:hover { background: #eee; }
 .mdl-data-table td { font-size: 16px; line-height: 17px; }
-.mdl-data-table td:nth-of-type(1) { width: 20%; }
-.mdl-data-table td:nth-of-type(2) { width: 75%; }
-.mdl-data-table td:nth-of-type(3) { width: 5%; }
+.mdl-data-table td:nth-of-type(1) { width: 5%; }
+.mdl-data-table td:nth-of-type(2) { width: 20%; }
+.mdl-data-table td:nth-of-type(3) { width: 70%; }
+.mdl-data-table td:nth-of-type(4) { width: 5%; }
 .mdl-data-table i { font-size: 10px; }
 .mdl-data-table .mdl-textfield {
   width: 100%; color: #a9a9a9;

manifest.json

@@ -64,7 +64,8 @@
   ],
 
   "optional_permissions": [
+    "https://*/",
     "http://*/",
-    "https://*/"
+    "*://*/"
   ]
 }