Chrome扩展程序之编码&时间戳小工具

Chrome扩展程序之编码&时间戳小工具

作为一个前端小白,对于chrome扩展程序久闻大名,实际动手头一次;前天晚上到前端哪里串门看到小伙伴在搞这个,要了份手册,也来尝个鲜

项目源码看这里: https://git.oschina.net/liuyueyi/encoder

需求

作为一个web后端,经常需要干的事情,url参数编码,时间戳和日期的互转,unicode编码转码,每次要用的时候都low b的到百度上找个工具来用,虽然说也可以满足需求,单终究不是那么爽快;作为一个码农,完全可以考虑捋起袖子自己玩

如果用的mac电脑,有两神器估计大家都知道 Alfredpopclip, 这两个支持自定义扩展程序,只要你脚本写得溜,想上天都行

推一个我之前写的 poplicp 扩展程序的源码链接 : https://github.com/liuyueyi/PopClip, 基本上也是为了实现上面的需求

ok,这里的主要目的是开发chrome插件实现以下功能:

  1. 日期 / 时间戳互转
  2. unicode / 中文转码
  3. utf8 / 中文转码
  4. url 编解码

准备

1. 参考文档

先丢一篇参考文档: http://open.chrome.360.cn/extension_dev/samples.html

根据参考文档了解下相关背景知识就可以了,上面的入门实例已经out了,跑不同,试试就好,不要当真

2. 捋现有的扩展程序的代码

通过上面搞清楚基本的概念之后,也就是 manifest.json 这个东西的配置之后,自己想开发,但是没什么头绪,不要怕,完全可以去看下别人是怎么玩的

偷师三步骤:

  • 打开扩展页 chrome://extensions/
  • 记住偷师目标的ID, 到目录下去找, mac的目录如下,id对应的文件下就是我们要偷师的源码
  • 开始膜拜

直接看这些非常优秀的插件源码,可能有些吃不消,不要紧,可以看我的,超级简单

开动

1. json配置文件

注意的 "manifest_version": 2, 这个东西必须要有,permissions 在我们的扩展中可有可无

{
	"name": "Encoder",
	"version": "1.0" ,
	"manifest_version": 2,
	"description": "编码&时间戳转换小工具.",
	"browser_action": {
		"default_icon": "/image/icon48.png",
		"default_popup": "popup.html",
		"default_title": "编码&时间戳转换小工具"
	},
	"icons": {
      "128": "/image/icon128.png",
      "16": "/image/icon16.png",
      "48": "/image/icon48.png"
   },
	"permissions": [
		"http://api.flickr.com/"
	]
}

2. popup.html 页面

这个就是扩展程序显示的页面了, 下面是截图, 唯一需要注意的是 html里面不要写js

3. js代码

主要的业务逻辑就是再这个里面实现的,逻辑比较简单,没什么可说的

1. utf8 / chinese

// 中文转 utf8
function chinese2Utf8(text) {
    return text.replace(/[^\u0000-\u00FF]/g, function($0) {
        return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;") });
}

// 中文转 utf8
function utf82Chinese(text) {
    return unescape(text.replace(/&#x/g, '%u').replace(/;/g, ''));
}

2. unicode / chinese

// 汉字转unicode
function chinese2Unicode(text) {
    return text.replace(/([\u4E00-\u9FA5]|[\uFE30-\uFFA0])/g, function(newStr) {
        return "\\u" + newStr.charCodeAt(0).toString(16);
    });
}


// unicode 转中文
function unicode2Chinese(text) {
    return eval("'" + text + "'");
}

3. url 编码/解码

// url 编码
function encodeUrl(urlText) {
    return encodeURIComponent(urlText);
}


// url 解码
function decodeUrl(urlText) {
    return decodeURIComponent(urlText);
}

4. 时间戳转换

// 时间戳转日期
function time2date(timestamp) {
    var localDate =  new Date(parseInt(timestamp) * 1000);
    var result = localDate.getFullYear() + "-" + (localDate.getMonth() + 1) + "-" + localDate.getDate() + " " + localDate.getHours() + ":" + localDate.getMinutes() + ":" + localDate.getSeconds();
    return result;
}

// 日期转时间戳
// 日期格式 2014-07-10 10:21:12
function date2time(dateTime) {
    if (dateTime.indexOf(":") < 0) {
        dateTime += " 00:00:00";
    };
    return Date.parse(new Date(dateTime)) / 1000;
}

说明下日期转时间戳时,如果只传入了日期,利用 new Date(dateTime) 生成的时间会是8点, 时区的问题,js我也不会玩,就用最low的方法兼容了下

结束语

写完之后,就是要把小程序加载到chrome, 开发者模式,点击加载xxx按钮即可,搞定后就打包

一个测试截图:

项目源码传送门: https://git.oschina.net/liuyueyi/encoder

如有问题欢迎指正

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魏琼东

一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-演示使用报表构建UI-入库业务查询模块

回顾与说明     前面我们把“商品字典”、“商品入库”、“商品库存查询”三个模块已经概括或者详细的演示完了,这些模块涉及到简单数据的增、删、修,也涉及到复杂业...

25250
来自专栏wOw的Android小站

[Objective-C]深入理解GCD

GCD(Grand Central Dispatch)是libdispatch的市场名称,而libdispatch作为Apple的一个库,为并发代码在多核硬件(...

18110
来自专栏前端小吉米

如何写出一手好的小程序之多端架构篇

为了大家能更好的开发出一些高质量、高性能的小程序,这里带大家理解一下小程序在不同端上架构体系的区分,更好的让大家理解小程序一些特有的代码写作方式。

21430
来自专栏小樱的经验随笔

BugkuCTF web3

1.6K40
来自专栏小曾

.Net Web开发技术栈

有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎么学,学什么,怎么系统的学,为此我以我微薄之力总结归纳写了一篇.Net w...

51030
来自专栏IT派

数据工程师推荐你用的几个工具

作为数据工程师或者数据分析师,经常会跟各种数据打交道,其中,获取数据这一关是无法避免的,下面,我就将自己时常工作中用到的数据连接配置模型分享出来,供大家交流。

14340
来自专栏从零开始学自动化测试

python接口自动化21-规范的API接口文档示例

前言 接口文档到底长啥样?做接口测试最大的障碍在于没有接口文档,很多公司不注重接口文档的编写,导致测试小伙伴没见过接口文档。 运气好一点的测试小伙伴可能厚着脸皮...

1.5K80
来自专栏流媒体

基于FFmpeg进行RTMP推流(一)简介

这里的bin、include、lib就是我们刚才在FFmpeg下载的相关文件。 src是我们的项目源码目录。 新建Win32控制台应用程序、选择位置、...

6.7K40
来自专栏圣杰的专栏

事件总线知多少(1)

源码路径:Github-EventBus 事件总线知多少(1) 事件总线知多少(2) 1. 引言 事件总线这个概念对你来说可能很陌生,但提到观察者(发布...

38870
来自专栏北京马哥教育

Python安全运维实战:针对几种特定隐藏方式的Webshell查杀

作者:北门喂猫 来源: http://www.freebuf.com/articles/web/131350.html Webshell一直都是...

32030

扫码关注云+社区

领取腾讯云代金券