文件目录
content.js
css.js
el32.png
el64.png
insert.js
manifest.json
content.js是扩展脚本。用于把页内脚本css.js和insert.js插入到页面。el32.png和el64.png是32px和64px的图标文件。mainfest.json是chrome配置文件。
废话不多说，上代码：
Ⅰ：manifest.json核心部分
{
"web_accessible_resources" : [
"insert.js",
"css.js"
],
"content_scripts" : [{
"matches" : ["*://eb.elong.com/*"],
"js" : ["content.js"]
}]
}
Ⅱ：content.js
扩展脚本。生成两个元素，直接插到页面内。
// 注入扩展js
var cssjs=document.createElement('script');//用于生产样式
cssjs.src=chrome.extension.getURL('css.js');
var insetjs=document.createElement("script");
insetjs.src = chrome.extension.getURL('insert.js');
//docHead是文档<head>元素
var docHead=document.head || document.getElementsByTagName('head')[0];
docHead.appendChild(cssjs);
docHead.appendChild(insetjs);
Ⅲ：insert.js
首先我们要准备好搜索的酒店数据。方法就是把酒店列表页面的数据，包括名称，链接地址放到localStorage。首先在搜索按钮后面加一个按钮来实现这个功能。生成元素：
//如果是设置当前酒店页面。就添加更新酒店按钮元素。其他页面不起作用
var hotelPage=new RegExp("CurrentHotels");
if(hotelPage.test(window.location.href)){
var espan=document.createElement("span");
var ea=document.createElement("a");
ea.setAttribute("class","blbtn");
ea.setAttribute("href","#");
ea.innerHTML="刷新酒店名单";
ea.addEventListener("click",reflushHotelList,false);
espan.appendChild(ea);
//页面结构分析这里就不多说了
document.querySelector(".pt50").appendChild(espan);
}else{ }
添加搜索按钮效果
点击后执行的函数reflushHotelList()
function reflushHotelList(){
localStorage.clear();//先清除本地数据，再重新写入
var list=document.querySelectorAll(".hotel");
for (var x=0;x<list.length;x++){
localStorage.setItem(list[x].innerHTML,list[x].href);
}
//我们分析网页代码发现，当前酒店的选项，并不是超链接。也就是说，以上代码储存的数据中，还缺少了当前的酒店。这就要求我们还要加上当前的酒店。再分析页面的代码和cookie。可以获得这些元素。
var currentHotelLink=list[0].href.replace(/\d{8}/,getCookie("currentHotelId"));//替换链接的ID
currentHotelLink=currentHotelLink.replace(/(hotelName=).+/i,"hotelName="+encodeURI(document.getElementById("hotelname").value));//替换酒店名称
localStorage.setItem(document.getElementById("hotelname").value,currentHotelLink);
}
//读取cookie，抄自http://www.runoob.com/js/js-cookies.html
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++){
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
接下来是关键词搜索框的生成和找准目标位置添加。当然，酒店列表也要有。
var aptarget=document.getElementById("header");//目标父元素
var ediv=document.createElement("div");//包含搜索框和酒店列表的div
ediv.id="jseDiv";
//添加酒店搜索框,并添加到#searchNul div
var eSearch=document.createElement("input");
eSearch.setAttribute("type","text");
eSearch.id="jseSearch";
eSearch.setAttribute("placeholder","搜索酒店");
eSearch.setAttribute("display","inline-block");
ediv.appendChild(eSearch);
//构造酒店列表ul,并添加到#searchNul div
var eul = document.createElement("ul");
eul.setAttribute("hidden", "true");
eul.id = "jseList";
ediv.appendChild(eul);
aptarget.insertBefore(ediv,aptarget.childNodes[3]);
搜索效果图
为了省去点击搜索框这一步，我们干脆给关键词搜索框绑定oninput事件。只要搜索框内容发生变化，就自动搜索。
//搜索框ID=jseSearch绑定oninput事件
var einput=document.getElementById("jseSearch");
if ("oninput" in einput) {
einput.addEventListener("input", filt, false);
} else {
//兼容IE
einput.onpropertychange = filt;
}
搜索到匹配结果之后，生成一个条目。每次关键词的值发生变化的时候。删除掉原来的结果。重新生成结果。处理逻辑如下：
function filt() {
var count=0;
eul.innerHTML="";
if (einput.value.length>0) {
var keyword = new RegExp(einput.value);
for (var xs = 0; xs < localStorage.length; xs++) {
var yes = keyword.test(localStorage.key(xs));
if (yes) {
var ea=document.createElement("a");
ea.href=localStorage.getItem(localStorage.key(xs));
var eli = document.createElement("li");
eli.setAttribute("class", "jseadd");
eli.setAttribute("display", "block");
eli.setAttribute("title", localStorage.key(xs));
var hotelNameTxt = document.createTextNode(localStorage.key(xs));
eli.appendChild(hotelNameTxt);
ea.appendChild(eli);
eul.appendChild(ea);
count++;
}
}
}
//这里不是必要的。只是显示匹配数目，体验比较好而已
document.getElementById("zh").innerHTML="<b style='color:#fff;background:blue;'>"+count+"</b>";
}
至此，我们需要的核心功能已经全部实现。剩下的就是一些元素显示和隐藏的优化。
//酒店列表的显示或者隐藏
function showUl() {
eul.hidden=false;
}
function hideUl() {
setTimeout("eul.hidden=true;",300);
}
//绑定事件，搜索框获得焦点，显示酒店列表，失去焦点，隐藏列表
einput.addEventListener("focus",showUl,false);
einput.addEventListener("blur",hideUl,false);
这里值得一提的是，插件刚开发成功的时候，效果不稳定。点击列表的时候，有时候正常跳转，有时候不能跳转。后来发现是酒店列表隐藏得时间设置得太短了。hideUl原来设置了执行时间为100ms，后来才更改为300ms。延长隐藏时间后，效果就很稳定了。
其他
目前我发现chrome内嵌文件是不能引入css文件的。只好用js文件生成css块。
var eStyle=document.createElement("style");
var cssText=document.createTextNode('\
#jseDiv{\
float: right;\
********************
background-color:#444}\
');
eStyle.appendChild(cssText);
document.head.appendChild(eStyle);
另一方面。关于清空元素的子元素。一直以来知道jQuery有这个功能。但是考虑到文件大小。不想引入jQuery，又在网上搜索一些方法。结果还是没有找到比较好的方法。后来灵光一闪，有了清空子元素的方法：
element.innerHTML="";
哈哈，一直到现在都为自己的便捷方法高兴。
最后
如果有帮到你，给我点个赞啦 (^_-)
想要完整的代码或者chrome插件？简讯我啦 (←_←)
