雨霖铃
a42f1f2cce
新增 `chrome.runtime.onMessage` 监听器，用于接收来自 popup 或 sidepanel 的 `copyText` 消息，并将该消息转发至当前活动标签页的内容脚本，实现跨组件通信 与剪贴板写入功能。同时更新 manifest.json 权限声明，增加 clipboardWrite 和 clipboardRead 权限以支持 navigator.clipboard API 的调用。 此外，简化了 sidepanel 的 HTML 结构并增强时间戳工具功能，包括动态切换时间戳 单位、实时刷新与复制到剪贴板等交互逻辑。
92 lines
3.1 KiB
JavaScript
92 lines
3.1 KiB
JavaScript
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 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');
|
|
});
|
|
|
|
// 移除所有导航按钮的 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' }, '*');
|
|
});
|