昨天写成了第一个 Chrome 扩展之后,手痒痒,想一鼓作气再写几个。正好室友在看考研信息,那个网站上做了表格的 hover 效果,鼠标指针移上去会变换背景颜色,室友觉得这个效果不错。所以我就写了个这样的扩展。今天花了一天的时间改了改,现在可以调整颜色和过渡时间了。下载:http://www.qblog.kilu.net/source/HoverHey.crx。(没有钱,本来想放到 Webstore 上去的,发现要先交5美元的注册费)

记录一下一些代码。

// 改变鼠标所在元素背景色。
var highlight = function(e){
  e = e || window.event;
  var _now = e.target || e.srcElement;
  oriBg = _now.style.backgroundColor;
  _now.style.backgroundColor = rgba;
  _now.style.webkitTransition = "background-color "+duration+"s ease-in-out";
};
window.addEventListener('mouseover', highlight);
// 向背景页面请求设置中保存的数据,其实就是交换json 。(因为脚本是inject 到页面中使用的,不能读取自身扩展的localStorage )
chrome.extension.sendRequest({askfor: "rgba"}, function(response){
  rgba = response.RGBA;
  duration = response.duration;
});
// 背景页面响应请求,发送设置数据。
chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse){
    if(request.askfor == "rgba"){
     sendResponse({"RGBA": rgba, "duration": duration});
   }else{
     sendResponse({"RGBA": rgba, "duration": duration});
   }
  }
);
// 设置页面,写入localStorage 。
_saveOptions = function(){
  var rgba = "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
  localStorage.setItem("duration", duration);
};
// localStorage 的用法与window 的一个属性一样,只要存取直接量就行了,不需要记住相关的函数。

使用了 jQuery 的部分比较简单(在成功了之后才觉得挺简单的),没有记录在内。