緣由
chrome應用商店有三款二維碼插件，自己一直使用的第一款。這三款插件有且只有一個功能就是生成當前頁面的URL的二維碼。
其實這個功能基本上滿足了需要移動端開發在微信里打開頁面進行調試的情況。
但是也有少數情況（如：頁面存在重定向），無法直接在桌面上打開鏈接。此時以往我習慣性的打開百度，輸入二維碼，找到草料二維碼，填入鏈接，然后生成二維碼，最后微信掃一掃。
每次有此情況發生的時候，腦子里都存在一個想法為什么生成當前頁面的URL的插件上存在一個輸入框，可以手動生成一個二維碼呢？！
Chrome插件開發
由於之前接觸過一些Chrome開發，所以對Chrome開發心里有數，本質上就是前端開發，加上Chrome提供的特殊API接口，就可以搞定。
最核心問題 - JS能夠制作二維碼
開源的插件：http://davidshimjs.github.io/qrcodejs/
Chrome插件類型 - browser_action
根據《Chrome擴展及應用開發》我總結了大概有五種類型：
- browser_action ： 地址欄右側圖標
- page_action ： 地址欄內右側圖標
- content_scripts ： 對某些頁面進行處理
- background ： 后台運行腳本
- options_page：選項頁面
二維碼開發肯定選browser_action，
需求：
- 點擊地址欄右側圖標彈出小窗口自動生成當前頁面URL的二維碼
- 彈出窗口包含一個輸入框，可手動根據輸入框的內容生成二維碼
Chrome插件配置文件介紹
{
"manifest_version": 2,
"name": "二維碼",
"version": "0.0.1",
"description": "二維碼",
"icons": {
"128": "img/qrcode.png"
},
"browser_action": {
"default_icon": {
"38": "img/qrcode.png"
},
"default_tile": "二維碼",
"default_popup": "popup.html"
},
"permissions": [
"tabs"
]
}
- "manifest_version" 當前必須為2。
- "icons"為擴展程序頁面的圖標。
- "browser_action"中"default_icon"為地址欄右側的圖標。
- "default_popup"為最核心的點擊圖標彈出的小窗口頁面。
- "permissions"因為需要獲取用戶當前頁面的URL需要配置的權限。
Chrome插件彈出頁面
此頁面為正常的前端開發HTML頁面，可引入CSS，和JS文件。
成果
github： https://github.com/yangqiong/chrome-plugins-qrcode
代碼寫的不好，歡迎大家提意見，謝謝。