百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

自己写插件-实现时间戳自由 时间戳收费吗

xsobi 2024-12-17 17:07 2 浏览

受这篇文章《人人都能手写的chrome插件，帮我省了1000多块钱》启发，再加自己空闲时间学了一些前端的皮毛，以及实际工作需求，多种契机决定自己动手完成一个时间戳转换的谷歌插件。

一、插件构思

1、插件的使用方式：

参考平常使用最高频的一个插件。它最提效的使用方式是在日志中选择一段字符串，然后右键选择用插件打开就可直接展示出格式化之后的数据。省略了复制数据-找网站-粘贴数据的中间流程。因此，要做的这个插件也应该做到选中时间格式的字符串然后用插件打开直接完成转换，且支持输入完成转换。

2、插件应该具备的功能：

对于服务端测试来说，经常使用的场景是a、比对页面上的时间信息和MQ中的时间戳是否一致，b、把当前时间转成时间戳造数。除此之外，根据时间戳保存的不同精度，还可分为秒级和毫秒级。因此此插件应该具备的基本功能为秒级、毫秒级时间戳和年月日时分秒之间的转换。

二、开始动手做

基于文章的提示，先建一个文件夹以及四个文件（ manifest.json-必有、background.js、popup.html、popup.js）。其中 manifest.json 和 background.js 主要设置插件在浏览器层的行为，比如定义插件的名字、描述、以及右键出现插件菜单等。popup.html 和 popup.js 主要定义插件页面的功能。浏览器和插件通过 background.js 和 popup.js 之间通信完成。


??

1、编写manifest.json

根据谷歌要求，此文件必须有，是插件的清单文件。包含了插件的基本信息，如插件的名称、版本、版本号等。其中，manifest_version、name、version又是必不可少的。其中需要注意，新版本谷歌浏览器只支持manifest_version=3。

{
  "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

background.js 主要定义插件的行为，比如捕捉选中的文本、在浏览器右键可以出现插件的选项，以及点击插件之后出现插件的页面popup。调试过程中发现使用 chrome.action.openPopup() 弹出窗口会报错，因此采用chrome.runtime.getURL("popup.html")。

//此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

popup.html为插件弹出展示的页面，其中设计了一个input框+按钮，支持用户粘贴字符串进行转换。而result的div内容，主要展示转换后的数据。基于谷歌的安全管控，不能给按钮添加监听事件，而是在通信函数中处理。

<!DOCTYPE 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

popup.js主要处理插件的交互逻辑，以及与background.js的通信。其中document.addEventListener（）负责当DOMContentLoaded事件发生时，执行传入的函数（第二个参数）。这里是当页面加载时，就完成传入文本的转换并展示，以及按钮点击时的处理。

function changeMain(timeString) { //2024-10-28 15:30:46
  if (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;
}

三、调试以及使用

浏览器设置-扩展程序-打开开发者模式-加载已解压的扩展程序-选择插件文件夹。

接下来就可以在浏览器上直接使用，如果涉及到改动代码，可以直接刷新重新加载，不必移除。当出现问题时，【移除】按钮旁边会有报错信息。

四、总结以及下一步计划

根据这个小小的实例，可以掌握浏览器与插件信息传输以及使用的方式，非常适合想要写插件但不知道从何下手的uu。

下一步则会优化一下页面交互和展示，比如增加复制按钮、美观性提升、以及在使用过程中发现的其他问题。

如果有其他的想法欢迎交流。

相关推荐

js向对象中添加元素(对象，数组) js对象里面添加元素

一、添加一个元素对象名["属性名"]=值(值:可以是一个值,可以是一个对象,也可以是一个数组)这样添加进去的元素,就是一个值或对象或数组...

JS小技巧，如何去重对象数组?(一)

大家好，关于数组对象去重的业务场景，想必大家都遇到过类似的需求吧，这对这样的需求你是怎么做的呢。下面我就先和大家分享下如果是基于对象的1个属性是怎么去重实现的。方法一：使用.filter()和....

「C/C++」之数组、vector对象和array对象的比较

数组学习过C语言的，对数组应该都不会陌生，于是这里就不再对数组进行展开介绍。模板类vector模板类vector类似于string，也是一种动态数组。能够在运行阶段设置vector对象的长度，可以在末...

如何用sessionStorage保存对象和数组

背景：在工作中，我将[{},{}]对象数组形式，存储到sessionStorage，然后ta变成了我看不懂的形式，然后我想取之用之，发现不可能了～记录这次深刻的教训。$clickCouponIndex...

JavaScript Array 对象 javascript的array对象

Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0，第二个索引值为1，以此类推。更多有...

JavaScript中的数组Array(对象) js array数组

1:数组Array:-数组也是一个对象-数组也是用来存储数据的-和object不同，数组中可以存储一组有序的数据，-数组中存储的数据我们称其为元素（element）-数组中的每一个元素都有一...

数组和对象方法&amp;数组去重 数组去重的5种方法前端

列举一下JavaScript数组和对象有哪些原生方法？数组：arr.concat(arr1,arr2,arrn);--合并两个或多个数组。此方法不会修改原有数组，而是返回一个新数组...

C++ 类如何定义对象数组?初始化数组?linux C++第43讲

对象数组学过C语言的读者对数组的概念应该很熟悉了。数组的元素可以是int类型的变量，例如int...

ElasticSearch第六篇:复合数据类型-数组，对象

在ElasticSearch中，使用JSON结构来存储数据，一个Key/Value对是JSON的一个字段，而Value可以是基础数据类型，也可以是数组，文档（也叫对象），或文档数组，因此，每个JSON...

第58条:区分数组对象和类数组对象

示例设想有两个不同类的API。第一个是位向量：有序的位集合varbits=newBitVector;bits.enable(4);bits.enable([1,3,8,17]);b...

八皇后问题解法(Common Lisp实现)

如何才能在一张国际象棋的棋盘上摆上八个皇后而不致使她们互相威胁呢？这个著名的问题可以方便地通过一种树搜索方法来解决。首先，我们需要写一个函数来判断棋盘上的两个皇后是否互相威协。在国际象棋中，皇后可以沿...

visual lisp修改颜色的模板函数 怎么更改visual studio的配色

（defunBF-yansemokuai(tuyuanyanse/ss)...

用中望CAD加载LISP程序技巧 中望cad2015怎么加载燕秀

1、首先请加载lisp程序，加载方法如下：在菜单栏选择工具——加载应用程序——添加，选择lisp程序然后加载，然后选择添加到启动组。2、然后是添加自定义栏以及图标，方法如下（以...

图的深度优先搜索和广度优先搜索(Common Lisp实现)

为了便于描述，本文中的图指的是下图所示的无向图。搜索指：搜索从S到F的一条路径。若存在，则以表的形式返回路径；若不存在，则返回nil。...

两个有助于理解Common Lisp宏的例子

在Lisp中，函数和数据具有相同的形式。这是Lisp语言的一个重大特色。一个Lisp函数可以分析另一个Lisp函数；甚至可以和另一个Lisp函数组成一个整体，并加以利用。Lisp的宏，是实现上述特色的...

一周热门
最近发表
标签列表