diff --git a/src/content.tsx b/src/content.tsx
index 44d0ba8..7cee36a 100644
--- a/src/content.tsx
+++ b/src/content.tsx
@@ -2,7 +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 { insertMountPoint } from 'utils/DOMHelper'
 import './content.scss'
 
 if (platform.resolvePartialMetaData()) {
@@ -15,10 +15,7 @@ if (platform.resolvePartialMetaData()) {
 
 async function init() {
   await injectStyles(browser.runtime.getURL('content.css'))
-  const sideBarElement = document.createElement('div')
-  sideBarElement.setAttribute('id', rootElementID)
-  document.body.appendChild(sideBarElement)
-  createRoot(sideBarElement).render(<Gitako />)
+  createRoot(insertMountPoint()).render(<Gitako />)
 }
 
 // injects a copy of stylesheets so that other extensions(e.g. dark reader) could read
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index cd8383e..1881f5f 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -48,7 +48,7 @@ export function $<T2>(
   selector: string,
   existCallback: undefined | null,
   otherwise: () => T2,
-): HTMLElement | T2 | null
+): HTMLElement | T2
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function $(selector: string, existCallback?: any, otherwise?: any) {
   const element = document.querySelector(selector)
@@ -58,6 +58,18 @@ export function $(selector: string, existCallback?: any, otherwise?: any) {
   return otherwise ? otherwise() : null
 }
 
+/**
+ * add the root element into DOM
+ */
+export function insertMountPoint() {
+  return $(formatID(rootElementID), undefined, () => {
+    const rootElement = document.createElement('div')
+    rootElement.setAttribute('id', rootElementID)
+    document.body.appendChild(rootElement)
+    return rootElement
+  })
+}
+
 /**
  * add the logo element into DOM
  */