一、插件构思
1、插件的使用方式：
2、插件应该具备的功能：
二、开始动手做
1、编写manifest.json
{"manifest_version": 3,"name": "TimeStamp-Handle","version": "1.0","description": "支持时间戳、年月日时分秒自动转换","permissions": ["contextMenus","storage"],"background": {"service_worker": "background.js"},"action": {"default_popup": "popup.html"}}
2、编写background.js
//此js定义行为// 设置上下文菜单项,初始化设置chrome.runtime.onInstalled.addListener(() => { //用箭头函数做的声明chrome.contextMenus.create({ //创建一个新的右键菜单项id: "TimeStampTrans",title: "Convert Timestamp",contexts: ["selection"]});});//信息传递chrome.contextMenus.onClicked.addListener((info, tab) => {if (info.menuItemId === "TimeStampTrans") {chrome.storage.local.set({ selectedText: info.selectionText }, () => {chrome.windows.create({url: chrome.runtime.getURL("popup.html")});});}});
3、编写popup.html
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Convert Timestamp</title></head><body><h1>Convert Timestamp</h1><form id="inputQuery"><input type="text" id="TimeInput" name="TimeInput" placeholder="Enter timestamp string" required><button id="submitButton" type="button" class="button">OK</button></form><div id="result"><p>Input TimeStamp String:</p><p id="inStr"></p><p>Converted Time:</p><p id="outStr"></p></div><script src="popup.js"></script></body></html>
4、编写popup.js
function changeMain(timeString) { //2024-10-28 15:30:46if (timeString.length == 19) {//时分秒格式转换为秒以及毫秒var time1 = new Date(timeString).getTime(); //精确到毫秒var time2 = new Date(timeString).getTime() / 1000; //精确到秒// console.log("时分秒转换成毫秒级时间戳为："+time1);// console.log("时分秒转换成秒级时间戳为："+time2);return [time1,time2]}else if (timeString.length == 10) {// 秒级转换为时分秒var date = new Date(Number(timeString)*1000); // 时间戳转换成Date对象var year = date.getFullYear(); // 获取年份var month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份，转为两位数var day = ("0" + date.getDate()).slice(-2); // 获取日，转为两位数var hours = ("0" + date.getHours()).slice(-2); // 获取小时，转为两位数var minutes = ("0" + date.getMinutes()).slice(-2); // 获取分钟，转为两位数var seconds = ("0" + date.getSeconds()).slice(-2); // 获取秒，转为两位数// 根据需要格式化时间，这里是 YYYY-MM-DD HH:mm:ss//console.log("秒级时间戳转换成时分秒为："+`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);return [`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`]}else if (timeString.length == 13) {//豪秒级转换为时分秒var date = new Date(Number(timeString)); // 时间戳转换成Date对象var year = date.getFullYear(); // 获取年份var month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份，转为两位数var day = ("0" + date.getDate()).slice(-2); // 获取日，转为两位数var hours = ("0" + date.getHours()).slice(-2); // 获取小时，转为两位数var minutes = ("0" + date.getMinutes()).slice(-2); // 获取分钟，转为两位数var seconds = ("0" + date.getSeconds()).slice(-2); // 获取秒，转为两位数// 根据需要格式化时间，这里是 YYYY-MM-DD HH:mm:ss//console.log("豪秒级时间戳转换成时分秒为："+`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);return [`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`]} else {return ["非时间格式"]}}//处理通信document.addEventListener('DOMContentLoaded', () => {chrome.storage.local.get('selectedText', (data) => {document.getElementById('inStr').innerText = data.selectedText;var result = changeMain(data.selectedText);document.getElementById('outStr').innerText = result;});//在这里处理按钮的点击document.querySelector('button').addEventListener('click', transForm, false); //关键，参考https://m.imooc.com/wenda/detail/688030});//单独打开html的页面处理，修改页面信息展示function transForm(){var inputString = document.getElementById('TimeInput').value;var result = changeMain(inputString);document.getElementById('inStr').innerText = inputString;document.getElementById('outStr').innerText = result;}
三、调试以及使用
浏览器设置-扩展程序-打开开发者模式-加载已解压的扩展程序-选择插件文件夹。
接下来就可以在浏览器上直接使用，如果涉及到改动代码，可以直接刷新重新加载，不必移除。当出现问题时，【移除】按钮旁边会有报错信息。
扫一扫，加入技术交流群