爲了少點擊幾回，本身寫了一個Chrome插件

原因

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，
需求：

1. 點擊地址欄右側圖標彈出小窗口自動生成當前頁面URL的二維碼
2. 彈出窗口包含一個輸入框，可手動根據輸入框的內容生成二維碼

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
代碼寫的很差，歡迎你們提意見，謝謝。