Implement remember scroll position as option

background/background.js

@@ -111,7 +111,8 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
           code: [
             'document.querySelector("pre").style.visibility = "hidden"',
             'var theme = "' + res.theme + '"',
-            'var raw = ' + res.raw
+            'var raw = ' + res.raw,
+            'var content = ' + JSON.stringify(res.content)
           ].join(';'), runAt: 'document_start'})
 
         chrome.tabs.insertCSS(id, {file: 'css/content.css', runAt: 'document_start'})
@@ -144,9 +145,13 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
     chrome.storage.sync.set({compiler: req.compiler}, sendResponse)
     sendMessage({message: 'reload'})
   }
+  else if (req.message === 'content') {
+    chrome.storage.sync.set({content: req.content}, sendResponse)
+    sendMessage({message: 'reload'})
+  }
   else if (req.message === 'defaults') {
     chrome.storage.sync.set(
-      {compiler: md.defaults, theme: 'github', raw: false}, sendResponse)
+      {compiler: md.defaults, content: {toc: false, scroll: true}, theme: 'github', raw: false}, sendResponse)
     sendMessage({message: 'reload'})
   }
   else if (req.message === 'theme') {

content/content.js

@@ -6,6 +6,7 @@ var state = {
   html: '',
   markdown: '',
   raw: window['raw'] || false,
+  content: window['content'] || {},
   getURL: () => chrome.runtime.getURL('/themes/' + state.theme + '.css')
 }
 
@@ -25,10 +26,14 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
 
 var oncreate = {
   markdown: () => {
-    document.body.scrollTop = parseInt(localStorage.getItem('md-' + location.href))
+    if (state.content.scroll) {
+      document.body.scrollTop = parseInt(localStorage.getItem('md-' + location.href))
+    }
   },
   html: () => {
-    document.body.scrollTop = parseInt(localStorage.getItem('md-' + location.href))
+    if (state.content.scroll) {
+      document.body.scrollTop = parseInt(localStorage.getItem('md-' + location.href))
+    }
     setTimeout(() => Prism.highlightAll(), 20)
   }
 }
@@ -99,11 +104,15 @@ function scroll () {
 
 if (document.readyState === 'complete') {
   mount()
-  scroll()
+  if (state.content.scroll) {
+    scroll()
+  }
 }
 else {
   window.addEventListener('DOMContentLoaded', mount)
-  window.addEventListener('load', scroll)
+  if (state.content.scroll) {
+    window.addEventListener('load', scroll)
+  }
 }
 
 function updateStyles () {

content/popup.js

@@ -22,6 +22,14 @@ var events = {
     })
   },
 
+  changeContent: (e) => {
+    state.content[e.target.name] = !state.content[e.target.name]
+    chrome.runtime.sendMessage({
+      message: 'content',
+      content: state.content
+    })
+  },
+
   changeTheme: (e) => {
     state.theme = state.themes[e.target.selectedIndex]
     chrome.runtime.sendMessage({
@@ -84,8 +92,8 @@ function init (res) {
 function oncreate (vnode) {
   componentHandler.upgradeElements(vnode.dom)
 }
-var onupdate = (key) => (vnode) => {
-  if (vnode.dom.classList.contains('is-checked') !== state.compiler[key]) {
+var onupdate = (tab, key) => (vnode) => {
+  if (vnode.dom.classList.contains('is-checked') !== state[tab][key]) {
     vnode.dom.classList.toggle('is-checked')
   }
 }
@@ -125,7 +133,7 @@ m.mount(document.querySelector('body'), {
           m('.mdl-grid', Object.keys(state.compiler).map((key) =>
             m('.mdl-cell',
               m('label.mdl-switch mdl-js-switch mdl-js-ripple-effect',
-                {oncreate, onupdate: onupdate(key), title: description.compiler[key]}, [
+                {oncreate, onupdate: onupdate('compiler', key), title: description.compiler[key]}, [
                 m('input[type="checkbox"].mdl-switch__input', {
                   name: key,
                   checked: state.compiler[key],
@@ -141,7 +149,7 @@ m.mount(document.querySelector('body'), {
           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(key), title: description.content[key]}, [
+                {oncreate, onupdate: onupdate('content', key), title: description.content[key]}, [
                 m('input[type="checkbox"].mdl-switch__input', {
                   name: key,
                   checked: state.content[key],