diff --git a/package.json b/package.json index 5e008f7..8c4f8ba 100644 --- 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 index ae3e708..e120ae6 100644 --- a/popup.html +++ b/popup.html @@ -4,10 +4,19 @@ - Chrome Extension + Vanilla + TS + Vite + Clean CSDN Blog -
+
+
+
⚫️
+
隐藏侧边栏
+
+
+
⚫️
+
隐藏登录提示窗口
+
+
diff --git a/src/background/index.ts b/src/background/index.ts index 4a0687b..037a62f 100644 --- 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 index f9dd569..cff94bb 100644 --- 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 index 75115d6..2e877f5 100644 --- 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 index 5d8218f..09014ab 100644 --- 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 index fdd1db3..120d99a 100644 --- 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; +} \ No newline at end of file diff --git a/src/popup/index.ts b/src/popup/index.ts index 0595f48..b0ee045 100644 --- 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 index 85f2498..8d6b85e 100644 --- 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, + }, + }, } })