Update: Rewrite without innerHtml

GunmaRamens · Nov 20, 2023 · 1158ff1 · 1158ff1
1 parent aa4a327
commit 1158ff1
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 5 deletions.
diff --git a/src/class/Kyomu/index.ts b/src/class/Kyomu/index.ts
@@ -49,7 +49,7 @@ Kyomu.rainbow.enable = function () {
             '<tr><td align="center">ゲーミング群馬大学についての問い合わせは<a href="https://twitter.com/Hayao0819" style="font-size: small;">@Hayao0819</a>までお願いします。</td></tr>';
         document.querySelectorAll(".footerTable").forEach((e) => {
             const tbody = e.querySelector("tbody");
-            if (tbody) tbody.innerHTML += linkHTML;
+            if (tbody) tbody.innerText += linkHTML;
         });
     }
 

diff --git a/src/class/Moodle/common.ts b/src/class/Moodle/common.ts
@@ -1,13 +1,31 @@
 import Browser from "webextension-polyfill";
 
+import { createElem } from "@/utils/createElem";
+
 import changeQueryInnerHTML from "../../utils/changeQueryInnerHTML";
 
 export const injectLink = () => {
+    console.log("injectLink");
     const supportSection = document.querySelector(".footer-support-link");
-    if (supportSection)
-        supportSection.innerHTML =
-            supportSection.innerHTML +
-            `<a href="https://twitter.com/Hayao0819" target="blank" class="rainbow-text">Gaming Edition開発者に連絡する<i class="icon fa fa-external-link fa-fw ml-1" aria-hidden="true"></i></a>`;
+    if (supportSection) {
+        const link = createElem(
+            "a",
+            { href: "https://twitter.com/Hayao0819", class: "rainbow-text" },
+            createElem("span", {}, "Gaming Edition開発者に連絡する"),
+            createElem("i", { class: "icon fa fa-external-link fa-fw ml-1", "aria-hidden": "true" }),
+        );
+        supportSection.appendChild(link);
+    }
+
+    const userMenu = document.getElementById("usermenu-carousel");
+    if (userMenu) {
+        const link = createElem(
+            "a",
+            { href: "https://twitter.com/Hayao0819", class: "dropdown-item", role: "menuitem", tabindex: "-1" },
+            "ゲーミング群馬大学",
+        );
+        userMenu.appendChild(link);
+    }
 };
 
 export const replaceLMSLogo = () => {

diff --git a/src/class/Moodle/enableRainbow.ts b/src/class/Moodle/enableRainbow.ts
@@ -31,6 +31,8 @@ const replaceIconToGamimg = () => {
         if (e.getAttribute("src")) e.setAttribute("src", Browser.runtime.getURL("assets/partyparrot.gif"));
     });
 };
+
+/* eslint-disable no-unsanitized/property */
 const replaceTextToGaimg = (moodle: GundaiWebSite<MoodleAdditionalInfo>) => {
     const headerText = moodle.options.headerText;
 
@@ -43,6 +45,7 @@ const replaceTextToGaimg = (moodle: GundaiWebSite<MoodleAdditionalInfo>) => {
 
     changeQueryInnerHTML("#instance-320-header", "現在のプレイ人数");
 };
+/* eslint-enable no-unsanitized/property */
 
 const headerHover = () => {
     // メニューバーでホバー時にclassを追加

diff --git a/src/utils/changeQueryInnerHTML.ts b/src/utils/changeQueryInnerHTML.ts
@@ -1,6 +1,7 @@
 export default function changeQueryInnerHTML(query: string, innerHTML: string) {
     const elements = document.querySelectorAll(query);
     elements.forEach((element) => {
+        /* eslint-disable-next-line no-unsanitized/property */
         element.innerHTML = innerHTML;
     });
 }
diff --git a/src/utils/createElem.ts b/src/utils/createElem.ts
@@ -0,0 +1,13 @@
+export const createElem = (tag: string, attr: { [key: string]: string }, ...children: (Node | string)[]) => {
+    const elem = document.createElement(tag);
+    for (const [key, value] of Object.entries(attr)) {
+        elem.setAttribute(key, value);
+    }
+    for (const child of children) {
+        if (typeof child === "string") elem.innerText = child;
+        else elem.appendChild(child);
+    }
+    return elem;
+};
+
+export default createElem;