fix i18n and lit initialize

src/content/index.ts

@@ -1,14 +1,27 @@
 const INJECT_ID = "__otm_button_script__";
+import { t } from "../shared/i18n";
 
-async function inject() {
-    if (document.getElementById(INJECT_ID)) return;
+const contentScan = t("content.scan");
 
-    const script = document.createElement("script");
-    script.id = INJECT_ID;
-    script.type = "module";
-    script.src = chrome.runtime.getURL("src/content/page.js");
+const observer = new MutationObserver(() => {
+    if (!document.getElementById(INJECT_ID)) {
+        const script = document.createElement("script");
+        script.id = INJECT_ID;
+        script.type = "module";
+        script.src = chrome.runtime.getURL("src/content/page.js");
 
-    document.documentElement.appendChild(script);
-}
+        document.documentElement.appendChild(script);
+    } else {
 
-inject();
+        const target = document.querySelector(".Layout-sc-1xcs6mc-0.foHQyB");
+        if (target && !document.getElementById("__otm_button__")) {
+            const el = document.createElement("twitch-button");
+            el.id = "__otm_button__";
+            el.setAttribute("contentscan", contentScan);
+
+            target.appendChild(el);
+        }
+    }
+});
+
+observer.observe(document.body, { childList: true, subtree: true });

src/content/page.ts

@@ -1,9 +1,9 @@
 import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
-import { t } from "../shared/i18n";
+import { property } from "lit/decorators.js";
 
-@customElement("twitch-button")
 class TwitchButton extends LitElement {
+    @property({type: String, attribute: "contentscan"}) contentScan = "";
+
     static styles = css`
         :host {
             display: flex;
@@ -28,21 +28,9 @@ class TwitchButton extends LitElement {
 
     render() {
         return html`
-            <p>${t("content.scan")}</p>
+            <p>${this.contentScan}</p>
         `;
     }
 }
 
-customElements.define("twitch-button", TwitchButton);
-
-const observer = new MutationObserver(() => {
-    const target = document.querySelector(".Layout-sc-1xcs6mc-0.foHQyB");
-    const button = document.getElementById("__otm_button__");
-    if (target && !button) {
-        const el = document.createElement("twitch-button");
-        el.id = "__otm_button__";
-        target.appendChild(el);
-    }
-});
-
-observer.observe(document.body, { childList: true, subtree: true });
+customElements.define("twitch-button", TwitchButton);

src/popup/popup.ts

@@ -1,9 +1,8 @@
 import { LitElement, html, css } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { state } from "lit/decorators.js";
 import Browser from "webextension-polyfill";
 import { t } from "../shared/i18n";
 
-@customElement("popup-app")
 class PopupApp extends LitElement {
     @state()
     private isTwitch = false;