Migrate to browser action

background/background.js

@@ -150,10 +150,6 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
         chrome.tabs.executeScript(id, {file: 'vendor/mithril.min.js', runAt: 'document_start'})
         chrome.tabs.executeScript(id, {file: 'vendor/prism.js', runAt: 'document_start'})
         chrome.tabs.executeScript(id, {file: 'content/content.js', runAt: 'document_start'})
-
-        chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
-          chrome.pageAction.show(tabs[0].id)
-        })
       }
     })
   }
@@ -163,6 +159,9 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
   if (req.message === 'markdown') {
     md[req.compiler].compile(req.markdown, sendResponse)
   }
+  else if (req.message === 'ping') {
+    sendMessage({message: 'ping'}, sendResponse)
+  }
   else if (req.message === 'settings') {
     chrome.storage.sync.get((res) => {
       sendResponse({
@@ -225,8 +224,8 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
   return true
 })
 
-function sendMessage (req) {
+function sendMessage (req, res) {
   chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
-    chrome.tabs.sendMessage(tabs[0].id, req)
+    chrome.tabs.sendMessage(tabs[0].id, req, res)
   })
 }

content/content.js

@@ -23,6 +23,9 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
     state.raw = req.raw
     m.redraw()
   }
+  else if (req.message === 'ping') {
+    sendResponse({message: 'pong'})
+  }
 })
 
 var oncreate = {

content/popup-help.js

@@ -0,0 +1,20 @@
+
+var events = {
+  advanced: () => {
+    chrome.runtime.sendMessage({message: 'advanced'})
+  }
+}
+
+function oncreate (vnode) {
+  componentHandler.upgradeElements(vnode.dom)
+}
+
+m.mount(document.querySelector('body'), {
+  view: () =>
+    m('#popup',
+      // advanced options
+      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
+        {oncreate, onclick: events.advanced},
+        'Advanced Options')
+    )
+})

content/popup-options.js

