Notes to the reviewer

amo-notes-reviewer.md

Markdown Viewer - Build Instructions

Markdown Viewer is an open source browser extension hosted on GitHub: https://github.com/simov/markdown-viewer/tree/firefox

Build the themes and vendor folders, and create the markdown-viewer.zip package:

cd markdown-viewer/
sh build/package.sh firefox

Build Dependencies

• node >= 18
• npm >= 10
• git
• zip

Operating System

Ubuntu 22.04.3 LTS (jammy) 5.19.0-50-generic

Build Tools

• bundler - rollup
• minifier - terser

Build Summary

Library		Build Strategy	Outputs
bootstrap	📄	copy file	• vendor/bootstrap.min.css
csso	📄	copy file	• vendor/csso.min.css
markdown-it	📦	bundle and minify	• vendor/markdown-it.min.js
marked	📦	bundle and minify	• vendor/marked.min.js
mathjax	📄	copy files	• vendor/mathjax/ (folder)
mdc	📦	bundle and minify	• vendor/mdc.min.js • vendor/mdc.min.css
mermaid	📄❗	modify and copy file	• vendor/mermaid.min.js ❗
mithril	📄	copy file	• vendor/mithril.min.js
panzoom	📄	copy file	• vendor/panzoom.min.js
prism	📄❗	modify, minify and copy files	• vendor/prism.min.js • vendor/prism-autoloader.min.js❗ • vendor/prism/ (folder) • vendor/prism.min.css • vendor/prism-okaidia.min.css
remark	📦	bundle and minify	• vendor/remark.min.js
themes	📄	modify, minify and copy files	• themes/ (folder)

---

bootstrap

• build:

  build/bootstrap/ https://github.com/simov/markdown-viewer/tree/firefox/build/bootstrap

  # 📄 copy file
  sh build/bootstrap/build.sh

• output:

  • vendor/bootstrap.min.css
    https://github.com/twbs/bootstrap/blob/v5.3.3/dist/css/bootstrap.min.css

• source:

  module	version	source
  bootstrap	5.3.3	https://github.com/twbs/bootstrap/tree/v5.3.3

---

csso

• build:

  build/csso/ https://github.com/simov/markdown-viewer/tree/firefox/build/csso

  # 📄 copy file
  sh build/csso/build.sh

• output:

  • vendor/csso.min.css
    node_modules/csso/dist/csso.js

• source:

  module	version	source
  csso	5.0.5	https://github.com/css/csso/tree/v5.0.5

---

markdown-it

• build:

  build/markdown-it/ https://github.com/simov/markdown-viewer/tree/firefox/build/markdown-it

  # 📦 bundle and minify
  sh build/markdown-it/build.sh

• output:

  • vendor/markdown-it.min.js

• source:

  module	version	source
  markdown-it	13.0.1	https://github.com/markdown-it/markdown-it/tree/13.0.1
  markdown-it-abbr	1.0.4	https://github.com/markdown-it/markdown-it-abbr/tree/1.0.4
  markdown-it-anchor	8.6.7	https://github.com/valeriangalliat/markdown-it-anchor/tree/v8.6.7
  markdown-it-attrs	4.1.6	https://github.com/arve0/markdown-it-attrs/tree/v4.1.6
  markdown-it-cjk-breaks	1.1.3	https://github.com/markdown-it/markdown-it-cjk-breaks/tree/1.1.3
  markdown-it-deflist	2.1.0	https://github.com/markdown-it/markdown-it-deflist/tree/2.1.0
  markdown-it-footnote	3.0.3	https://github.com/markdown-it/markdown-it-footnote/tree/3.0.3
  markdown-it-ins	3.0.1	https://github.com/markdown-it/markdown-it-ins/tree/3.0.1
  markdown-it-mark	3.0.1	https://github.com/markdown-it/markdown-it-mark/tree/3.0.1
  markdown-it-sub	1.0.0	https://github.com/markdown-it/markdown-it-sub/tree/1.0.0
  markdown-it-sup	1.0.0	https://github.com/markdown-it/markdown-it-sup/tree/1.0.0
  markdown-it-task-lists	2.1.1	https://github.com/revin/markdown-it-task-lists
  github-slugger	2.0.0	https://github.com/Flet/github-slugger/tree/2.0.0

