由於網上很難找到關於Chrome插件制作的中文教程，為了總結和方便更多的開發者，本文以最常見的顯示效果為browser_action的二維碼插件為例，進行相關闡述。前端童鞋開發的話應該很簡單的，鄙人是開發Android的，寫這個還查了點資料(⊙﹏⊙)
版本更新
支持生成二維碼的方式：1、輸入內容回車；2、輸入內容點擊生成二維碼按鈕；3、選中文字右擊生成二維碼
顯示效果
目錄結構
根據編寫完成的二維碼插件，我認為一個Chrome插件至少包含以下幾個文件：
- manifest.json // JSON格式的清單配置文件
- icon.png // 在瀏覽器中顯示的圖標
- popup.html // 在瀏覽器中顯示的頁面
下面列舉一下我的二維碼插件的目錄結構：
chrome_extensions_qrcode
|--icon.png
|--lib
|--jquery-1.7.2.min.js
|--jquery.qrcode.min.js
|--manifest.json
|--popup.css
|--popup.html
|--popup.js
實現原理
制作交互式友好頁面，根據外部輸入內容，調用jQuery的二維碼插件庫，實現想要實現的功能，驗證正確后打包成CRX文件。
實現步驟
manifest.json
創建根目錄，如：chrome_extensions_qrcode，然后進入根目錄創建manifest.json文件，編輯內容，可參考開發文檔-manifest，以下是我的文件內容：
{
"name": "簡易二維碼", // 必要字段
"version": "1.0.0", // 必要字段，規則：用1個到4個數字來表示，中間用點隔開，這些數字必須在0到65535之間，非零數字不能0開頭
"manifest_version": 2, // 必要字段，必須為2，無引號
"description": "通過輸入文本內容生成二維碼！", // 可選字段，插件描述信息
"author": "青峰 qingfeng@showjoy.com", // 可選字段，插件作者信息
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}, // 必要字段，文件格式必須為"icons": {...}，不能為"icons": "icon.png"
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
} // 可選字段，指定默認顯示頁面
}
HTML
添加必要的icon.png和jQuery插件庫，創建popup.html文件，進行HTML頁面編寫，我這邊的頁面很簡單，如下所示：
<!doctype html>
<html>
<head>
<title>簡易二維碼</title>
<meta charset="utf-8"/>
<!-- 據說：css和js文件不能在html文件內部編寫使用，必須外部引用 -->
<link href="./popup.css" type="text/css" rel="stylesheet"/>
<!-- 以下兩個jQuery的js文件都需要引用，切忌只引用jquery.qrcode.min.js -->
<script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="./popup.js"></script>
</head>
<body>
請輸入文本內容:<br/>
<input type="text" id="content">
<input type="button" id="confirm" value="生成二維碼">
<!-- 動態生成二維碼圖片 -->
<div id="qrcode"></div>
</body>
</html>
CSS&JS
編輯CSS和JS文件：CSS文件中其實就一句話：#qrcode{margin-top: 10px}，JS文件內容如下所示：
$(function(){
$("#confirm").click(function(){
// 清空
$("#qrcode").empty();
// 獲得內容
var decodeContent = toUtf8($("#content").val());
// 根據內容長度來確定展示二維碼的大小
if (decodeContent.length < 200) {
$('#qrcode').qrcode(decodeContent);
} else {
$('#qrcode').qrcode({
width: 300,
height: 300,
text: decodeContent
});
}
});
})
// 兼容中文
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
好了，是不是很簡單，其實我也沒講什么，只是希望大家少走點彎路罷了，最后再講一下如何驗證我們編寫的代碼能否正確使用以及把編寫完成的文件打包成CRX文件。
驗證
打開網址：chrome://extensions/，選擇開發者模式，選擇加載已解壓的擴展程序...，選擇我們編寫的根目錄即可，如果出現類似文章開頭展示的最終效果，並能實現想要實現的功能，表示驗證成功；如果失敗，請修改代碼，重新執行此驗證流程。
打包
打開網址：chrome://extensions/，選擇開發者模式，選擇打包擴展程序...，選擇根目錄，下面的key為空即可，最后選擇打包擴展程序即可；如果打包失敗，請根據錯誤提示信息修正，如果打包成功，會在與根目錄同級的目錄中生成CRX插件文件和PEM秘鑰文件。
使用
本來以為直接雙擊CRX文件，即可自動安裝到Chrome瀏覽器中，后來發現一直失敗，只能通過拖拽CRX文件進入<chrome://extensions/>網頁的方式，才能正確安裝並使用。
源碼與插件地址
我制作的簡易二維碼源碼與插件下載的地址：chrome_extensions_qrcode_github