From 3ab976b930f128be4c4f48db8a03a71b91fa10ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= Date: Tue, 11 Nov 2025 01:07:43 +0800 Subject: [PATCH] =?UTF-8?q?feat(extension):=20=E5=88=9D=E5=A7=8B=E5=8C=96C?= =?UTF-8?q?hrome=E6=89=A9=E5=B1=95=E9=A1=B9=E7=9B=AE=E7=BB=93=E6=9E=84?= =?UTF-8?q?=E4=B8=8E=E5=9F=BA=E7=A1=80=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 23 ++++ README.md | 23 ++++ background.js | 6 + content.js | 85 +++++++++++++ images/icon128.png | Bin 0 -> 3949 bytes images/icon16.png | Bin 0 -> 267 bytes images/icon32.png | Bin 0 -> 458 bytes images/icon48.png | Bin 0 -> 890 bytes manifest.json | 25 ++++ package-lock.json | 288 +++++++++++++++++++++++++++++++++++++++++++ package.json | 12 ++ sidepanel/index.css | 48 ++++++++ sidepanel/index.html | 150 ++++++++++++++++++++++ sidepanel/index.js | 37 ++++++ 14 files changed, 697 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 background.js create mode 100644 content.js create mode 100644 images/icon128.png create mode 100644 images/icon16.png create mode 100644 images/icon32.png create mode 100644 images/icon48.png create mode 100644 manifest.json create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 sidepanel/index.css create mode 100644 sidepanel/index.html create mode 100644 sidepanel/index.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..93d7e2b --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +# Dependencies +node_modules/ + +# Build outputs +dist/ + +# Environment variables +.env + +# IDE files +.vscode/ +.idea/ + +# OS generated files +.DS_Store +Thumbs.db + +# Log files +*.log + +# Package files +*.zip +*.tar.gz \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..e10c80f --- /dev/null +++ b/README.md @@ -0,0 +1,23 @@ +# Using the Gemini API in a Chrome Extension. + +This sample demonstrates how to use the Gemini Cloud API in a Chrome Extension. + +## Overview + +The extension provides a chat interface for the Gemini API. To learn more about the API head over to [https://ai.google.dev/](https://ai.google.dev/). + +## Running this extension + +1. Clone this repository. +2. Download the Gemini API client by running: + ```sh + npm install + ``` +3. [Retrieve an API key](https://ai.google.dev/gemini-api/docs/api-key) and update [functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js](functional-samples/ai.gemini-in-the-cloud/sidepanel/index.js) (only for testing). +4. Compile the JS bundle for the sidepanel implementation by running: + ```sh + npm run build + ``` +5. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked). +6. Click the extension icon. +7. Interact with the prompt API in the sidebar. diff --git a/background.js b/background.js new file mode 100644 index 0000000..3e05c8f --- /dev/null +++ b/background.js @@ -0,0 +1,6 @@ +chrome.action.onClicked.addListener(async (tab) => { + await chrome.scripting.executeScript({ + target: { tabId: tab.id }, + files: ["content.js"] + }); +}); diff --git a/content.js b/content.js new file mode 100644 index 0000000..b588763 --- /dev/null +++ b/content.js @@ -0,0 +1,85 @@ +(() => { + const SIDEBAR_ID = 'floating-sidebar'; + const TOGGLE_ID = 'floating-toggle-btn'; + + // 若侧边栏已存在则移除 + const existing = document.getElementById(SIDEBAR_ID); + const existingBtn = document.getElementById(TOGGLE_ID); + if (existing && existingBtn) { + existing.remove(); + existingBtn.remove(); + return; + } + + // 创建 iframe + const iframe = document.createElement('iframe'); + iframe.id = SIDEBAR_ID; + iframe.src = chrome.runtime.getURL('sidepanel/index.html'); + + Object.assign(iframe.style, { + position: 'fixed', + top: '0', + right: '0', + width: '360px', + height: '100%', + border: 'none', + zIndex: '2147483647', + boxShadow: '-4px 0 8px rgba(0,0,0,0.15)', + backgroundColor: 'white', + transform: 'translateX(0)', + transition: 'transform 0.3s ease', + }); + + document.body.appendChild(iframe); + + // 创建控制按钮 + const toggleBtn = document.createElement('div'); + toggleBtn.id = TOGGLE_ID; + toggleBtn.textContent = '≡'; + Object.assign(toggleBtn.style, { + position: 'fixed', + bottom: '20px', + right: '20px', + width: '48px', + height: '48px', + backgroundColor: '#0078d7', + color: 'white', + borderRadius: '50%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: '22px', + cursor: 'pointer', + boxShadow: '0 2px 6px rgba(0,0,0,0.3)', + zIndex: '2147483648', + transition: 'background-color 0.2s ease', + }); + + toggleBtn.addEventListener('mouseenter', () => { + toggleBtn.style.backgroundColor = '#005fa3'; + }); + toggleBtn.addEventListener('mouseleave', () => { + toggleBtn.style.backgroundColor = '#0078d7'; + }); + + document.body.appendChild(toggleBtn); + + // 折叠 / 展开逻辑 + let visible = true; + toggleBtn.addEventListener('click', () => { + visible = !visible; + iframe.style.transform = visible ? 'translateX(0)' : 'translateX(100%)'; + }); + // 如果使用 window.postMessage + window.addEventListener('message', function (event) { + // 检查消息来源是否可信 (非常重要!) + if (event.origin !== 'chrome-extension://njacfkelcmfnpdbnbkpenogmokmglkcn') { + return; + } + if (event.data.action === 'closeSidebar') { + console.log('Received closeSidebar message'); + visible = !visible; + iframe.style.transform = visible ? 'translateX(0)' : 'translateX(100%)'; + } + }); +})(); diff --git a/images/icon128.png b/images/icon128.png new file mode 100644 index 0000000000000000000000000000000000000000..787906199986752376c877a99165cd7b5a9e1870 GIT binary patch literal 3949 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 P9%Arx^>bP0l+XkK{cvXg literal 0 HcmV?d00001 diff --git a/images/icon32.png b/images/icon32.png new file mode 100644 index 0000000000000000000000000000000000000000..838c426c8e30870c3a1e2c4f8f83d4614fd85487 GIT binary patch literal 458 zcmV;*0X6=KP)Px$gh@m}R9HvtmrG8=Fc5}kD#3;g*`&Mlk&Dm+u;2!81Wp1sfE#cGxCcrfkytbf z!ls)N)yPpNO2XJq+Kd8HvrA%oK99#U{~)w@((&T*Td5bN)D<@k5#P=bZ@lH?tLd`X zWMDFyznY9%<}ZhFIB~6S1xSMENdert7P0+DfM-7r?@VKi0P7%9#~7~99mXMRi~ZQO zaf0C>egQ}sH$hYYq>XbB1ppUt{%YDu7$l>4Wu0cQtq&&0nP^l4{d2y8bBWd+OA$5fTEecyWYvG^;=N( z_WuGnG%0lEffIm;2YSDTy(gl5EpVpd?0pN6wLAm`@Ok|Kkn!S57o@xvn2v!G&gL$dQTM|`<=c3hFj)ja@%W>`nMgd>kdlEYbR*=|Y;TS)2bIaoNZ;4W(l@h0oWVsYX ztHz|L<9)Vf<=`=iR%=hV7oDyEZqyyqA`Px&G)Y83RA@u(T3v1$F%bT|YFer71M~rcq7o=kAJg;(xk1wt1a1)214KDM1@C0B42d9_`ry0lXOWY$leJzJ>dXNC9Hzxb}_4W$WyUe-RO zK+%uOBme}crrL!v({%zswQ)@Xz!Z1AzyZi&-}Q)T0Nk9315jC?(U=AR06&rbWB@#j zNH5piqK@-Pb;KCx0kGSdbl2@;Q2q>*4ifK zGDn9L7thtTG@i_j(`n^CSf&RqHd~;Vj`Fmc00{e_xqf$v+mAQOg>(t%4F$`gbjH+! zX6yxNPBiO*t7;!t73R2j#?+INXNiiMzZXE<%6oeWfy*j!E6X^3$(b}2^d*~ZV5sB;0^kZ$^%7KzisrpF z{~-LK08D_4e)gEBk31lhmY4pshsZ*_NKBo5P;5(ow*l&oWgVzG@VZ|34aR7xZbPw# QS^xk507*qoM6N<$g15q#s{jB1 literal 0 HcmV?d00001 diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..68e5b5d --- /dev/null +++ b/manifest.json @@ -0,0 +1,25 @@ +{ + "manifest_version": 3, + "name": "Floating Sidebar with Toggle Button", + "version": "1.1", + "description": "带有可折叠隐藏按钮的浮动侧边栏", + "permissions": ["activeTab", "scripting"], + "background": { + "service_worker": "background.js" + }, + "action": { + "default_title": "打开侧边栏" + }, + "web_accessible_resources": [ + { + "resources": ["sidepanel/*"], + "matches": [""] + } + ], + "content_scripts": [ + { + "matches": [""], + "js": ["content.js"] + } + ] +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..df1ad3c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,288 @@ +{ + "name": "Chrome Extensions Gemini Demo", + "version": "1.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "Chrome Extensions Gemini Demo", + "version": "1.0", + "devDependencies": { + "@google/generative-ai": "0.15.0", + "rollup": "4.22.4" + } + }, + "node_modules/@google/generative-ai": { + "version": "0.15.0", + "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.15.0.tgz", + "integrity": "sha512-zs37judcTYFJf1U7tnuqnh7gdzF6dcWj9pNRxjA5JTONRoiQ0htrRdbefRFiewOIfXwhun5t9hbd2ray7812eQ==", + "dev": true, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz", + "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz", + "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz", + "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz", + "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz", + "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz", + "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz", + "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz", + "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz", + "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-riscv64-gnu": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz", + "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz", + "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz", + "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz", + "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz", + "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz", + "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz", + "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", + "dev": true + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/rollup": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz", + "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==", + "dev": true, + "dependencies": { + "@types/estree": "1.0.5" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.22.4", + "@rollup/rollup-android-arm64": "4.22.4", + "@rollup/rollup-darwin-arm64": "4.22.4", + "@rollup/rollup-darwin-x64": "4.22.4", + "@rollup/rollup-linux-arm-gnueabihf": "4.22.4", + "@rollup/rollup-linux-arm-musleabihf": "4.22.4", + "@rollup/rollup-linux-arm64-gnu": "4.22.4", + "@rollup/rollup-linux-arm64-musl": "4.22.4", + "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4", + "@rollup/rollup-linux-riscv64-gnu": "4.22.4", + "@rollup/rollup-linux-s390x-gnu": "4.22.4", + "@rollup/rollup-linux-x64-gnu": "4.22.4", + "@rollup/rollup-linux-x64-musl": "4.22.4", + "@rollup/rollup-win32-arm64-msvc": "4.22.4", + "@rollup/rollup-win32-ia32-msvc": "4.22.4", + "@rollup/rollup-win32-x64-msvc": "4.22.4", + "fsevents": "~2.3.2" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..c6c3c3c --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "Chrome Extensions Gemini Demo", + "version": "1.0", + "scripts": { + "build": "rollup sidepanel/index.js --file dist/sidepanel.bundle.js --format iife" + }, + "private": true, + "devDependencies": { + "@google/generative-ai": "0.15.0", + "rollup": "4.22.4" + } +} diff --git a/sidepanel/index.css b/sidepanel/index.css new file mode 100644 index 0000000..818edbb --- /dev/null +++ b/sidepanel/index.css @@ -0,0 +1,48 @@ +/* sidepanel/style.css */ +.navbar { + display: flex; + background-color: #f8f9fa; + border-bottom: 1px solid #dee2e6; + padding: 0.5rem; +} + +.nav-button { + flex: 1; + padding: 0.5rem 1rem; + background-color: transparent; + border: none; + cursor: pointer; + text-align: center; + transition: background-color 0.2s; +} + +.nav-button:hover { + background-color: #e9ecef; +} + +.nav-button.active { + background-color: #007bff; + color: white; +} + +.close-button { + padding: 0.25rem 0.75rem; + background-color: #dc3545; + color: white; + border: none; + border-radius: 0.25rem; + cursor: pointer; + margin-left: auto; +} + +.content { + padding: 1rem; +} + +.page { + display: none; +} + +.page.active { + display: block; +} \ No newline at end of file diff --git a/sidepanel/index.html b/sidepanel/index.html new file mode 100644 index 0000000..2758aa0 --- /dev/null +++ b/sidepanel/index.html @@ -0,0 +1,150 @@ + + + + + + + 测试工具 + + + +
+ + + + +
+ +
+
+

