Chrome擴展程序之編碼&時間戳小工具

Chrome擴展程序之編碼&時間戳小工具

做爲一個前端小白，對於chrome擴展程序久聞大名，實際動手頭一次；前天晚上到前端哪裏串門看到小夥伴在搞這個，要了份手冊，也來嚐個鮮

項目源碼看這裏: https://git.oschina.net/liuyueyi/encoder

需求

做爲一個web後端，常常須要乾的事情，url參數編碼，時間戳和日期的互轉，unicode編碼轉碼，每次要用的時候都low b的到百度上找個工具來用，雖說也能夠知足需求，單終究不是那麼爽快；做爲一個碼農，徹底能夠考慮捋起袖子本身玩

若是用的mac電腦，有兩神器估計你們都知道 Alfred 和 popclip， 這兩個支持自定義擴展程序，只要你腳本寫得溜，想上天都行

推一個我以前寫的 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

若有問題歡迎指正