---

marked

• build:

  build/marked/ https://github.com/simov/markdown-viewer/tree/firefox/build/marked

  # 📦 bundle and minify
  sh build/marked/build.sh

• output:

  • vendor/marked.min.js

• source:

  module	version	source
  marked	12.0.1	https://github.com/markedjs/marked/tree/v12.0.1
  marked-gfm-heading-id	3.1.3	https://github.com/markedjs/marked-gfm-heading-id/tree/v3.1.3
  marked-linkify-it	3.1.9	https://github.com/UziTech/marked-linkify-it/tree/v3.1.9
  marked-smartypants	1.1.6	https://github.com/markedjs/marked-smartypants/tree/v1.1.6

---

mathjax

• build:

  build/mathjax/ https://github.com/simov/markdown-viewer/tree/firefox/build/mathjax

  # 📄 copy files
  sh build/mathjax/build.sh

• output: vendor/mathjax/ (folder)

  • vendor/mathjax/tex-mml-chtml.js
    https://github.com/mathjax/MathJax/blob/3.2.2/es5/tex-mml-chtml.js
  • vendor/mathjax/extensions/
    https://github.com/mathjax/MathJax/tree/3.2.2/es5/input/tex/extensions
  • vendor/mathjax/fonts/
    https://github.com/mathjax/MathJax/tree/3.2.2/es5/output/chtml/fonts/woff-v2

• source:

  module	version	source
  mathjax	3.2.2	https://github.com/mathjax/MathJax/tree/3.2.2

---

mdc

• build:

  build/mdc/ https://github.com/simov/markdown-viewer/tree/firefox/build/mdc

  # 📦 bundle and minify
  sh build/mdc/build.sh

• output:

  • vendor/mdc.min.js
  • vendor/mdc.min.css

• source:

  module	version	source
  @material/button	0.37.1	https://github.com/material-components/material-components-web/tree/v0.37.1
  @material/ripple	0.37.1	https://github.com/material-components/material-components-web/tree/v0.37.1
  @material/switch	0.36.1	https://github.com/material-components/material-components-web/tree/v0.36.1
  @material/tabs	0.37.1	https://github.com/material-components/material-components-web/tree/v0.37.1
  @material/textfield	0.37.1	https://github.com/material-components/material-components-web/tree/v0.37.1

---

mermaid

• build:

  build/mermaid/ https://github.com/simov/markdown-viewer/tree/firefox/build/mermaid

  # 📄 copy file
  sh build/mermaid/build.sh

• output:

  • vendor/mermaid.min.js
    node_modules/mermaid/dist/mermaid.min.js

• source:

  module	version	source
  mermaid	10.8.0	https://github.com/mermaid-js/mermaid/tree/v10.8.0 ❗ (modified)

• details: ❗

  • as explained in this issue mermaid-js/mermaid#5378
  • mermaid.min.js cannot be injected as content script after v9.2.2 due to CSP violations
  • because of that I am replacing the two offending Function calls https://github.com/simov/markdown-viewer/blob/firefox/build/mermaid/fix-csp-issue.js

  - Function("return this")
  + (() => globalThis)

  • in fact that same fix got submitted into the build script for Mermaid, but it is still awaiting for approval mermaid-js/mermaid#5408
  • and this is the issue that I submitted initially on the Mozilla Add-on Discorse where I got adviced to patch the build https://discourse.mozilla.org/t/cannot-inject-a-javascript-file-because-of-a-csp-limitations/128649

---

mithril

• build:

  build/mithril/ https://github.com/simov/markdown-viewer/tree/firefox/build/mithril

  # 📄 copy file
  sh build/mithril/build.sh

