Update dependencies

.github/workflows/main.yml

@@ -15,8 +15,8 @@ jobs:
         os:
           - ubuntu-latest
         node-version:
-          - 14.x
-          - 15.x
+          - 16
+          - 18
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v3
@@ -34,15 +34,16 @@ jobs:
       - name: Lint, build and test
         run: |
           npm run build
-          npm run lint:firefox
+          # Firefox does not support background.service_worker
+          #npm run lint:firefox
           npm t
   build-windows:
     runs-on: windows-latest
     strategy:
       matrix:
         node-version:
-          - 14.x
-          - 15.x
+          - 16
+          - 18
     steps:
       - uses: actions/checkout@v3
       - name: Set up Node ${{ matrix.node-version }}

app/js/background.js

@@ -4,14 +4,42 @@ const Settings = asciidoctor.browser.settings(webExtension, Constants)
 const Converter = asciidoctor.browser.converter(webExtension, Constants, Settings)
 
 // exports
-const { refreshOptions, enableDisableRender } = ((webExtension) => {
+;(async (webExtension) => {
   const matchesTabUrl = webExtension.runtime.getManifest().content_scripts[0].matches
   const renderSelectionMenuItemId = 'renderSelectionMenuItem'
 
   let injectTabId
   let injectText
 
-  const module = {}
+  const enableDisableRender = async function (enabled) {
+    // Save the status of the extension
+    webExtension.storage.local.set({ ENABLE_RENDER: enabled })
+
+    // Update the extension icon
+    const iconPrefix = enabled ? 'enabled' : 'disabled'
+    const iconPath = {
+      16: `/img/${iconPrefix}-16.png`,
+      32: `/img/${iconPrefix}-32.png`
+    }
+    if (typeof webExtension.action.setIcon === 'function') {
+      webExtension.action.setIcon({ path: iconPath })
+    } else if (typeof webExtension.action.setTitle === 'function') {
+      webExtension.action.setTitle({ title: `Asciidoctor.js Preview (${enabled ? '✔' : '✘'})` })
+    } else {
+      // eslint-disable-next-line no-console
+      console.log(`Asciidoctor.js Preview (${enabled ? 'enabled' : 'disabled'})`)
+    }
+
+    // Reload the active tab in the current windows that matches
+    findActiveTab((activeTab) => {
+      if (enabled) {
+        // opposite action, the extension was enabled, so we disable!
+        disableExtension(activeTab)
+      } else {
+        notifyTab(activeTab, 'extension-enabled')
+      }
+    })
+  }
 
   webExtension.runtime.onInstalled.addListener(() => {
     if (webExtension.contextMenus) {
@@ -38,7 +66,7 @@ const { refreshOptions, enableDisableRender } = ((webExtension) => {
             } else if (selectedTextPerFrame.length > 0 && typeof selectedTextPerFrame[0] === 'string') {
               injectText = selectedTextPerFrame[0]
               webExtension.tabs.create({
-                url: webExtension.extension.getURL('html/inject.html'),
+                url: webExtension.runtime.getURL('html/inject.html'),
                 active: true
               }, (tab) => {
                 injectTabId = tab.id
@@ -67,6 +95,37 @@ const { refreshOptions, enableDisableRender } = ((webExtension) => {
         .then(result => sendResponse(result))
         .catch((error) => sendResponse({ error: getErrorInfo(error) }))
       return true
+    } else if (request.action === 'refresh-options') {
+      webExtension.storage.local.set({
+        CUSTOM_ATTRIBUTES: localStorage.CUSTOM_ATTRIBUTES,
+        SAFE_MODE: localStorage.SAFE_MODE,
+        ALLOW_TXT_EXTENSION: localStorage.ALLOW_TXT_EXTENSION,
+        ENABLE_KROKI: localStorage.ENABLE_KROKI,
+        KROKI_SERVER_URL: localStorage.KROKI_SERVER_URL,
+        THEME: localStorage.THEME,
+        JS: localStorage.JS,
+        JS_LOAD: localStorage.JS_LOAD,
+        LOCAL_POLL_FREQUENCY: localStorage.LOCAL_POLL_FREQUENCY,
+        REMOTE_POLL_FREQUENCY: localStorage.REMOTE_POLL_FREQUENCY
+      })
+      const customThemeNames = JSON.parse(localStorage.CUSTOM_THEME_NAMES || '[]')
+      if (customThemeNames.length > 0) {
+        customThemeNames.forEach((themeName) => {
+          const themeNameKey = 'CUSTOM_THEME_' + themeName
+          const themeObj = {}
+          themeObj[themeNameKey] = localStorage[themeNameKey]
+          webExtension.storage.local.set(themeObj)
+        })
+      }
+      const customJavaScriptNames = JSON.parse(localStorage.CUSTOM_JS_NAMES || '[]')
+      if (customJavaScriptNames.length > 0) {
+        customJavaScriptNames.forEach((javaScriptName) => {
+          const javaScriptNameKey = 'CUSTOM_JS_' + javaScriptName
+          const javaScriptObj = {}
+          javaScriptObj[javaScriptNameKey] = localStorage[javaScriptNameKey]
+          webExtension.storage.local.set(javaScriptObj)
+        })
+      }
     }
     // send an empty response to avoid the pesky error "The message port closed before a response was received"
     sendResponse({})
@@ -112,80 +171,11 @@ const { refreshOptions, enableDisableRender } = ((webExtension) => {
     }
   }
 
-  let enableRender = true
-
-  module.enableDisableRender = () => {
-    // Save the status of the extension
-    webExtension.storage.local.set({ ENABLE_RENDER: enableRender })
-
-    // Update the extension icon
-    const iconPrefix = enableRender ? 'enabled' : 'disabled'
-    const iconPath = {
-      16: `img/${iconPrefix}-16.png`,
-      32: `img/${iconPrefix}-32.png`
-    }
-    if (typeof webExtension.browserAction.setIcon === 'function') {
-      webExtension.browserAction.setIcon({ path: iconPath })
-    } else if (typeof webExtension.browserAction.setTitle === 'function') {
-      webExtension.browserAction.setTitle({ title: `Asciidoctor.js Preview (${enableRender ? '✔' : '✘'})` })
-    } else {
-      // eslint-disable-next-line no-console
-      console.log(`Asciidoctor.js Preview (${enableRender ? 'enabled' : 'disabled'})`)
-    }
-
-    // Reload the active tab in the current windows that matches
-    findActiveTab((activeTab) => {
-      if (enableRender) {
-        // opposite action, the extension was enabled, so we disable!
-        disableExtension(activeTab)
-      } else {
-        notifyTab(activeTab, 'extension-enabled')
-      }
-    })
-
-    // Switch the flag
-    enableRender = !enableRender
-  }
-
-  module.refreshOptions = () => {
-    webExtension.storage.local.set({
-      CUSTOM_ATTRIBUTES: localStorage.CUSTOM_ATTRIBUTES,
-      SAFE_MODE: localStorage.SAFE_MODE,
-      ALLOW_TXT_EXTENSION: localStorage.ALLOW_TXT_EXTENSION,
-      ENABLE_KROKI: localStorage.ENABLE_KROKI,
-      KROKI_SERVER_URL: localStorage.KROKI_SERVER_URL,
-      THEME: localStorage.THEME,
-      JS: localStorage.JS,
-      JS_LOAD: localStorage.JS_LOAD,
-      LOCAL_POLL_FREQUENCY: localStorage.LOCAL_POLL_FREQUENCY,
-      REMOTE_POLL_FREQUENCY: localStorage.REMOTE_POLL_FREQUENCY
-    })
-    const customThemeNames = JSON.parse(localStorage.CUSTOM_THEME_NAMES || '[]')
-    if (customThemeNames.length > 0) {
-      customThemeNames.forEach((themeName) => {
-        const themeNameKey = 'CUSTOM_THEME_' + themeName
-        const themeObj = {}
-        themeObj[themeNameKey] = localStorage[themeNameKey]
-        webExtension.storage.local.set(themeObj)
-      })
-    }
-    const customJavaScriptNames = JSON.parse(localStorage.CUSTOM_JS_NAMES || '[]')
-    if (customJavaScriptNames.length > 0) {
-      customJavaScriptNames.forEach((javaScriptName) => {
-        const javaScriptNameKey = 'CUSTOM_JS_' + javaScriptName
-        const javaScriptObj = {}
-        javaScriptObj[javaScriptNameKey] = localStorage[javaScriptNameKey]
-        webExtension.storage.local.set(javaScriptObj)
-      })
-    }
-  }
-
-  webExtension.browserAction.onClicked.addListener(module.enableDisableRender)
+  webExtension.action.onClicked.addListener(async () => {
+    const { enableRender } = await webExtension.storage.local.get(['ENABLE_RENDER'])
+    await enableDisableRender(!enableRender)
+  })
 
-  return module
+  const { enableRender } = await webExtension.storage.local.get(['ENABLE_RENDER'])
+  await enableDisableRender(enableRender)
 })(webExtension)
-
-enableDisableRender()
-
-// eslint-disable-next-line no-unused-vars
-window.refreshOptions = refreshOptions

app/js/converter.js

@@ -1,4 +1,4 @@
-/* global md5, asciidoctor, XMLHttpRequest, Asciidoctor, AsciidoctorKroki */
+/* global fetch, md5, asciidoctor, Asciidoctor, XMLHttpRequest, AsciidoctorKroki */
 const processor = Asciidoctor({ runtime: { platform: 'browser' } })
 const eqnumValidValues = ['none', 'all', 'ams']
 
@@ -45,67 +45,40 @@ asciidoctor.browser.converter = (webExtension, Constants, Settings) => {
   }
 
   module.fetchAndConvert = async (url, initial) => {
-    const request = await module.executeRequest(url)
-    if (module.isHtmlContentType(request)) {
-      // content is not plain-text!
-      return undefined
-    }
-    if (request.status !== 200 && request.status !== 0) {
-      // unsuccessful request!
-      return undefined
-    }
-    const source = request.responseText
-    if (await Settings.isExtensionEnabled()) {
-      const md5key = 'md5' + url
-      if (!initial) {
-        const md5sum = await Settings.getSetting(md5key)
-        if (md5sum && md5sum === md5(source)) {
-          // content didn't change!
+    const response = await fetch(url)
+    if (response.status >= 200 && response.status < 400) {
+      const contentType = response.headers.get('Content-Type')
+      if (contentType) {
+        if (contentType.includes('html') || contentType.includes('json')) {
+          // content is not plain-text!
           return undefined
         }
-      }
-      // content has changed...
-      const result = await module.convert(url, source)
-      // Update md5sum
-      const value = {}
-      value[md5key] = md5(source)
-      webExtension.storage.local.set(value)
-      return result
-    }
-    return {
-      text: source
-    }
-  }
-
-  module.executeRequest = (url) => new Promise((resolve, reject) => {
-    try {
-      const request = new XMLHttpRequest()
-      if (request.overrideMimeType) {
-        request.overrideMimeType('text/plain;charset=utf-8')
-      }
-      request.onreadystatechange = (event) => {
-        if (request.readyState === XMLHttpRequest.DONE) {
-          resolve(request)
+        const source = await response.text()
+        if (await Settings.isExtensionEnabled()) {
+          const md5key = 'md5' + url
+          if (!initial) {
+            const md5sum = await Settings.getSetting(md5key)
+            if (md5sum && md5sum === md5(source)) {
+              // content didn't change!
+              return undefined
+            }
+          }
+          // content has changed...
+          const result = await module.convert(url, source)
+          // Update md5sum
+          const value = {}
+          value[md5key] = md5(source)
+          webExtension.storage.local.set(value)
+          return result
+        }
+        return {
+          text: source
         }
       }
-      // disable cache
-      request.open('GET', url, true)
-      request.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
-      request.send(null)
-    } catch (err) {
-      console.error(`Unable to GET ${url}`, err)
-      reject(err)
+    } else {
+      // unsuccessful request!
+      return undefined
     }
-  })
-
-  /**
-   * Is the content type html ?
-   * @param request The request
-   * @return true if the content type is html, false otherwise
-   */
-  module.isHtmlContentType = (request) => {
-    const contentType = request.getResponseHeader('Content-Type')
-    return contentType && (contentType.indexOf('html') > -1)
   }
 
   // REMIND: notitle attribute is automatically set when header_footer equals false.
@@ -249,7 +222,8 @@ asciidoctor.browser.converter = (webExtension, Constants, Settings) => {
           },
           add: (_) => {
             // no-op
-          }
+          },
+          dirname: () => ''
         }
       })
     }

app/js/module/dom.js

@@ -31,6 +31,7 @@ asciidoctor.browser.dom = (document) => {
    * @param stylesheetLinkElementAttributes
    */
   module.replaceStylesheetLinkElement = (parent, stylesheetLinkElementAttributes) => {
+    console.log('document', document)
     const element = document.getElementById(stylesheetLinkElementAttributes.id)
     if (element) {
       if (element.href === stylesheetLinkElementAttributes.href) {

app/js/module/theme.js

@@ -27,7 +27,7 @@ asciidoctor.browser.theme = (webExtension, Settings, Constants) => {
    * @returns {Array}
    */
   module.getDefaultThemeNames = () => {
-    const webAccessibleResources = webExtension.runtime.getManifest().web_accessible_resources
+    const webAccessibleResources = webExtension.runtime.getManifest().web_accessible_resources[0].resources
     const themeRegexp = /^css\/themes\/(.*)\.css$/i
     return webAccessibleResources
       .filter(item => themeRegexp.test(item))

app/js/options.js

@@ -58,17 +58,23 @@ const webExtension = typeof browser === 'undefined' ? chrome : browser
    * Saves options to localStorage.
    */
   const saveOptions = () => {
-    localStorage.CUSTOM_ATTRIBUTES = inputCustomAttributes.value
-    localStorage.SAFE_MODE = selectSafeMode.value
-    localStorage.LOCAL_POLL_FREQUENCY = selectLocalPollFrequency.value
-    localStorage.REMOTE_POLL_FREQUENCY = selectRemotePollFrequency.value
-    localStorage.ALLOW_TXT_EXTENSION = inputAllowTxtExtension.checked
-    localStorage.ENABLE_KROKI = inputEnableKroki.checked
-    localStorage.KROKI_SERVER_URL = inputKrokiServerURL.value
-    localStorage.THEME = selectTheme.value
-    localStorage.JS = selectJavaScript.value
-    localStorage.JS_LOAD = inputLoadJavaScript.find((element) => element.checked).value
-    webExtension.runtime.getBackgroundPage((page) => page.refreshOptions())
+    chrome.runtime.sendMessage({
+      action: 'refresh-options',
+      options: {
+        customAttributes: inputCustomAttributes.value,
+        safeMode: selectSafeMode.value,
+        localPollFrequency: selectLocalPollFrequency.value,
+        remotePollFrequency: selectRemotePollFrequency.value,
+        allowTxtExtension: inputAllowTxtExtension.checked,
+        enableKroki: inputEnableKroki.checked,
+        krokiServerUrl: inputKrokiServerURL.value,
+        theme: selectTheme.value,
+        javascript: selectJavaScript.value,
+        javascriptLoad: inputLoadJavaScript.find((element) => element.checked).value
+      }
+    }, () => {
+      console.log('callback!')
+    })
   }
 
   /**
@@ -241,7 +247,7 @@ const webExtension = typeof browser === 'undefined' ? chrome : browser
       }
     })
   }
-  selectTheme.addEventListener('change', (event) => {
+  selectTheme.addEventListener('change', () => {
     if (selectTheme.selectedOptions) {
       if (selectTheme.selectedOptions.length === 1 && selectTheme.selectedOptions[0].parentNode.label !== 'Default') {
         removeCustomStyleSheet.classList.remove('is-hidden')