fix a bug: I am considering replacing the 'class' attribute of the chatGptBox with the 'id' attribute because some unknown scripts in the Bing International search web page are automatically blocking elements with the 'class' attribute when they are prepended. However, elements with the 'id' attribute are not blocked. Therefore, the chatGptBox may disappear from the search page

src/content-script/index.jsx

@@ -48,7 +48,7 @@ async function mountComponent(siteConfig, userConfig) {
       else await new Promise((r) => setTimeout(r, 500))
     }
   }
-  document.querySelectorAll('.chatgptbox-container').forEach((e) => {
+  document.querySelectorAll('.chatgptbox-container,#chatgptbox-container').forEach((e) => {
     unmountComponentAtNode(e)
     e.remove()
   })
@@ -57,12 +57,12 @@ async function mountComponent(siteConfig, userConfig) {
   if (userConfig.inputQuery) question = await getInput([userConfig.inputQuery])
   if (!question && siteConfig) question = await getInput(siteConfig.inputQuery)
 
-  document.querySelectorAll('.chatgptbox-container').forEach((e) => {
+  document.querySelectorAll('.chatgptbox-container,#chatgptbox-container').forEach((e) => {
     unmountComponentAtNode(e)
     e.remove()
   })
   const container = document.createElement('div')
-  container.className = 'chatgptbox-container'
+  container.id='chatgptbox-container'
   render(
     <DecisionCard
       session={initSession()}

src/content-script/styles.scss

@@ -43,12 +43,12 @@
   margin-left: 60px;
 }
 
-.chatgptbox-container * {
+.chatgptbox-container,#chatgptbox-container * {
   font-family: 'Cairo', sans-serif;
   font-size: 14px;
 }
 
-.chatgptbox-container {
+.chatgptbox-container,#chatgptbox-container {
   width: 100%;
   flex-basis: 0;
   flex-grow: 1;