fix: make sure all gitako elements within variable scope

src/components/SideBar.tsx

@@ -41,7 +41,8 @@ export function SideBar() {
     if (hasMetaData) {
       DOMHelper.markGitakoReadyState(true)
       setShowSettings(false)
-      $logoContainerElement.onChange(DOMHelper.insertLogoMountPoint())
+      const mountPointElement = DOMHelper.insertLogoMountPoint()
+      if (mountPointElement) $logoContainerElement.onChange(mountPointElement)
     } else {
       DOMHelper.markGitakoReadyState(false)
     }

src/content.tsx

@@ -2,6 +2,7 @@ import { Gitako } from 'components/Gitako'
 import { platform } from 'platforms'
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
+import { rootElementID } from 'utils/DOMHelper'
 import './content.scss'
 
 if (platform.resolvePartialMetaData()) {
@@ -14,9 +15,10 @@ if (platform.resolvePartialMetaData()) {
 
 async function init() {
   await injectStyles(browser.runtime.getURL('content.css'))
-  const SideBarElement = document.createElement('div')
-  document.body.appendChild(SideBarElement)
-  createRoot(SideBarElement).render(<Gitako />)
+  const sideBarElement = document.createElement('div')
+  sideBarElement.setAttribute('id', rootElementID)
+  document.body.appendChild(sideBarElement)
+  createRoot(sideBarElement).render(<Gitako />)
 }
 
 // injects a copy of stylesheets so that other extensions(e.g. dark reader) could read

src/styles/index.scss

@@ -301,6 +301,10 @@ $minimal-z-index: max(
   @include interactive-background($default, $hover, $active, $focus);
 }
 
+##{$name}-root {
+  @include enableThemes;
+}
+
 .#{$name}-toggle-show-button-wrapper {
   @include hide-for-print();
 
@@ -365,7 +369,6 @@ $minimal-z-index: max(
 
 .#{$name}-side-bar {
   @include hide-for-print();
-  @include enableThemes;
 
   $resizeHandlerWidth: 1px;
   .#{$name}-side-bar-body-wrapper {

src/utils/DOMHelper.ts

@@ -2,6 +2,8 @@
  * this helper helps manipulating DOM
  */
 
+export const rootElementID = 'gitako-root'
+
 export function setGitakoBodyClass(className: string, enable: boolean) {
   const classList = document.body.classList
   if (enable) classList.add(className)
@@ -47,7 +49,8 @@ export function $<T2>(
   existCallback: undefined | null,
   otherwise: () => T2,
 ): HTMLElement | null | T2
-export function $(selector: string, existCallback?: any, otherwise?: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function $(selector: string, existCallback?: any, otherwise?: any) {
   const element = document.querySelector(selector)
   if (element) {
     return existCallback ? existCallback(element) : element
@@ -59,13 +62,14 @@ export function $(selector: string, existCallback?: any, otherwise?: any) { // e
  * add the logo element into DOM
  */
 export function insertLogoMountPoint() {
-  const logoID = 'gitako-logo-mount-point'
-  const logoSelector = formatID(logoID)
-  return $(logoSelector, undefined, function createLogoMountPoint() {
-    const logoMountElement = document.createElement('div')
-    logoMountElement.setAttribute('id', logoID)
-    document.body.appendChild(logoMountElement)
-    return logoMountElement
+  return $(formatID(rootElementID), container => {
+    const logoID = 'gitako-logo-mount-point'
+    return $(formatID(logoID), undefined, function createLogoMountPoint() {
+      const logoMountElement = document.createElement('div')
+      logoMountElement.setAttribute('id', logoID)
+      container.appendChild(logoMountElement)
+      return logoMountElement
+    })
   })
 }