Merge pull request #10 from imvladikon/migrate/v3

Migrate/v3

Author: imvladikon

Makefile

@@ -0,0 +1,50 @@
+# Build extension for Chrome Web Store
+zip:
+	zip -r jupyter-notebook-viewer.zip . \
+		-x "*.DS_Store" \
+		-x "node_modules/*" \
+		-x ".git/*" \
+		-x ".idea/*" \
+		-x "test/*" \
+		-x "*.test.json" \
+		-x "package-lock.json" \
+		-x ".gitignore" \
+		-x ".gitmodules" \
+		-x "Makefile" \
+		-x "debug-cli/*"
+
+# Clean build artifacts
+clean:
+	rm -f jupyter-notebook-viewer.zip
+	rm -rf node_modules/.cache
+
+# Install dependencies
+install:
+	npm install
+
+# Run tests
+test:
+	npm test
+
+# Build all components
+build: build-mdc build-prism build-remark build-themes
+
+build-mdc:
+	npm run build:mdc
+
+build-prism:
+	npm run build:prism
+
+build-remark:
+	npm run build:remark
+
+build-themes:
+	npm run build:themes
+
+# Development workflow
+dev: install build
+
+# Package for store submission
+package: clean build zip
+
+.PHONY: zip clean install test build build-mdc build-prism build-remark build-themes dev package

background/compilers/remark.js