当前时间戳

+

+ 1762793622638 + 毫秒 +

+
+ + + +
+
+ +
+
+ + 时间戳转换 +
+
+ + + +
+
+ +
+
+
+ + + + Asia/Shanghai +
+ +
+ +
+
+ +
+
+ + 日期时间转换 +
+
+ +
+
+
+ + + + Asia/Shanghai +
+ +
+ +
+
+ + + +
+
+
+ + +
+

其他工具页面

+

这里可以放置其他工具的内容。

+
+
+
+ + + + \ No newline at end of file diff --git a/sidepanel/index.js b/sidepanel/index.js new file mode 100644 index 0000000..158f5e9 --- /dev/null +++ b/sidepanel/index.js @@ -0,0 +1,37 @@ +document.getElementById('close').addEventListener('click', () => { + window.parent.postMessage({ action: 'indexind' }, '*'); +}); + +// sidepanel/index.js +// 页面切换逻辑 +document.getElementById("nav-timestamp").addEventListener("click", () => { + switchPage("timestamp"); +}); + +document.getElementById("nav-other").addEventListener("click", () => { + switchPage("other"); +}); + +function switchPage(pageName) { + // 隐藏所有页面 + document.querySelectorAll(".page").forEach(page => { + page.classList.remove("active"); + }); + + // 移除所有导航按钮的 active 状态 + document.querySelectorAll(".nav-button").forEach(button => { + button.classList.remove("active"); + }); + + // 显示目标页面 + document.getElementById(`page-${pageName}`).classList.add("active"); + + // 激活对应的导航按钮 + document.getElementById(`nav-${pageName}`).classList.add("active"); +} + +// 关闭按钮逻辑 (使用消息传递) +document.getElementById("close").addEventListener("click", () => { + // 向父页面发送消息请求关闭 + window.parent.postMessage({ action: "closeSidebar" }, "*"); +}); \ No newline at end of file