@@ -0,0 +1,192 @@
+
+var state = {
+  compiler: '',
+  options: {},
+  content: {},
+  theme: '',
+  themes: [],
+  raw: false,
+  tab: '',
+  tabs: ['theme', 'compiler', 'content'],
+  compilers: {},
+  description: {
+    scroll: 'Remember scroll position',
+    toc: 'Generate Table of Contents'
+  }
+}
+
+var events = {
+  tab: (e) => {
+    state.tab = e.target.parentNode.hash.replace('#tab-', '')
+    localStorage.setItem('tab', state.tab)
+  },
+
+  compiler: {
+    name: (e) => {
+      state.compiler = Object.keys(state.compilers)[e.target.selectedIndex]
+      chrome.runtime.sendMessage({
+        message: 'compiler.name',
+        compiler: state.compiler
+      }, () => {
+        chrome.runtime.sendMessage({message: 'settings'}, init)
+      })
+    },
+    options: (e) => {
+      state.options[e.target.name] = !state.options[e.target.name]
+      chrome.runtime.sendMessage({
+        message: 'compiler.options',
+        compiler: state.compiler,
+        options: state.options
+      })
+    }
+  },
+
+  content: (e) => {
+    state.content[e.target.name] = !state.content[e.target.name]
+    chrome.runtime.sendMessage({
+      message: 'content',
+      content: state.content
+    })
+  },
+
+  theme: (e) => {
+    state.theme = state.themes[e.target.selectedIndex]
+    chrome.runtime.sendMessage({
+      message: 'theme',
+      theme: state.theme
+    })
+  },
+
+  raw: () => {
+    state.raw = !state.raw
+    chrome.runtime.sendMessage({
+      message: 'raw',
+      raw: state.raw
+    })
+  },
+
+  defaults: () => {
+    chrome.runtime.sendMessage({
+      message: 'defaults'
+    }, () => {
+      chrome.runtime.sendMessage({message: 'settings'}, init)
+      localStorage.removeItem('tab')
+    })
+  },
+
+  advanced: () => {
+    chrome.runtime.sendMessage({message: 'advanced'})
+  }
+}
+
+function init (res) {
+  state.compiler = res.compiler
+  state.options = res.options
+  state.content = res.content
+  state.theme = res.theme
+
+  state.themes = chrome.runtime.getManifest().web_accessible_resources
+    .filter((file) => (file.indexOf('/themes/') === 0))
+    .map((file) => (file.replace(/\/themes\/(.*)\.css/, '$1')))
+
+  state.raw = res.raw
+  state.tab = localStorage.getItem('tab') || 'theme'
+  state.compilers = res.compilers
+
+  m.redraw()
+}
+
+chrome.runtime.sendMessage({message: 'settings'}, init)
+
+function oncreate (vnode) {
+  componentHandler.upgradeElements(vnode.dom)
+}
+var onupdate = (tab, key) => (vnode) => {
+  var value = tab === 'compiler' ? state.options[key]
+    : tab === 'content' ? state.content[key]
+    : null
+
+  if (vnode.dom.classList.contains('is-checked') !== value) {
+    vnode.dom.classList.toggle('is-checked')
+  }
+}
+
+m.mount(document.querySelector('body'), {
+  view: (vnode) =>
+    m('#popup',
+      // defaults
+      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
+        {oncreate, onclick: events.raw},
+        (state.raw ? 'Html' : 'Markdown')),
+      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
+        {oncreate, onclick: events.defaults},
+        'Defaults'),
+
+      // tabs
+      m('.mdl-tabs mdl-js-tabs mdl-js-ripple-effect', {oncreate},
+        m('.mdl-tabs__tab-bar', {onclick: events.tab}, state.tabs.map((tab) =>
+          m('a.mdl-tabs__tab', {
+            href: '#tab-' + tab,
+            class: state.tab === tab ? 'is-active' : undefined
+          }, tab))
+        ),
+
+        // theme
+        m('.mdl-tabs__panel #tab-theme', {class: state.tab === 'theme' ? 'is-active' : undefined},
+          m('select.mdl-shadow--2dp', {onchange: events.theme}, state.themes.map((theme) =>
+            m('option', {selected: state.theme === theme}, theme)
+          ))
+        ),
+
+        // compiler
+        m('.mdl-tabs__panel #tab-compiler', {class: state.tab === 'compiler' ? 'is-active' : undefined},
+          m('select.mdl-shadow--2dp', {onchange: events.compiler.name}, Object.keys(state.compilers).map((name) =>
+            m('option', {selected: state.compiler === name}, name)
+          )),
+          m('.scroll', {class: Object.keys(state.options).length > 8 ? 'max' : undefined},
+            m('.mdl-grid', Object.keys(state.options || [])
+              .filter((key) => typeof state.options[key] === 'boolean')
+              .map((key) =>
+              m('.mdl-cell',
+                m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
+                  {oncreate, onupdate: onupdate('compiler', key),
+                  title: state.compilers[state.compiler].description[key]},
+                  m('input[type="checkbox"].mdl-switch__input', {
+                    name: key,
+                    checked: state.options[key],
+                    onchange: events.compiler.options
+                  }),
+                  m('span.mdl-switch__label', key)
+                )
+              ))
+            )
+          )
+        ),
+
+        // content
+        m('.mdl-tabs__panel #tab-content',
+          {class: state.tab === 'content' ? 'is-active' : undefined},
+          m('.scroll',
+            m('.mdl-grid', Object.keys(state.content).map((key) =>
+              m('.mdl-cell',
+                m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
+                  {oncreate, onupdate: onupdate('content', key), title: state.description[key]},
+                  m('input[type="checkbox"].mdl-switch__input', {
+                    name: key,
+                    checked: state.content[key],
+                    onchange: events.content
+                  }),
+                  m('span.mdl-switch__label', key)
+                )
+              )
+            ))
+          )
+        )
+      ),
+
+      // advanced options
+      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
+        {oncreate, onclick: events.advanced},
+        'Advanced Options')
+    )
+})

content/popup.js

@@ -1,192 +1,17 @@
 
