feat: support config to decide which part should be hidden

xupea · xupea · commit 172dd7db3d61 · 2024-03-21T11:47:36.000+08:00
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "clean-csdn",
   "displayName": "Clean CSDN Blog",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "Peter Xu",
   "description": "Just make csdn blog as clean as it should be",
   "type": "module",
diff --git a/popup.html b/popup.html
@@ -4,10 +4,19 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/icon/logo.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Chrome Extension + Vanilla + TS + Vite</title>
+    <title>Clean CSDN Blog</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">
+      <div id="siderBtn" class="item">
+        <div class="status"><div id="siderStatus">⚫️</div></div>
+        <div class="content">隐藏侧边栏</div>
+      </div>
+      <div id="loginBtn" class="item">
+        <div class="status"><div id="loginStatus">⚫️</div></div>
+        <div class="content">隐藏登录提示窗口</div>
+      </div>
+    </div>
     <script type="module" src="/src/popup/index.ts"></script>
   </body>
 </html>
diff --git a/src/background/index.ts b/src/background/index.ts
@@ -1,7 +1,5 @@
 console.log('background is running')
 
 chrome.runtime.onMessage.addListener((request) => {
-  if (request.type === 'COUNT') {
-    console.log('background has received a message from popup, and count is ', request?.count)
-  }
+  chrome.tabs.reload(request.id)
 })
diff --git a/src/contentScript/index.ts b/src/contentScript/index.ts
@@ -1 +1,42 @@
-import './overrides.css'
+function injectCSS(context: string) {
+  const style = document.createElement('style')
+  style.type = 'text/css'
+
+  style.appendChild(document.createTextNode(context))
+
+  const head = document.getElementsByTagName('head')[0]
+  head.appendChild(style)
+}
+
+// Get the count value from Chrome storage
+chrome.storage.sync.get(['hideSider'], function (result) {
+  const hideSider = !!result.hideSider
+
+  if (hideSider) {
+    injectCSS(
+      `aside {
+            display: none !important;
+          }
+
+          @media screen and (min-width: 1380px) {
+            .nodata .container {
+              width: unset !important;
+            }
+          }
+          `,
+    )
+  }
+})
+
+chrome.storage.sync.get(['hideLogin'], function (result) {
+  const hideLogin = !!result.hideLogin
+
+  if (hideLogin) {
+    injectCSS(
+      `.passport-login-tip-container {
+            display: none !important;
+          }
+          `,
+    )
+  }
+})
diff --git a/src/contentScript/overrides.css b/src/contentScript/overrides.css
@@ -1,29 +1,11 @@
 aside {
   display: none !important;
 }
-
 .passport-login-tip-container {
   display: none !important;
 }
-
 @media screen and (min-width: 1380px) {
   .nodata .container {
     width: unset !important;
   }
-
-  .nodata .container.container-concision {
-    width: 1010px;
-  }
-
-  .nodata .container main {
-    width: 1010px;
-  }
-
-  .nodata .container main #pcCommentBox pre > ol.hljs-ln {
-    width: 490px !important;
-  }
-
-  .nodata .container main .articleConDownSource {
-    width: 560px;
-  }
 }
