为了少点击几回，本身写了一个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
代码写的很差，欢迎你们提意见，谢谢。