diff --git a/src/platforms/GitHub/DOMHelper.ts b/src/platforms/GitHub/DOMHelper.ts
index c12d209..c4b537a 100644
--- a/src/platforms/GitHub/DOMHelper.ts
+++ b/src/platforms/GitHub/DOMHelper.ts
@@ -1,7 +1,8 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $, formatClass, parseIntFromElement } from 'utils/DOMHelper'
+import { $ } from 'utils/$'
+import { formatClass, parseIntFromElement } from 'utils/DOMHelper'
 import { renderReact, run } from 'utils/general'
 import { CopyFileButton, copyFileButtonClassName } from './CopyFileButton'
 
diff --git a/src/platforms/GitHub/hooks/useEnterpriseStatBarStyleFix.ts b/src/platforms/GitHub/hooks/useEnterpriseStatBarStyleFix.ts
index 8c8838c..7fb3e71 100644
--- a/src/platforms/GitHub/hooks/useEnterpriseStatBarStyleFix.ts
+++ b/src/platforms/GitHub/hooks/useEnterpriseStatBarStyleFix.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { $ } from 'utils/DOMHelper'
+import { $ } from 'utils/$'
 import * as DOMHelper from '../DOMHelper'
 import { GitHub } from '../index'
 
diff --git a/src/platforms/GitHub/index.ts b/src/platforms/GitHub/index.ts
index 13bfe5f..c16f809 100644
--- a/src/platforms/GitHub/index.ts
+++ b/src/platforms/GitHub/index.ts
@@ -1,8 +1,8 @@
 import { useConfigs } from 'containers/ConfigsContext'
 import { GITHUB_OAUTH } from 'env'
 import { Base64 } from 'js-base64'
+import { $ } from 'utils/$'
 import { configRef } from 'utils/config/helper'
-import { $ } from 'utils/DOMHelper'
 import { resolveGitModules } from 'utils/gitSubmodule'
 import { sortFoldersToFront } from 'utils/treeParser'
 import * as API from './API'
diff --git a/src/platforms/Gitea/DOMHelper.ts b/src/platforms/Gitea/DOMHelper.ts
index acd7043..d82e027 100644
--- a/src/platforms/Gitea/DOMHelper.ts
+++ b/src/platforms/Gitea/DOMHelper.ts
@@ -1,5 +1,5 @@
 import { raiseError } from 'analytics'
-import { $ } from 'utils/DOMHelper'
+import { $ } from 'utils/$'
 
 export function isInRepoPage() {
   const repoHeaderSelector = '.repo-header'
diff --git a/src/platforms/Gitee/DOMHelper.ts b/src/platforms/Gitee/DOMHelper.ts
index 144837e..13dacb3 100644
--- a/src/platforms/Gitee/DOMHelper.ts
+++ b/src/platforms/Gitee/DOMHelper.ts
@@ -1,7 +1,8 @@
 import { raiseError } from 'analytics'
 import { Clippy, ClippyClassName } from 'components/Clippy'
 import * as React from 'react'
-import { $, formatClass } from 'utils/DOMHelper'
+import { $ } from 'utils/$'
+import { formatClass } from 'utils/DOMHelper'
 import { renderReact } from 'utils/general'
 
 export function isInRepoPage() {
diff --git a/src/utils/$.ts b/src/utils/$.ts
new file mode 100644
index 0000000..b5d0241
--- /dev/null
+++ b/src/utils/$.ts
@@ -0,0 +1,20 @@
+export function $(selector: string): HTMLElement | null
+export function $<T1>(selector: string, existCallback: (element: HTMLElement) => T1): T1 | null
+export function $<T1, T2>(
+  selector: string,
+  existCallback: (element: HTMLElement) => T1,
+  otherwise: () => T2,
+): T1 | T2
+export function $<T2>(
+  selector: string,
+  existCallback: undefined | null,
+  otherwise: () => T2,
+): HTMLElement | T2
+// 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
+  }
+  return otherwise ? otherwise() : null
+}
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 9c160d4..8b382e7 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -2,6 +2,8 @@
  * this helper helps manipulating DOM
  */
 
+import { $ } from './$'
+
 export const rootElementID = 'gitako-root'
 export const gitakoDescriptionTarget = document.documentElement
 
@@ -23,27 +25,6 @@ export function setBodyIndent(shouldShowGitako: boolean) {
   gitakoDescriptionTarget.setAttribute(spacingAttributeName, `${shouldShowGitako}`)
 }
 
-export function $(selector: string): HTMLElement | null
-export function $<T1>(selector: string, existCallback: (element: HTMLElement) => T1): T1 | null
-export function $<T1, T2>(
-  selector: string,
-  existCallback: (element: HTMLElement) => T1,
-  otherwise: () => T2,
-): T1 | T2
-export function $<T2>(
-  selector: string,
-  existCallback: undefined | null,
-  otherwise: () => T2,
-): HTMLElement | T2
-// 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
-  }
-  return otherwise ? otherwise() : null
-}
-
 /**
  * DOM Structure after calling the `insert*MountPoint` functions
  *