diff --git a/README.md b/README.md index 28d987f..e67d300 100644 --- a/README.md +++ b/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 - `katex-riot.zip` and the file structure of the extionsion is - written to the folder `katex-riot-pub` for debugging + - run `npm install`, the webextension will be zipped as + `build/katex-riot.zip` and the file structure of the extionsion is + 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. diff --git a/manifest.json b/manifest.json index 2ebb278..8e6ba72 100644 --- a/manifest.json +++ b/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" ] diff --git a/package.json b/package.json index 90f1616..8aae9fc 100644 --- a/package.json +++ b/package.json @@ -1,23 +1,25 @@ { - "name": "riot-katex-tu-dd", - "version": "1.0.0", - "description": "Renders formulars on matrix.tu-dresden.de chats using KaTeX", - "main": "riot-katex.js", - "dependencies": { - "katex": "^0.11.1" - }, - "devDependencies": {}, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/vale981/riot-katex.git" - }, - "author": "", - "license": "GPL-3.0", - "bugs": { - "url": "https://github.com/vale981/riot-katex/issues" - }, - "homepage": "https://github.com/vale981/riot-katex#readme" + "name": "riot-katex", + "version": "1.0.0", + "description": "Renders formulars in the Riot chat client for Matrix using KaTeX.", + "main": "riot-katex.js", + "dependencies": { + "katex": "^0.11.1" + }, + "devDependencies": {}, + "scripts": { + "postinstall": "sh ./package.sh", + "build": "sh ./package.sh", + "clean": "rm -r build" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/vale981/riot-katex.git" + }, + "author": "", + "license": "GPL-3.0", + "bugs": { + "url": "https://github.com/vale981/riot-katex/issues" + }, + "homepage": "https://github.com/vale981/riot-katex#readme" } diff --git a/package.sh b/package.sh index 9d97b7b..f5bc545 100755 --- a/package.sh +++ b/package.sh @@ -1,10 +1,23 @@ #!/bin/sh -npm install +BUILD_DIR="build" +KATEX_PUB_DIR="katex-riot-pub" -mkdir -p katex-riot-pub -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 -mkdir -p katex-riot-pub/fonts -cp -r node_modules/katex/dist/fonts/*.woff2 katex-riot-pub/fonts/ +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 \ + ${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 * diff --git a/riot-katex.js b/riot-katex.js index 4d431ea..c689988 100644 --- a/riot-katex.js +++ b/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_items = chat_elem.querySelectorAll('.mx_MTextBody'); + let chat_elem = document.querySelector(chat_class); + 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(); })();