记第一款Chrome小工具

    Chrome插件开发设计到background.js, content_scripts 等概念,这些自行百度,插件主要完成的功能就是把感兴趣的标签选出来,然后计算,使用到了jquery,content_scripts 代码摘要如下

(document).ready(function(){
	if(window.location.href.toLowerCase().indexOf("***") < 0){
		return;
	}
	var msg = {
		type: "menu_ready",
		title: $("div.main > section > span").text().trim()
	};
	var foodList = new Array();
	var all = 0; var map = {};
	$("div.list-wrap").each(function(){
		var item = {
			category: $(this).find("div.list-status > span").text(),
		};
		var menus = new Array();
		$(this).find("li.list-item").each(function(){
			var menu = {
				id: $(this).attr("data-sid"),
				name:$(this).find("div.info > h3").attr("data-title"),
				sold:getSold($(this).find("span.sales-count:last").text()),
				price:getPrice($(this).find("div.m-price,div.m-break").text())
			};
			menus.push(menu);
			if(!map[menu.id]){
				map[menu.id] = "1";
				all += menu.price * menu.sold;
			}
		});
		item["menus"] = menus;
		foodList.push(item);
	});
	msg["data"] = foodList;
	$("div.b-info > dl:first > dd").append("<span style=\"margin-left:4px;color:#999;\">月售&nbsp;&nbsp;</span><span>" + all.toFixed(2) + "</span>");
	chrome.runtime.sendMessage(msg);
});

核心代码就这么多,第一次写这么漂亮的JS.

添加插件之后打开网页是截图如下,其中月售是插件添加的,是不是很酷 !!!!!

记第一款Chrome小工具_第1张图片

你可能感兴趣的:(记第一款Chrome小工具)