pimp readme and build system

README.md

@@ -1,4 +1,4 @@
-# Riot KaTeX
+# ![Icon](icons/icon.png) Riot KaTeX
 
 This extension injects KaTeX into the `Riot` chat client for
 `matrix`. This currently works for just one domain
@@ -20,6 +20,11 @@ double click it, or drag it one firefox to install.
 
 ## Building the Extension
  - make sure you have npm installed
- - run `./package.sh`, the webextension will be zipped as
+ - run `npm install`, the webextension will be zipped as
-   `katex-riot.zip` and the file structure of the extionsion is
+   `build/katex-riot.zip` and the file structure of the extionsion is
-   written to the folder `katex-riot-pub` for debugging
+   written to the folder `build/katex-riot-pub` for debugging
+ - to clean all build artifacts, just run `npm run clean`
+
+## Thanks
+Thanks to [KaTeX](https://katex.org/) for providing the blazingly fast
+rendering library for LaTeX formulas.

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Riot KaTeX for matrix.tu-dresden.de",
-    "version": "1.0.4",
+    "version": "1.0.5",
 
     "description": "Renders formulars on matrix.tu-dresden.de chats using KaTeX.",
 
@@ -11,7 +11,7 @@
     ],
     "content_scripts": [
         {
-            "matches": ["*://matrix.tu-dresden.de/*"],
+            "matches": ["*://*/*"],
             "js": ["katex.min.js",
                    "auto-render.min.js",
                    "riot-katex.js"],
@@ -20,6 +20,9 @@
             "run_at": "document_idle"
         }
     ],
+    "icons": {
+        "96": "icons/icon.png"
+    },
     "web_accessible_resources": [
         "fonts/*.woff2"
     ]

package.json

@@ -1,23 +1,25 @@
 {
-  "name": "riot-katex-tu-dd",
+    "name": "riot-katex",
-  "version": "1.0.0",
+    "version": "1.0.0",
-  "description": "Renders formulars on matrix.tu-dresden.de chats using KaTeX",
+    "description": "Renders formulars in the Riot chat client for Matrix using KaTeX.",
-  "main": "riot-katex.js",
+    "main": "riot-katex.js",
-  "dependencies": {
+    "dependencies": {
-    "katex": "^0.11.1"
+        "katex": "^0.11.1"
-  },
+    },
-  "devDependencies": {},
+    "devDependencies": {},
-  "scripts": {
+    "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+        "postinstall": "sh ./package.sh",
-  },
+        "build": "sh ./package.sh",
-  "repository": {
+        "clean": "rm -r build"
-    "type": "git",
+    },
-    "url": "git+https://github.com/vale981/riot-katex.git"
+    "repository": {
-  },
+        "type": "git",
-  "author": "",
+        "url": "git+https://github.com/vale981/riot-katex.git"
-  "license": "GPL-3.0",
+    },
-  "bugs": {
+    "author": "",
-    "url": "https://github.com/vale981/riot-katex/issues"
+    "license": "GPL-3.0",
-  },
+    "bugs": {
-  "homepage": "https://github.com/vale981/riot-katex#readme"
+        "url": "https://github.com/vale981/riot-katex/issues"
+    },
+    "homepage": "https://github.com/vale981/riot-katex#readme"
 }

package.sh

@@ -1,10 +1,23 @@
 #!/bin/sh
-npm install
+BUILD_DIR="build"
+KATEX_PUB_DIR="katex-riot-pub"
 
-mkdir -p katex-riot-pub
+mkdir -p ${BUILD_DIR}/${KATEX_PUB_DIR}
-cp manifest.json riot-katex.js node_modules/katex/dist/katex.min.js node_modules/katex/dist/contrib/auto-render.min.js node_modules/katex/dist/katex.min.css katex-riot-pub
+cp manifest.json \
-mkdir -p katex-riot-pub/fonts
+   riot-katex.js \
-cp -r node_modules/katex/dist/fonts/*.woff2 katex-riot-pub/fonts/
+   node_modules/katex/dist/katex.min.js \
+   node_modules/katex/dist/contrib/auto-render.min.js \
+   node_modules/katex/dist/katex.min.css \
+   ${BUILD_DIR}/${KATEX_PUB_DIR}
 
-cd katex-riot-pub/
+# fonts
+mkdir -p ${BUILD_DIR}/${KATEX_PUB_DIR}/fonts
+cp -r node_modules/katex/dist/fonts/*.woff2 ${BUILD_DIR}/${KATEX_PUB_DIR}/fonts/
+
+# iconts
+mkdir -p ${BUILD_DIR}/${KATEX_PUB_DIR}/icons
+cp icons/icon.png ${BUILD_DIR}/${KATEX_PUB_DIR}/icons
+
+
+cd ${BUILD_DIR}/${KATEX_PUB_DIR}/
 zip -r -FS ../katex-riot.zip *

riot-katex.js

@@ -9,6 +9,9 @@
     }
     window.hasRun = true;
 
+    const chat_class =  '.mx_RoomView_MessageList';
+    const chat_item_class = '.mx_MTextBody';
+
     /**
      * Set up math delimiters.
      */
@@ -23,6 +26,9 @@
      * and register an event on the edit button.
      */
     function renderMath(node) {
+        if (!node)
+            return;
+
         let li = node.closest('li');
 
         // we have already rendered this element
@@ -50,8 +56,8 @@
     function init() {
         // render with KaTeX as soon as the message appears
         function listen_on_chat_element() {
-            let chat_elem = document.querySelector('.mx_RoomView_MessageList');
+            let chat_elem = document.querySelector(chat_class);
-            let chat_items = chat_elem.querySelectorAll('.mx_MTextBody');
+            let chat_items = chat_elem.querySelectorAll(chat_item_class);
 
             for(let node of chat_items) {
                 renderMath(node);
@@ -60,13 +66,13 @@
             const callback = function(mutationsList, observer) {
                 for(let mutation of mutationsList) {
                     if(mutation.type === 'attributes' && mutation.attributeName === 'class') {
-                        let node = mutation.target.querySelector('.mx_MTextBody');
+                        let node = mutation.target.querySelector(chat_item_class);
                         renderMath(node);
                     }
 
                     if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                         for(let node of mutation.addedNodes) {
-                            node = node.querySelector('.mx_MTextBody');
+                            node = node.querySelector(chat_item_class);
                             renderMath(node);
                         }
                     }
@@ -86,7 +92,7 @@
 
         // when changing the chat room, we have to create a new listener
         function change_chat_element(mutationsList, observer) {
-            if(last_title == header.textContent)
+            if(last_title === header.textContent)
                 return;
 
             last_title = header.textContent;
@@ -105,11 +111,15 @@
     // a clever hack to check if riot has been loaded yet
     function wait_for_matrix() {
         if(!('matrixChat' in window.wrappedJSObject
-             && window.wrappedJSObject.matrixChat.firstSyncComplete))
+             && window.wrappedJSObject.matrixChat.firstSyncComplete
+             && document.querySelector(chat_class)))
             return setTimeout(wait_for_matrix, 500);
 
         init();
     }
 
-    wait_for_matrix();
+    // detect Riot
+    let app_name_meta = document.head.querySelector('meta[name="application-name"]');
+    if (app_name_meta && app_name_meta.content === 'Riot')
+        wait_for_matrix();
 })();