Chrome Extensions之FontAwesome图标采集

需求

Font Awesome是个好东西，绝对是前端开发者必不可少的矢量字体图标库，有了它，再也不需要各种小图片各种雪碧图，能用CSS解决的咱绝不用图片。

公司VOSS系统也引用了这个库，但几百个图标选择确实是一件麻烦事，官方的接口也不好用，那我就直接写个扩展，直接采集官方图标吧。

插件的功能就是将官网 http://fontawesome.io/icons/ 页面的图标及分类采集下来，作为json数组传给自己的服务器保存，每次官网更新点一下就一键更新，这酸爽……

扩展效果图

Let's Do it！

manifest.json

{
    "name": "fontAwesome图标采集器",
    "version": "1.0",
    "manifest_version": 2,
    "description": "采集fontAwesome官网图标的className",
    "background": {
        "scripts": ["jquery2.1.1.min.js", "background.js"]
    },
    "page_action": {
        "default_icon": {
            "19": "icon_19.png",
            "38": "icon_38.png"
        },
        "default_title": "采集",
        "default_popup": "popup.html"
    },
    "permissions": ["tabs", "http://接口URL/*"],
    "content_scripts": [{
        "matches": ["http://fontawesome.io/icons/"],
        "js": ["jquery2.1.1.min.js", "content_script.js"]
    }]
}

没什么好说的，content，popup和background

因为只采集Font Awesome一个网站，所以用的是page_action

content_script.js

var postInfo = $('#icons section');

var msg = {
    type:'fa-information',
    num: 0,
    list: []
};

if (postInfo.length) {
    postInfo.each(function() {
        var name = $(this).find('h2').text();
        var icons = [];

        $(this).find('.fontawesome-icon-list a').each(function() {
            var icon = $(this).find('i').attr('class').substring(3);
            icons.push(icon);
            msg.num += 1;

        });
        msg.list.push({
            name: name,
            icons: icons
        });
    });

} else {
    msg['error'] = '获取图标失败';

}

chrome.runtime.sendMessage(msg);

content_script.js的作用就是在页面插入一段脚本，将分类和图标写作数组，赋值给msg.list，然后将msg传给后台background

background.js

//获取当前域名
function getDomainFromUrl(url) {
    var host = "null";
    if (typeof url == "undefined" || null == url)
        url = window.location.href;
    var regex = /.*\:\/\/([^\/]*).*/;
    var match = url.match(regex);
    if (typeof match != "undefined" && null != match)
        host = match[1];
    return host;
}

//检测域名，显示插件图标
function checkForValidUrl(tabId, changeInfo, tab) {
    if (getDomainFromUrl(tab.url).toLowerCase() == "fontawesome.io") {
        chrome.pageAction.show(tabId);
    }
};

//监听地址栏变化
chrome.tabs.onUpdated.addListener(checkForValidUrl);

var iconData = {};
iconData.error = '请等待页面加载完毕……';

chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) {
    if (request.type !== 'fa-information') 
        return;
    iconData = request;
    
});

function submitIcons(){
    
    if (!iconData.error) {
        $.ajax({
            url: 'http://接口URL/font_awesome.php',
            cache: false,
            type: 'POST',
            data: JSON.stringify(iconData.list),
            dataType: 'text'
        }).done(function(msg) {
            alert(msg);
        }).fail(function(jqXHR, textStatus) {
            alert(textStatus);
        });
    }
}

给地址栏更新后加个监听，如果是fontawesome的网站则显示插件图标。

后台监听content传来的数据，确认是图标信息，赋值给iconData。

顺便写个提交采集的方法submitIcons，数据异步post给接口。

popup

popup.html

<link rel="stylesheet" type="text/css" href="popup.css">
<body>
<h2>Font Awsome 采集</h2>

<p id="loading">加载中...</p>
<div id="content">
    <div class="info">
        分类：
        <span id="list-length"></span>
        <br>
        图标：
        <span id="icon-length"></span>
    </div>
    <div class="btn">
        <button id="submit-btn">确认采集</button>
    </div>

</div>
</body>
<script src="jquery2.1.1.min.js"></script>
<script src="popup.js"></script>

popup.js

var bg = chrome.extension.getBackgroundPage();

document.addEventListener('DOMContentLoaded', function() {

    var data = bg.iconData;
    if (data.error) {
        $("#loading").text(data.error);
        $("#content").hide();
    } else {
        $("#loading").hide();
        $("#icon-length").text(data.num);
        $("#list-length").text(data.list.length);
    }

    $('#submit-btn').bind('click', function() {
        bg.submitIcons();
    })

});

popup和background交互是用chrome.extension.getBackgroundPage()

监听DOM加载完成后，通过popup窗口预览一下采集到的信息，给提交按钮绑定click事件，调用background的submitIcons方法。alert接口端响应。

以上就是这个扩展的全部内容，很久没用jQuery都有点生疏了。