Chrome插件開發設計到background.js, content_scripts 等概念,這些自行百度,插件主要完成的功能就是把感興趣的標籤選出來,而後計算,使用到了jquery,content_scripts 代碼摘要以下jquery
(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;\">月售 </span><span>" + all.toFixed(2) + "</span>"); chrome.runtime.sendMessage(msg); }); 核心代碼就這麼多,第一次寫這麼漂亮的JS.
添加插件以後打開網頁是截圖以下,其中月售是插件添加的,是否是很酷 !!!!!chrome