diff --git a/src/manifest.ts b/src/manifest.ts
@@ -15,16 +15,16 @@ export default defineManifest({
     48: 'img/logo-48.png',
     128: 'img/logo-128.png',
   },
-  // action: {
-  //   default_popup: 'popup.html',
-  //   default_icon: 'img/logo-48.png',
-  // },
+  action: {
+    default_popup: 'popup.html',
+    default_icon: 'img/logo-48.png',
+  },
   // options_page: 'options.html',
   // devtools_page: 'devtools.html',
-  // background: {
-  //   service_worker: 'src/background/index.ts',
-  //   type: 'module',
-  // },
+  background: {
+    service_worker: 'src/background/index.ts',
+    type: 'module',
+  },
   content_scripts: [
     {
       matches: ['https://blog.csdn.net/*'],
@@ -40,7 +40,7 @@ export default defineManifest({
       matches: [],
     },
   ],
-  // permissions: ['sidePanel', 'storage'],
+  permissions: ['activeTab', 'tabs', 'storage'],
   // chrome_url_overrides: {
   //   newtab: 'newtab.html',
   // },
diff --git a/src/popup/index.css b/src/popup/index.css
@@ -1,80 +1,30 @@
-:root {
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Open Sans',
-    'Helvetica Neue',
-    sans-serif;
-
-  color-scheme: light dark;
-  background-color: #242424;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    background-color: #fafafa;
-  }
-
-  a:hover {
-    color: #f3e5ab;
-  }
-}
-
 body {
-  min-width: 20rem;
+  min-width: 200px;
   margin: 0;
 }
 
-main {
-  text-align: center;
-  padding: 1em;
-  margin: 0 auto;
-}
-
-h3 {
-  color: #f3e5ab;
-  text-transform: uppercase;
-  font-size: 1.5rem;
-  font-weight: 200;
-  line-height: 1.2rem;
-  margin: 2rem auto;
+#app {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
 }
 
-.calc {
+.item {
   display: flex;
-  justify-content: center;
+  flex-direction: row;
+  cursor: pointer;
+  padding: 6px 12px;
   align-items: center;
-  margin: 2rem;
-
-  & > button {
-    font-size: 1rem;
-    padding: 0.5rem 1rem;
-    border: 1px solid #f3e5ab;
-    border-radius: 0.25rem;
-    background-color: transparent;
-    color: #f3e5ab;
-    cursor: pointer;
-    outline: none;
-
-    width: 3rem;
-    margin: 0 a;
-  }
+}
 
-  & > label {
-    font-size: 1.5rem;
-    margin: 0 1rem;
-  }
+.item:hover {
+  background: linear-gradient(to bottom, #eeeeec 2.4em, #00000000 2.4em);
 }
 
-a {
-  font-size: 0.5rem;
-  margin: 0.5rem;
-  color: #cccccc;
-  text-decoration: none;
+.status {
+  width: 30px;
 }
+
+.content {
+  flex: 1;
+}
diff --git a/src/popup/index.ts b/src/popup/index.ts
@@ -1,66 +1,43 @@
 import './index.css'
 
 document.addEventListener('DOMContentLoaded', () => {
-  const appElement = document.getElementById('app')!
-  const link = 'https://github.com/guocaoyi/create-chrome-ext'
+  const siderStatus = document.getElementById('siderStatus')
+  const loginStatus = document.getElementById('loginStatus')
 
-  // Create the main element
-  const mainElement = document.createElement('main')
+  let hideSider = true
+  let hideLogin = true
 
-  // Create the title element
-  const h3Element = document.createElement('h3')
-  h3Element.textContent = 'Popup Page'
-
-  // Create the counter element
-  const divElement = document.createElement('div')
-  divElement.className = 'calc'
-  const minusButton = document.createElement('button')
-  minusButton.textContent = '-'
-  const countLabel = document.createElement('label')
-  countLabel.textContent = '0'
-  const addButton = document.createElement('button')
-  addButton.textContent = '+'
-  divElement.appendChild(minusButton)
-  divElement.appendChild(countLabel)
-  divElement.appendChild(addButton)
-
-  // Create the link element
-  const aElement = document.createElement('a')
-  aElement.href = link
-  aElement.target = '_blank'
-  aElement.textContent = 'generated by create-chrome-ext'
+  // Get the count value from Chrome storage
+  chrome.storage.sync.get(['hideSider'], function (result) {
+    hideSider = !!result.hideSider
+    siderStatus!.style.visibility = hideSider ? 'visible' : 'hidden'
+  })
 
-  // Append all elements to the main element
-  mainElement.appendChild(h3Element)
-  mainElement.appendChild(divElement)
-  mainElement.appendChild(aElement)
+  chrome.storage.sync.get(['hideLogin'], function (result) {
+    hideLogin = !!result.hideLogin
+    loginStatus!.style.visibility = hideLogin ? 'visible' : 'hidden'
+  })
 
-  // Append the main element to the page
-  appElement.appendChild(mainElement)
+  const siderBtn = document.getElementById('siderBtn')
+  const loginBtn = document.getElementById('loginBtn')
 
-  let count = 0
+  siderBtn?.addEventListener('click', async () => {
+    hideSider = !hideSider
+    siderStatus!.style.visibility = hideSider ? 'visible' : 'hidden'
+    await chrome.storage.sync.set({ hideSider })
 
-  // Get the count value from Chrome storage
-  chrome.storage.sync.get(['count'], function (result) {
-    count = result.count || 0
-    countLabel.textContent = `${count}`
+    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true })
+    // await chrome.tabs.sendMessage(activeTab.id!, { hideSider })
+    chrome.runtime.sendMessage({ id: activeTab.id!, hideSider })
   })
 
-  // Decrement the count
-  minusButton.addEventListener('click', function () {
-    if (count > 0) {
-      count--
-      countLabel.textContent = `${count}`
-      chrome.storage.sync.set({ count })
-      chrome.runtime.sendMessage({ type: 'COUNT', count })
-    }
-  })
+  loginBtn?.addEventListener('click', async () => {
+    hideLogin = !hideLogin
+    loginStatus!.style.visibility = hideLogin ? 'visible' : 'hidden'
+    await chrome.storage.sync.set({ hideLogin })
 
-  // Increment the count
-  addButton.addEventListener('click', function () {
-    count++
-    countLabel.textContent = `${count}`
-    chrome.storage.sync.set({ count })
-    chrome.runtime.sendMessage({ type: 'COUNT', count })
+    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true })
+    // await chrome.tabs.sendMessage(activeTab.id!, { hideLogin })
+    chrome.runtime.sendMessage({ id: activeTab.id!, hideLogin })
   })
 })
diff --git a/vite.config.ts b/vite.config.ts
@@ -16,5 +16,13 @@ export default defineConfig(({ mode }) => {
     },
 
     plugins: [crx({ manifest })],
+
+    server: {
+      port: 5173,
+      strictPort: true,
+      hmr: {
+        port: 5173,
+      },
+    },
   }
 })

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "clean-csdn",`
`3`	`3`	`"displayName": "Clean CSDN Blog",`
`4`		`- "version": "1.0.2",`
	`4`	`+ "version": "1.0.3",`
`5`	`5`	`"author": "Peter Xu",`
`6`	`6`	`"description": "Just make csdn blog as clean as it should be",`
`7`	`7`	`"type": "module",`