Migrate the content script logic to mithril

background/background.js

@@ -47,7 +47,7 @@ chrome.extension.onMessage.addListener((req, sender, sendResponse) => {
   }
   else if (req.message === 'raw') {
     chrome.storage.sync.set({raw: req.raw}, sendResponse)
-    sendMessage({message: 'raw', raw: req.raw, theme: req.theme})
+    sendMessage({message: 'raw', raw: req.raw})
   }
 
   return true

content/content.js

@@ -1,60 +1,85 @@
 
-function injectCSS (url) {
-  var link = document.createElement('link')
-  link.rel = 'stylesheet'
-  link.type = 'text/css'
-  link.href = url
-  link.id = 'theme'
-  document.head.appendChild(link)
-}
-
-$(function () {
-  $('body').addClass('markdown-body') // github
-  $('pre').attr('id', 'markdown').hide()
-
-  chrome.extension.sendMessage({
-    message: 'markdown',
-    markdown: $('#markdown').text()
-  }, (res) => {
-    $('body').append('<div id="html">').find('#html').append(res.marked)
-    Prism.highlightAll()
-  })
+window.addEventListener('DOMContentLoaded', () => {
+  document.querySelector('body').classList.add('markdown-body') // github
 
-  chrome.extension.sendMessage({message: 'settings'}, (data) => {
-    if (!data.raw) {
-      injectCSS(chrome.extension.getURL('/themes/' + data.theme + '.css'))
-    }
-    $('#markdown')[data.raw ? 'show' : 'hide']()
-    $('#html')[data.raw ? 'hide' : 'show']()
-  })
+  m.mount(document.querySelector('body'), {
+    controller: function () {
+      var state = {
+        theme: '',
+        html: '',
+        markdown: document.querySelector('pre').innerText,
+        raw: false,
+        getURL: () => chrome.extension.getURL('/themes/' + state.theme + '.css')
+      }
 
-  $(window).on('load', () => {
-    setTimeout(() => {
-      var timeout = null
-      $(window).on('scroll', () => {
-        clearTimeout(timeout)
-        timeout = setTimeout(() => {
-          localStorage.setItem('scrolltop', $(window).scrollTop())
-        }, 100)
+      setTimeout(() => {
+        chrome.extension.sendMessage({message: 'settings'}, (data) => {
+          state.theme = data.theme
+          state.raw = data.raw
+          m.redraw()
+
+          setTimeout(() => {
+            chrome.extension.sendMessage({
+              message: 'markdown',
+              markdown: state.markdown
+            }, (res) => {
+              state.html = res.marked
+              m.redraw()
+            })
+          }, 0)
+        })
+      }, 0)
+
+      chrome.extension.onMessage.addListener((req, sender, sendResponse) => {
+        if (req.message === 'reload') {
+          window.location.reload(true)
+        }
+        else if (req.message === 'theme') {
+          state.theme = req.theme
+          m.redraw()
+        }
+        else if (req.message === 'raw') {
+          state.raw = req.raw
+          m.redraw()
+        }
       })
 
-      $(window).scrollTop(localStorage.getItem('scrolltop'))
-    }, 100)
+      return {
+        state: state,
+        config: (element, initialized, context) => {
+          if (!initialized) {
+            Prism.highlightAll()
+          }
+        }
+      }
+    },
+    view: (ctrl) => {
+      var state = ctrl.state
+      var dom = []
+
+      if (state.raw) {
+        dom.push(m('pre#markdown', state.markdown))
+      }
+      if (state.theme && !state.raw) {
+        dom.push(m('link#theme [rel="stylesheet"] [type="text/css"]',
+          {href: state.getURL()}))
+      }
+      if (state.html && !state.raw) {
+        dom.push(m('#html', {config: ctrl.config}, m.trust(state.html)))
+      }
+
+      return (dom.length ? dom : m('div'))
+    }
   })
 })
 
-chrome.extension.onMessage.addListener((req, sender, sendResponse) => {
-  if (req.message === 'reload') {
-    window.location.reload(true)
-  }
-  else if (req.message === 'theme') {
-    $('#theme').remove()
-    injectCSS(chrome.extension.getURL('/themes/' + req.theme + '.css'))
-  }
-  else if (req.message === 'raw') {
-    req.raw
-      ? $('#theme').remove()
-      : injectCSS(chrome.extension.getURL('/themes/' + req.theme + '.css'))
-    $('#markdown, #html').toggle()
-  }
-})
+window.addEventListener('load', () => setTimeout(() => {
+  var timeout = null
+  window.addEventListener('scroll', () => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      localStorage.setItem('scrolltop', document.body.scrollTop)
+    }, 100)
+  })
+  document.body.scrollTop = parseInt(localStorage.getItem('scrolltop'))
+}, 100))

manifest.json

@@ -53,7 +53,7 @@
         "/css/prism.css"
       ],
       "js": [
-        "/vendor/jquery-2.2.0.min.js",
+        "/vendor/mithril.min.js",
         "/vendor/prism.js",
         "/content/content.js"
       ],