-var state = {
-  compiler: '',
-  options: {},
-  content: {},
-  theme: '',
-  themes: [],
-  raw: false,
-  tab: '',
-  tabs: ['theme', 'compiler', 'content'],
-  compilers: {},
-  description: {
-    scroll: 'Remember scroll position',
-    toc: 'Generate Table of Contents'
-  }
+function load (path) {
+  var script = document.createElement('script')
+  script.type = 'text/javascript'
+  script.charset = 'utf-8'
+  script.src = path
+  document.body.appendChild(script)
 }
 
-var events = {
-  tab: (e) => {
-    state.tab = e.target.parentNode.hash.replace('#tab-', '')
-    localStorage.setItem('tab', state.tab)
-  },
-
-  compiler: {
-    name: (e) => {
-      state.compiler = Object.keys(state.compilers)[e.target.selectedIndex]
-      chrome.runtime.sendMessage({
-        message: 'compiler.name',
-        compiler: state.compiler
-      }, () => {
-        chrome.runtime.sendMessage({message: 'settings'}, init)
-      })
-    },
-    options: (e) => {
-      state.options[e.target.name] = !state.options[e.target.name]
-      chrome.runtime.sendMessage({
-        message: 'compiler.options',
-        compiler: state.compiler,
-        options: state.options
-      })
-    }
-  },
-
-  content: (e) => {
-    state.content[e.target.name] = !state.content[e.target.name]
-    chrome.runtime.sendMessage({
-      message: 'content',
-      content: state.content
-    })
-  },
-
-  theme: (e) => {
-    state.theme = state.themes[e.target.selectedIndex]
-    chrome.runtime.sendMessage({
-      message: 'theme',
-      theme: state.theme
-    })
-  },
-
-  raw: () => {
-    state.raw = !state.raw
-    chrome.runtime.sendMessage({
-      message: 'raw',
-      raw: state.raw
-    })
-  },
-
-  defaults: () => {
-    chrome.runtime.sendMessage({
-      message: 'defaults'
-    }, () => {
-      chrome.runtime.sendMessage({message: 'settings'}, init)
-      localStorage.removeItem('tab')
-    })
-  },
-
-  advanced: () => {
-    chrome.runtime.sendMessage({message: 'advanced'})
+chrome.runtime.sendMessage({message: 'ping'}, (res) => {
+  if (res && res.message === 'pong') {
+    load('/content/popup-options.js')
   }
-}
-
-function init (res) {
-  state.compiler = res.compiler
-  state.options = res.options
-  state.content = res.content
-  state.theme = res.theme
-
-  state.themes = chrome.runtime.getManifest().web_accessible_resources
-    .filter((file) => (file.indexOf('/themes/') === 0))
-    .map((file) => (file.replace(/\/themes\/(.*)\.css/, '$1')))
-
-  state.raw = res.raw
-  state.tab = localStorage.getItem('tab') || 'theme'
-  state.compilers = res.compilers
-
-  m.redraw()
-}
-
-chrome.runtime.sendMessage({message: 'settings'}, init)
-
-function oncreate (vnode) {
-  componentHandler.upgradeElements(vnode.dom)
-}
-var onupdate = (tab, key) => (vnode) => {
-  var value = tab === 'compiler' ? state.options[key]
-    : tab === 'content' ? state.content[key]
-    : null
-
-  if (vnode.dom.classList.contains('is-checked') !== value) {
-    vnode.dom.classList.toggle('is-checked')
+  else {
+    load('/content/popup-help.js')
   }
-}
-
-m.mount(document.querySelector('body'), {
-  view: (vnode) =>
-    m('#popup',
-      // defaults
-      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
-        {oncreate, onclick: events.raw},
-        (state.raw ? 'Html' : 'Markdown')),
-      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
-        {oncreate, onclick: events.defaults},
-        'Defaults'),
-
-      // tabs
-      m('.mdl-tabs mdl-js-tabs mdl-js-ripple-effect', {oncreate},
-        m('.mdl-tabs__tab-bar', {onclick: events.tab}, state.tabs.map((tab) =>
-          m('a.mdl-tabs__tab', {
-            href: '#tab-' + tab,
-            class: state.tab === tab ? 'is-active' : undefined
-          }, tab))
-        ),
-
-        // theme
-        m('.mdl-tabs__panel #tab-theme', {class: state.tab === 'theme' ? 'is-active' : undefined},
-          m('select.mdl-shadow--2dp', {onchange: events.theme}, state.themes.map((theme) =>
-            m('option', {selected: state.theme === theme}, theme)
-          ))
-        ),
-
-        // compiler
-        m('.mdl-tabs__panel #tab-compiler', {class: state.tab === 'compiler' ? 'is-active' : undefined},
-          m('select.mdl-shadow--2dp', {onchange: events.compiler.name}, Object.keys(state.compilers).map((name) =>
-            m('option', {selected: state.compiler === name}, name)
-          )),
-          m('.scroll', {class: Object.keys(state.options).length > 8 ? 'max' : undefined},
-            m('.mdl-grid', Object.keys(state.options || [])
-              .filter((key) => typeof state.options[key] === 'boolean')
-              .map((key) =>
-              m('.mdl-cell',
-                m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
-                  {oncreate, onupdate: onupdate('compiler', key),
-                  title: state.compilers[state.compiler].description[key]},
-                  m('input[type="checkbox"].mdl-switch__input', {
-                    name: key,
-                    checked: state.options[key],
-                    onchange: events.compiler.options
-                  }),
-                  m('span.mdl-switch__label', key)
-                )
-              ))
-            )
-          )
-        ),
-
-        // content
-        m('.mdl-tabs__panel #tab-content',
-          {class: state.tab === 'content' ? 'is-active' : undefined},
-          m('.scroll',
-            m('.mdl-grid', Object.keys(state.content).map((key) =>
-              m('.mdl-cell',
-                m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
-                  {oncreate, onupdate: onupdate('content', key), title: state.description[key]},
-                  m('input[type="checkbox"].mdl-switch__input', {
-                    name: key,
-                    checked: state.content[key],
-                    onchange: events.content
-                  }),
-                  m('span.mdl-switch__label', key)
-                )
-              )
-            ))
-          )
-        )
-      ),
-
-      // advanced options
-      m('button.mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect',
-        {oncreate, onclick: events.advanced},
-        'Advanced Options')
-    )
 })

manifest.json

@@ -4,7 +4,7 @@
   "version"         : "2.9",
   "description"     : "Markdown Viewer",
 
-  "page_action": {
+  "browser_action": {
     "default_icon": {
       "19" : "/images/icon19.png",
       "38" : "/images/icon38.png"