为了少点击几次，自己写了一个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

代码写的不好，欢迎大家提意见，谢谢。