diff --git a/background.js b/background.js index 3e05c8f..8050299 100644 --- a/background.js +++ b/background.js @@ -1,6 +1,22 @@ chrome.action.onClicked.addListener(async (tab) => { await chrome.scripting.executeScript({ target: { tabId: tab.id }, - files: ["content.js"] + files: ['content.js'], }); }); + +chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { + if (message.action === 'copyText') { + // 转发到当前活动的标签页 + chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { + if (tabs[0]?.id) { + chrome.tabs.sendMessage(tabs[0].id, message, (response) => { + sendResponse(response); + }); + } else { + sendResponse({ success: false }); + } + }); + return true; // 异步响应 + } +}); diff --git a/content.js b/content.js index b588763..358ed97 100644 --- a/content.js +++ b/content.js @@ -82,4 +82,17 @@ iframe.style.transform = visible ? 'translateX(0)' : 'translateX(100%)'; } }); + + chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { + if (message.action === 'copyText') { + navigator.clipboard + .writeText(message.data) + .then(() => sendResponse({ success: true })) + .catch((err) => { + console.error('❌ 复制失败：', err); + sendResponse({ success: false, error: err }); + }); + return true; + } + }); })(); diff --git a/manifest.json b/manifest.json index 68e5b5d..9aa8761 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "Floating Sidebar with Toggle Button", "version": "1.1", "description": "带有可折叠隐藏按钮的浮动侧边栏", - "permissions": ["activeTab", "scripting"], + "permissions": ["activeTab", "scripting", "clipboardWrite", "clipboardRead"], "background": { "service_worker": "background.js" }, diff --git a/sidepanel/index.html b/sidepanel/index.html index 2758aa0..875aa87 100644 --- a/sidepanel/index.html +++ b/sidepanel/index.html @@ -1,150 +1,47 @@ - - - - 测试工具 - - - -
- - + + + + 测试工具 + + + +
+ + - -
- -
-
-

当前时间戳

-

- 1762793622638 - 毫秒 -

-
- - - + +
+ +
+

时间戳工具

+
+

当前时间戳

+

+ 1762873747965 + 毫秒 + + + + +

-
-
- - 时间戳转换 -
-
- - - -
-
- -
-
-
- - - - Asia/Shanghai -
- -
- -
+ +
+

其他工具页面

+

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

- -
-
- - 日期时间转换 -
-
- -
-
-
- - - - Asia/Shanghai -
- -
- -
-
- - - -
-
-
- - -
-

其他工具页面

-

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

-
- - - \ No newline at end of file + + + diff --git a/sidepanel/index.js b/sidepanel/index.js index 158f5e9..d38e942 100644 --- a/sidepanel/index.js +++ b/sidepanel/index.js @@ -4,34 +4,88 @@ document.getElementById('close').addEventListener('click', () => { // sidepanel/index.js // 页面切换逻辑 -document.getElementById("nav-timestamp").addEventListener("click", () => { - switchPage("timestamp"); +document.getElementById('nav-timestamp').addEventListener('click', () => { + switchPage('timestamp'); }); -document.getElementById("nav-other").addEventListener("click", () => { - switchPage("other"); +document.getElementById('nav-other').addEventListener('click', () => { + switchPage('other'); +}); + +/** + * 更新时间戳显示 + */ +function updateTimestamp(showMilliseconds = true) { + const currentTimestamp = document.getElementById('current-timestamp'); + const currentTimestampUnit = document.getElementById('timestamp-unit'); + const timestamp = Date.now(); + const unit = showMilliseconds ? '毫秒' : '秒'; + currentTimestamp.textContent = showMilliseconds ? timestamp : Math.floor(timestamp / 1000); + currentTimestampUnit.textContent = unit; +} + +const toggleTimestampBtn = document.getElementById('toggle-timestamp-btn'); +const stopTimestampBtn = document.getElementById('stop-timestamp-btn'); +const startTimestampBtn = document.getElementById('start-timestamp-btn'); + +stopTimestampBtn.addEventListener('click', () => { + clearInterval(timestampInterval); + stopTimestampBtn.style.display = 'none'; + startTimestampBtn.style.display = 'inline-block'; +}); + +startTimestampBtn.addEventListener('click', () => { + timestampInterval = setInterval(() => updateTimestamp(showMilliseconds), 100); + startTimestampBtn.style.display = 'none'; + stopTimestampBtn.style.display = 'inline-block'; +}); + +let showMilliseconds = true; +updateTimestamp(showMilliseconds); // 初始化时更新一次时间戳 +let timestampInterval = setInterval(() => updateTimestamp(showMilliseconds), 100); +toggleTimestampBtn.addEventListener('click', () => { + showMilliseconds = !showMilliseconds; + updateTimestamp(showMilliseconds); +}); + +// 复制时间戳到剪贴板 +const copyTimestampBtn = document.getElementById('copy-timestamp-btn'); +const currentTimestamp = document.getElementById('current-timestamp'); +copyTimestampBtn.addEventListener('click', () => { + // 获取时间戳文本 + const timestampText = currentTimestamp.textContent; + + chrome.runtime.sendMessage({ action: 'copyText', data: timestampText }, (res) => { + if (chrome.runtime.lastError) { + console.error('❌ 传送时间戳文本失败：', chrome.runtime.lastError); + } else if (res?.success) { + console.log('✅ 已复制：', timestampText); + } else { + console.error('❌ 复制失败：', res); + } + }); }); function switchPage(pageName) { // 隐藏所有页面 - document.querySelectorAll(".page").forEach(page => { - page.classList.remove("active"); + document.querySelectorAll('.page').forEach((page) => { + page.classList.remove('active'); }); - + // 移除所有导航按钮的 active 状态 - document.querySelectorAll(".nav-button").forEach(button => { - button.classList.remove("active"); + document.querySelectorAll('.nav-button').forEach((button) => { + button.classList.remove('active'); }); // 显示目标页面 - document.getElementById(`page-${pageName}`).classList.add("active"); - + document.getElementById(`page-${pageName}`).classList.add('active'); + // 激活对应的导航按钮 - document.getElementById(`nav-${pageName}`).classList.add("active"); + document.getElementById(`nav-${pageName}`).classList.add('active'); } // 关闭按钮逻辑 (使用消息传递) -document.getElementById("close").addEventListener("click", () => { +document.getElementById('close').addEventListener('click', () => { // 向父页面发送消息请求关闭 - window.parent.postMessage({ action: "closeSidebar" }, "*"); -}); \ No newline at end of file + window.parent.postMessage({ action: 'closeSidebar' }, '*'); +});