diff --git a/src/content/index.ts b/src/content/index.ts index 70bedde..5aacb70 100644 --- a/src/content/index.ts +++ b/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(); \ No newline at end of file + 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 }); \ No newline at end of file diff --git a/src/content/page.ts b/src/content/page.ts index ff93f63..a795c2b 100644 --- a/src/content/page.ts +++ b/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` -

${t("content.scan")}

+

${this.contentScan}

`; } } -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 }); \ No newline at end of file +customElements.define("twitch-button", TwitchButton); \ No newline at end of file diff --git a/src/popup/popup.ts b/src/popup/popup.ts index ddb8205..18a669d 100644 --- a/src/popup/popup.ts +++ b/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;