• output:

  • vendor/mithril.min.js
    https://github.com/MithrilJS/mithril.js/blob/v1.1.7/mithril.min.js

• source:

  module	version	source
  mithril	1.1.7	https://github.com/MithrilJS/mithril.js/tree/v1.1.7

---

panzoom

• build:

  build/panzoom/ https://github.com/simov/markdown-viewer/tree/firefox/build/panzoom

  # 📄 copy file
  sh build/panzoom/build.sh

• output:

  • vendor/panzoom.min.js
    node_modules/@panzoom/panzoom/dist/panzoom.min.js

• source:

  module	version	source
  panzoom	4.5.1	https://github.com/timmywil/panzoom/tree/4.5.1

---

prism

• build:

  build/prism/ https://github.com/simov/markdown-viewer/tree/firefox/build/prism

  # 📄 modify, minify and copy files
  sh build/prism/build.sh

• output:

  • vendor/prism.min.js
    https://github.com/PrismJS/prism/blob/v1.29.0/prism.js (minifed)
  • vendor/prism-autoloader.min.js
    https://github.com/PrismJS/prism/blob/v1.29.0/plugins/autoloader/prism-autoloader.js ❗ (modified, minified)
  • vendor/prism/
    https://github.com/PrismJS/prism/tree/v1.29.0/components (.min.js only)
  • vendor/prism.min.css
    https://github.com/PrismJS/prism/blob/v1.29.0/themes/prism.css (modified, minified)
  • vendor/prism-okaidia.min.css
    https://github.com/PrismJS/prism/blob/v1.29.0/themes/prism-okaidia.css (modified, minified)

• source:

  module	version	source
  prismjs	1.29.0	https://github.com/PrismJS/prism/tree/v1.29.0

• details: ❗

  • as explained in this issue PrismJS/prism#3654
  • the addScript method needs to be exposed inside the prism-autoloader.js plugin https://github.com/simov/markdown-viewer/blob/firefox/build/prism/fix-autoloader.js

  - addScript(getLanguagePath(lang), function () {
  + Prism.plugins.autoloader.addScript(lang, function () {

  • so that it can be patched at runtime to load syntax definitions from a background page https://github.com/simov/markdown-viewer/blob/5.2/content/prism.js

---

remark

• build:

  build/remark/ https://github.com/simov/markdown-viewer/tree/firefox/build/remark

  # 📦 bundle and minify
  sh build/remark/build.sh

• output:

  • vendor/remark.min.js

• source:

  module	version	source
  remark	15.0.1	https://github.com/remarkjs/remark/tree/15.0.1
  remark-breaks	4.0.0	https://github.com/remarkjs/remark-breaks/tree/4.0.0
  remark-gfm	4.0.0	https://github.com/remarkjs/remark-gfm/tree/4.0.0
  remark-html	16.0.1	https://github.com/remarkjs/remark-html/tree/16.0.1
  remark-slug	7.0.1	https://github.com/remarkjs/remark-slug/tree/7.0.1

---

themes

• build:

  build/themes/ https://github.com/simov/markdown-viewer/tree/firefox/build/themes

  # 📄 modify, minify and copy files
  sh build/themes/build.sh

• output: themes/ (folder)

  • themes/github.css
    https://github.com/sindresorhus/github-markdown-css/blob/v5.5.1/github-markdown-light.css (minified)
  • themes/github-dark.css
    https://github.com/sindresorhus/github-markdown-css/blob/v5.5.1/github-markdown-dark.css (minified)
  • themes/*.css
    https://github.com/gadenbuie/cleanrmd/tree/v0.1.0/inst/resources (modified, minified)

• source:

  module	version	source
  cleanrmd	0.1.0	https://github.com/gadenbuie/cleanrmd/tree/v0.1.0
  github-markdown-css	5.5.1	https://github.com/sindresorhus/github-markdown-css/tree/v5.5.1

---