需求
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都有点生疏了。
网友评论