Implement origin management

background/background.js

@@ -1,18 +1,15 @@
 
 // chrome.storage.sync.clear()
+// chrome.permissions.getAll((p) => chrome.permissions.remove({origins: p.origins}))
+
 chrome.storage.sync.get((sync) => {
-  if (!sync.options) {
-    chrome.storage.sync.set({options: md.defaults})
-  }
-  if (!sync.theme) {
-    chrome.storage.sync.set({theme: 'github'})
-  }
-  if (sync.raw === undefined) {
-    chrome.storage.sync.set({raw: false})
-  }
-  if (!sync.path) {
-    chrome.storage.sync.set({path:
-      '.*\\/.*\\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*)?$'
+  if (!Object.keys(sync).length) {
+    chrome.storage.sync.set({
+      options: md.defaults,
+      theme: 'github',
+      raw: false,
+      match: '.*\\/.*\\.(?:markdown|mdown|mkdn|md|mkd|mdwn|mdtxt|mdtext|text)(?:#.*)?$',
+      origins: {}
     })
   }
 })
@@ -20,14 +17,15 @@ chrome.storage.sync.get((sync) => {
 chrome.tabs.onUpdated.addListener((id, info, tab) => {
   if (info.status === 'loading') {
     chrome.tabs.executeScript(id, {
-      code: 'document.querySelector("pre").style.display = "none";location.href',
+      code: 'document.querySelector("pre").style.display = "none";JSON.stringify(location)',
       runAt: 'document_start'
-    }, (href) => {
+    }, (location) => {
       if (chrome.runtime.lastError) {
         return
       }
-      chrome.storage.sync.get('path', (res) => {
-        if (new RegExp(res.path).test(href)) {
+      location = JSON.parse(location)
+      chrome.storage.sync.get('origins', (res) => {
+        if (new RegExp(res.origins[location.origin]).test(location.href)) {
           chrome.tabs.insertCSS(id, {file: 'css/content.css', runAt: 'document_start'})
           chrome.tabs.insertCSS(id, {file: 'vendor/prism.css', runAt: 'document_start'})
           chrome.tabs.executeScript(id, {file: 'vendor/mithril.min.js', runAt: 'document_start'})
@@ -50,9 +48,12 @@ chrome.extension.onMessage.addListener((req, sender, sendResponse) => {
     md.compile(req.markdown, sendResponse)
   }
   else if (req.message === 'settings') {
-    chrome.storage.sync.get(['options', 'theme', 'raw'], (data) => {
-      delete data.options.langPrefix
-      sendResponse(data)
+    chrome.storage.sync.get(['options', 'theme', 'raw'], (res) => {
+      delete res.options.langPrefix
+      sendResponse(res)
+    })
+    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
+      chrome.pageAction.show(tabs[0].id)
     })
   }
   else if (req.message === 'options') {
@@ -61,9 +62,8 @@ chrome.extension.onMessage.addListener((req, sender, sendResponse) => {
     sendMessage({message: 'reload'})
   }
   else if (req.message === 'defaults') {
-    chrome.storage.sync.set({options: md.defaults}, sendResponse)
-    chrome.storage.sync.set({theme: 'github'})
-    chrome.storage.sync.set({raw: false})
+    chrome.storage.sync.set(
+      {options: md.defaults, theme: 'github', raw: false}, sendResponse)
     sendMessage({message: 'reload'})
   }
   else if (req.message === 'theme') {
@@ -79,12 +79,32 @@ chrome.extension.onMessage.addListener((req, sender, sendResponse) => {
       chrome.tabs.create({url: extension.optionsUrl}, sendResponse)
     })
   }
-
+  else if (req.message === 'origins') {
+    chrome.storage.sync.get('origins', sendResponse)
+  }
+  else if (req.message === 'add') {
+    chrome.storage.sync.get(['match', 'origins'], (res) => {
+      res.origins[req.origin] = res.match
+      chrome.storage.sync.set({origins: res.origins}, sendResponse)
+    })
+  }
+  else if (req.message === 'remove') {
+    chrome.storage.sync.get('origins', (res) => {
+      delete res.origins[req.origin]
+      chrome.storage.sync.set({origins: res.origins}, sendResponse)
+    })
+  }
+  else if (req.message === 'update') {
+    chrome.storage.sync.get('origins', (res) => {
+      res.origins[req.origin] = req.match
+      chrome.storage.sync.set({origins: res.origins}, sendResponse)
+    })
+  }
   return true
 })
 
-function sendMessage (obj) {
+function sendMessage (req) {
   chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
-    chrome.tabs.sendMessage(tabs[0].id, obj)
+    chrome.tabs.sendMessage(tabs[0].id, req)
   })
 }

content/options.js

@@ -1,65 +1,99 @@
 
 var state = {
-  origins: []
+  origin: '',
+  origins: {},
+  timeout: null
 }
 
 var events = {
   add: () => {
-    chrome.permissions.request({
-      origins: [document.querySelector('input').value]
-    }, (granted) => {
+    var origin = state.origin.replace(/\/$/, '')
+    chrome.permissions.request({origins: [origin + '/*']}, (granted) => {
       if (granted) {
-        get()
-        document.querySelector('input').value = ''
+        chrome.extension.sendMessage({message: 'add', origin}, (res) => {
+          state.origin = ''
+          get()
+        })
       }
     })
   },
 
   remove: (origin) => () => {
-    chrome.permissions.remove({
-      origins: [origin]
-    }, (removed) => {
+    chrome.permissions.remove({origins: [origin + '/*']}, (removed) => {
       if (removed) {
-        var index = state.origins.indexOf(origin)
-        state.origins.splice(index, 1)
-        m.redraw()
+        chrome.extension.sendMessage({message: 'remove', origin}, (res) => {
+          get()
+        })
       }
     })
+  },
+
+  update: (origin) => (e) => {
+    state.origins[origin] = e.target.value
+    clearTimeout(state.timeout)
+    state.timeout = setTimeout(() => {
+      chrome.extension.sendMessage({
+        message: 'update', origin, match: e.target.value
+      }, (res) => {})
+    }, 750)
+  },
+
+  origin: (e) => {
+    state.origin = e.target.value
   }
 }
 
 function get () {
-  chrome.permissions.getAll((res) => {
+  chrome.extension.sendMessage({message: 'origins'}, (res) => {
     state.origins = res.origins
     m.redraw()
   })
 }
 
+get()
+
 function oncreate (vnode) {
   componentHandler.upgradeElements(vnode.dom)
 }
 
-get()
-
 m.mount(document.querySelector('main'), {
   view: () =>
     m('.mdl-grid', [
       m('.mdl-cell mdl-cell--8-col-tablet mdl-cell--12-col-desktop', [
         m('h4', 'Add New Origin'),
-        m('form', [
-          m('input[placeholder="https://raw.githubusercontent.com"]'),
-          m('button[type=button].mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
-            {oncreate, onclick: events.add},
-            'Add')
-        ])
       ]),
       m('.mdl-cell mdl-cell--8-col-tablet mdl-cell--12-col-desktop', [
-        m('h4', 'Allowed Origins'),
+        m('.mdl-textfield mdl-js-textfield', {oncreate}, [
+          m('input.mdl-textfield__input', {
+            value: state.origin,
+            onchange: events.origin,
+            placeholder: 'https://raw.githubusercontent.com'
+          }),
+          m('label.mdl-textfield__label')
+        ]),
+        m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
+          {oncreate, onclick: events.add},
+          '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',
-          state.origins.map((origin) =>
+          Object.keys(state.origins).map((origin) =>
           m('tr', [
             m('td.mdl-data-table__cell--non-numeric', origin),
             m('td.mdl-data-table__cell--non-numeric',
+              m('.mdl-textfield mdl-js-textfield', {oncreate}, [
+                m('input.mdl-textfield__input',
+                  {onkeyup: events.update(origin), value: state.origins[origin]}),
+                m('label.mdl-textfield__label')
+              ])
+            ),
+            m('td',
               m('button.mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon',
                 {oncreate, onclick: events.remove(origin), title: 'Remove'},
                 m('i.material-icons icon-remove')
@@ -67,6 +101,6 @@ m.mount(document.querySelector('main'), {
             )
           ])
         ))
-      ])
+      )
     ])
 })

css/options.css

@@ -32,21 +32,40 @@ footer, #footer-push {
 .mdl-mega-footer__bottom-section { padding: 0; }
 .mdl-mega-footer__link-list { display: flex; justify-content: center; margin: 0 auto; }
 .mdl-mega-footer__link-list li:last-child { margin: 0; }
+.mdl-mega-footer__link-list li:nth-of-type(1) a:before { font-size: 17px; }
+.mdl-mega-footer__link-list li:nth-of-type(2) a { position: relative; top: -2px; }
+.mdl-mega-footer__link-list li:nth-of-type(2) a:before {
+  font-size: 20px; position: relative; top: 1px;
+}
+
+/*form*/
+.mdl-js-textfield:nth-of-type(1) {
+  width: 400px;
+  position: relative; top: 5px;
+  padding: 0;
+  margin: 0 10px 0 0;
+}
+.mdl-textfield:nth-of-type(1) .mdl-textfield__label:after { bottom: 0; }
 
 /*table*/
+.mdl-data-table {
+  width: 100%;
+}
 .mdl-data-table tr {
   transition-duration: .28s;
   transition-timing-function: cubic-bezier(.4,0,.2,1);
   transition-property: background-color;
 }
 .mdl-data-table tr:hover { background: #eee; }
-.mdl-data-table td { font-size: 14px; line-height: 17px; }
+.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 i { font-size: 10px; }
-
-/*form*/
-form input {
-  font-size: 14px; line-height: 30px;
-  width: 300px;
-  padding: 0 10px; margin: 0 15px 0 0;
-  position: relative; top: 2px;
+.mdl-data-table .mdl-textfield {
+  width: 100%; color: #a9a9a9;
+  position: relative; top: -1px;
+  padding: 0;
 }
+.mdl-data-table .mdl-textfield.is-focused { color: #272727; }
+.mdl-data-table .mdl-textfield__label:after { bottom: 0; }