@@ -16,18 +16,19 @@ md.compilers.remark = (() => {
   var ctor = ({storage: {state}}) => ({
     defaults,
     description,
-    compile: (markdown) =>
-      remark.unified()
-        .use(remark.parse)
-        .use(state.remark.gfm ? remark.gfm : undefined)
-        .use(state.remark.breaks ? remark.breaks : undefined)
-        .use(state.remark.footnotes ? remark.footnotes : undefined)
-        .use(remark.stringify)
-        .use(remark.slug)
-        .use(remark.frontmatter, ['yaml', 'toml'])
-        .use(remark.html, state.remark) // sanitize
-        .processSync(markdown)
-        .contents
+    compile: (markdown) => {
+      // Remark v15+ API - using unified processor
+      const processor = remark.unified()
+        .use(remark.remarkParse)
+        .use(state.remark.gfm ? remark.remarkGfm : undefined)
+        .use(state.remark.breaks ? remark.remarkBreaks : undefined)
+        .use(state.remark.footnotes ? remark.remarkFootnotes : undefined)
+        .use(remark.remarkSlug)
+        .use(remark.remarkFrontmatter, ['yaml', 'toml'])
+        .use(remark.remarkHtml, state.remark) // sanitize
+      
+      return processor.processSync(markdown).toString()
+    }
   })
 
   return Object.assign(ctor, {defaults, description})

background/detect.js

@@ -1,37 +1,41 @@
-md.detect = ({storage: {state}, inject}) => {
+// Clean detection implementation based on markdown-viewer patterns
+// Simplified detection logic with better error handling
 
+md.detect = ({storage: {state}, inject}) => {
+  
   var onwakeup = true
-
-  var code = `
-    JSON.stringify({
-      url: window.location.href,
-      header: document.contentType,
-      loaded: !!window.state,
-    })
-  `
-
+  
   var tab = (id, info, tab) => {
     if (info.status === 'loading') {
-      // try
-      chrome.tabs.executeScript(id, {code, runAt: 'document_start'}, (res) => {
+      
+      // Execute detection script
+      chrome.scripting.executeScript({
+        target: {tabId: id},
+        func: () => 
+          JSON.stringify({
+            url: window.location.href,
+            header: document.contentType,
+            loaded: !!window.state || !!window.args,
+          })
+      }, (res) => {
         if (chrome.runtime.lastError) {
-          // origin not allowed
+          // Origin not allowed or other error
           return
         }
-
+        
         try {
-          var win = JSON.parse(res)
+          var win = JSON.parse(res[0].result)
+          if (!win) return
         } catch (err) {
-          // JSON parse error
           return
         }
-
+        
         if (win.loaded) {
-          // anchor
-          return
+          // Already processed
+          return  
         }
-
-        if (header(win.header) || match(win.url)) {
+        
+        if (detect(win.header, win.url)) {
           if (onwakeup && chrome.webRequest) {
             onwakeup = false
             chrome.tabs.reload(id)
@@ -42,25 +46,30 @@ md.detect = ({storage: {state}, inject}) => {
       })
     }
   }
-
-  var header = (value) => {
-    return state.header && value && /text\/(?:x-)?markdown/i.test(value)
-  }
-
-  var match = (url) => {
+  
+  var detect = (content, url) => {
     var location = new URL(url)
-
-    var origin =
+    
+    // Check if URL ends with .ipynb
+    if (!location.pathname.endsWith('.ipynb')) {
+      return false
+    }
+    
+    // Find matching origin
+    var origin = 
       state.origins[location.origin] ||
       state.origins[location.protocol + '//' + location.hostname] ||
-      state.origins['*://' + location.host] ||
       state.origins['*://' + location.hostname] ||
+      state.origins['*://' + location.host] ||
       state.origins['*://*']
-
-    if (origin && origin.match && new RegExp(origin.match).test(location.href)) {
-      return origin
+    
+    // Default file:// support for .ipynb files
+    if (!origin && location.protocol === 'file:') {
+      origin = state.origins['file://'] || {match: state.match}
     }
+    
+    return origin && new RegExp(origin.match || state.match).test(url)
   }
-
-  return {tab, header, match}
-}
+  
+  return {tab}
+}

background/inject.js

@@ -1,42 +1,59 @@
+// Clean injection implementation based on markdown-viewer patterns
+// Conditional script injection and simplified logic
+
 md.inject = ({storage: {state}}) => (id) => {
+  
+  console.log('[Inject] Injecting into tab', id, 'with state:', {
+    theme: state.theme,
+    content: state.content
+  })
 
-  chrome.tabs.executeScript(id, {
-    code: `
+  chrome.scripting.executeScript({
+    target: {tabId: id},
+    args: [{
+      theme: state.theme,
+      raw: false, // Force false for notebook rendering
+      themes: state.themes,
+      content: state.content,
+      compiler: state.compiler,
+    }],
+    func: (_args) => {
       document.querySelector('pre').style.visibility = 'hidden'
-      var theme = ${JSON.stringify(state.theme)}
-      var raw = ${state.raw}
-      var themes = ${JSON.stringify(state.themes)}
-      var content = ${JSON.stringify(state.content)}
-      var compiler = '${state.compiler}'
-    `,
-    runAt: 'document_start'
+      window.args = _args
+    },
+    injectImmediately: true
   })
 
-  chrome.tabs.insertCSS(id, {file: 'content/index.css', runAt: 'document_start'})
-  chrome.tabs.insertCSS(id, {file: 'vendor/prism.min.css', runAt: 'document_start'})
-  chrome.tabs.insertCSS(id, {
-    file: 'https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css',
-    runAt: 'document_start'
+  var cssFiles = [
+    '/content/index.css',
+    '/vendor/prism.min.css',
+    '/vendor/katex.min.css',
+    state.theme && `/themes/${state.theme}.css`,
+  ].filter(Boolean)
+  
+  console.log('[Inject] Inserting CSS files:', cssFiles)
+  
+  chrome.scripting.insertCSS({
+    target: {tabId: id},
+    files: cssFiles
   })
 
-  chrome.tabs.executeScript(id, {file: 'vendor/mithril.min.js', runAt: 'document_start'})
-  chrome.tabs.executeScript(id, {file: 'vendor/es5-shim.min.js', runAt: 'document_start'})
-  chrome.tabs.executeScript(id, {file: 'vendor/marked.min.js', runAt: 'document_start'})
-  chrome.tabs.executeScript(id, {file: 'vendor/ansi_up.min.js', runAt: 'document_start'})
-  chrome.tabs.executeScript(id, {file: 'vendor/prism.min.js', runAt: 'document_start'})
-  chrome.tabs.executeScript(id, {
-    file: 'https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.js',
-    runAt: 'document_start'
+  chrome.scripting.executeScript({
+    target: {tabId: id},
+    files: [
+      '/vendor/mithril.min.js',
+      '/vendor/marked.min.js',
+      '/vendor/ansi_up.min.js',
+      '/vendor/katex.min.js',
+      '/vendor/katex-auto-render.min.js',
+      '/vendor/notebook.min.js',
+      state.content.syntax && '/vendor/prism.min.js',
+      state.content.emoji && '/content/emoji.js',
+      state.content.mathjax && ['/vendor/mathjax/tex-chtml.min.js', '/content/mathjax.js'],
+      '/content/index.js',
+      state.content.autoreload && '/content/autoreload.js',
+    ].filter(Boolean).flat(),
+    injectImmediately: true
   })
-  chrome.tabs.executeScript(id, {
-    file: 'https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/auto-render.min.js',
-    runAt: 'document_start'
-  })
-  chrome.tabs.executeScript(id, {file: 'vendor/notebook.min.js', runAt: 'document_start'})
-
 
-  if (state.content.emoji) {
-    chrome.tabs.executeScript(id, {file: 'content/emoji.js', runAt: 'document_start'})
-  }
-  chrome.tabs.executeScript(id, {file: 'content/index.js', runAt: 'document_start'})
-}
+}

background/messages.js

@@ -1,9 +1,23 @@
-md.messages = ({storage: {defaults, state, set}, compilers, mathjax, xhr, webrequest}) => {
+md.messages = ({storage, compilers, mathjax, xhr, webrequest}) => {
+  // Extract storage properties
+  const {defaults, state, set} = storage || {}
 
   return (req, sender, sendResponse) => {
 
     // content
-    if (req.message === 'markdown') {
+    if (req.message === 'ping') {
+      sendResponse({message: 'pong', status: 'ok', extension: 'Jupyter Notebook Viewer'})
+    } else if (req.message === 'get-config') {
+      sendResponse({
+        config: {
+          theme: state.theme,
+          raw: state.raw,
+          themes: state.themes,
+          content: state.content,
+          compiler: state.compiler
+        }
+      })
+    } else if (req.message === 'markdown') {
       var markdown = req.markdown
 
       if (state.content.mathjax) {
@@ -19,10 +33,18 @@ md.messages = ({storage: {defaults, state, set}, compilers, mathjax, xhr, webreq
 
       sendResponse({message: 'html', html})
     } else if (req.message === 'nbjson') {
+      console.log('[Messages] Processing nbjson request');
+      console.log('[Messages] Current compiler:', state.compiler);
+      console.log('[Messages] Available compilers:', compilers ? Object.keys(compilers) : 'none');
+      console.log('[Messages] Notebook cells:', req.nbjson && req.nbjson.cells ? req.nbjson.cells.length : 0);
 
       var nbjson = req.nbjson
       sendResponse({message: 'html', nbjson: nbjson})
 
+    } else if (req.message === 'mathjax') {
+      // MathJax extension loading removed - using minimal build
+      console.log('[Messages] MathJax extension request ignored (using minimal build)');
+      sendResponse();
     } else if (req.message === 'autoreload') {
       xhr.get(req.location, (err, body) => {
         sendResponse({err, body})
@@ -38,7 +60,9 @@ md.messages = ({storage: {defaults, state, set}, compilers, mathjax, xhr, webreq
         themes: state.themes,
       }))
     } else if (req.message === 'popup.theme') {
+      console.log('[Background] Theme change from popup:', req.theme)
       set({theme: req.theme})
+      console.log('[Background] Notifying content script of theme change')
       notifyContent({message: 'theme', theme: req.theme})
       sendResponse()
     } else if (req.message === 'popup.raw') {