use GM_addElement to bypass CSP

package.json

@@ -7,7 +7,8 @@
     "namespace": "https://github.com/Vap0r1ze/",
     "author": "Vap0r1ze",
     "description": "nasin sona: o alasa e nimi",
-    "match": "*://*/*"
+    "match": "*://*/*",
+    "grant": [ "GM_addElement" ]
   },
   "scripts": {
     "build": "tsx scripts/build/build.ts",

src/display.tsx

@@ -19,6 +19,9 @@ export function clearWord() {
 }
 
 function WordDisplay(word: Word) {
+  const image = <div class="image" />
+  GM_addElement(image, "img", { src: `https://sitelen.nimi.li/img/64/${word.word}.png` })
+
   return (
     <div class="word">
       <div class="info">
@@ -45,11 +48,7 @@ function WordDisplay(word: Word) {
         </div>
         <div class="desc">{word.def}</div>
       </div>
-      {word.sitelen_pona && (
-        <div class="image">
-          <img src={`https://sitelen.nimi.li/img/64/${word.word}.png`}> </img>
-        </div>
-      )}
+      {word.sitelen_pona && image}
     </div>
   )
 }

src/globals.d.ts

@@ -1,9 +1,5 @@
-declare module "*.css" {
-  const source: string
-  export default source
+declare global {
+  export function GM_addElement(parent: HTMLElement, tag: string, attributes: Record<string, string>): void
 }
 
-declare module "~words" {
-  const words: Record<string, import("./types").Word>
-  export default words
-}
+export {}

src/modules.d.ts

@@ -0,0 +1,9 @@
+declare module "*.css" {
+  const source: string
+  export default source
+}
+
+declare module "~words" {
+  const words: Record<string, import("./types").Word>
+  export default words
+}