chrome插件制作入门,资料,详细过程等.doc

第一部分基本资料
Getting Started 
1:目前不支持标准发布版本的Chrome插件扩展,不过也有消息马上就开发了,对于我们这个不是问题.4.0使用中 
2:创建一个所必要的文件夹,名字任意,用于存放所需文件,开发后,可以通过Chrome打包提交 
3:manifest.json文件,存放描述信息,也可以理解为插件运行的总入口,使用JSON的格式进行定义 
{ 
  "name": "My First Extension", //程序名称 
  "version": "1.0", //版本 
  "description": "The first extension that I made.",//描述 
  "browser_action": {//对浏览器的操作 
    "default_icon": "icon.png"//图标 
  }, 
  "permissions": [ //权限,用于定义所需的网络资源 
    " 
  ] 
} 
4:可以在browser_action中对功能进行添加 
"popup": "popup.html"//指定点击按钮后触发的行为, 

5:弹出的html扩展名文件,进行编写弹出窗编写,允许使用Js and css,使用的时候注意HTML必须包含在文件夹内 
尤其指出,其中可以使用HTML5标准的元素 
插件包含的文件 
1:manifest 文件,2:任意个HTML文件,3:JavaScript文件,4:图片Image文件 
打包后会被压缩成特殊格式的zip文件,扩展名为.crx 

background page :用于保存插件的主要逻辑, 
插件的逻辑分为: page action,browser action两种,,background.html文件的js同时控制两种action 

action,可以理解为动作,也就是浏览器表现出来的行为,如弹出窗一样 
browser_action 包括 a tooltip, a badge, and a popup. 

可以在Manifest文件中注册所需的browser action,其中default_icon为必须的,其他均为可选(or) 

UI部分 
Icon:大多图片格式都可以,推荐使用19像素的正方形图片,设置的方式分为两种,manifest文件内的default_icon,或者调用setIcon()方法 
Tooltip:设置manifest的default_title属性,或调用setTitle()方法 
Badge:用于在图标下显示的字符,字数限制在4个字符一下,可以通过setBadgeText() and setBadgeBackgroundColor()设置内容和背景色 
Popup:点击后弹出的窗口.定义在manifest文件中,browser_action的popup属性 

chrome.browserAction的常用方法,其中参数使用json对象,具体查看对应的API查询key 

setBadgeBackgroundColor: 设置Badge背景色 
chrome.browserAction.setBadgeBackgroundColor(object details); 

setBadgeText:Badge内容 
chrome.browserAction.setBadgeText(object details) 

setIcon:设置图标 
chrome.browserAction.setIcon(object details) 

shetTitle:设置Tooltip 
chrome.browserAction.setTitle(object details) 

browserAction的事件 
chrome.browserAction.onClicked.addListener(function(Tab tab) {...}); //将会在点击图标后触发 
//这里的参数,比Js多了一种类型 

2:为插件提供对应的options选项页面,在manifest文件中添加对应的options_page:选项,使用HTML 
"options_page": "options.html", 

所需的HTML可以为一个完整格式的HTML文档,包含所需的html元素 

Override界面: 用于替换新tab界面,区别于默认的界面,在manifest文件中进行注册 
"chrome_url_overrides": { 
    "newtab": "newtab.html" 
  }, 

Page Actions: 用于出现在指定页面中的图标 
"page_action": { 
    "default_icon": "icons/foo.png", // required 
    "default_title": "Do action",    // optional; shown in tooltip 
    "popup": "popup.html"            // optional 
  }, 
区别Browser action,page action并不包含badges,但是可以控制page action是否显示,通过调用 show() and hide() methods 

同样对browser的建议也适用与page action; 

一些常见Page action的方法 
hide;  
chrome.pageAction.hide(integer tabId) 
setIcon 
chrome.pageAction.setIcon(object details) 
setTitle 
chrome.pageAction.setTitle(object details) 
show 
chrome.pageAction.show(integer tabId) 
事件,类似browser action的事件 
onClicked 
chrome.pageAction.onClicked.addListener(function(tab) {...}); 

Themes皮肤 
也是打包成标准的扩展组件,但是并不包含对应的JS和HTML代码,只用主要的manifest.json文件进行设置 
{ 
  "version": "2.6", 
  "name": "camo theme", 
  "theme": { 
    "images" : { 
      "theme_frame" : "images/theme_frame_camo.png", 
      "theme_frame_overlay" : "images/theme_frame_stripe.png", 
      "theme_toolbar" : "images/theme_toolbar_camo.png", 
      "theme_ntp_background" : "images/theme_ntp_background_norepeat.png", 
      "theme_ntp_attribution" : "images/attribution.png" 
    }, 
    "colors" : { 
      "frame" : [71, 105, 91], 
      "toolbar" : [207, 221, 192], 
      "ntp_text" : [20, 40, 0], 
      "ntp_link" : [36, 70, 0], 
      "ntp_section" : [207, 221, 192], 
      "button_background" : [255, 255, 255] 
    }, 
    "tints" : { 
      "buttons" : [0.33, 0.5, 0.47] 
    }, 
    "properties" : { 
      "ntp_background_alignment" : "bottom" 
    } 
  } 
} 

默认皮肤,可以通过下面的链接进行查看 
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provider.cc 

其中tints中,使用 Hue-Saturation-Lightness  灰度 饱和 亮度进行设置,值都是在0-1之间 

浏览器交互: Browser Interaction 
Bookmarks,Events,Tabs,Windows等 

Bookmarks,收藏夹,可以创建,组织和管理收藏夹 
设置权限: manifest文件中 
"permissions": [ 
    "bookmarks" 
  ], 
收藏夹使用tree的形式保存对象,其中主要使用 BookmarkTreeNode对象进行访问,常用的属性有:index, title, and url. 

注:树结构本身比较繁琐一些,可以使用下面方法参考进行访问 
    function btnclick(){ 
    chrome.bookmarks.getTree(function(ass){ 
    console.log(ass[0].children[0]); 
          for(obj in ass[0].children[0].children){ 
          console.log(ass[0].children[0].children[obj].title); 
          } 
    }) 
    } 
建议先查看debug方法(ps:比较繁琐,但是配合console.log比较方便查看对象结构) 

其中的id使用的也是自增,由0开始 
常见的方法  
create , get getChildren getTree move remove removeTree search update 
常见的事件 

常见的事件 
onChanged onChildrenReordered onCreated onMoved onRemoved 

使用的例子: 
chrome.bookmarks.onMoved.addListener(...) 
chrome.bookmarks.getTree(...) //具体请查看API 

Event事件的使用例子 
chrome.tabs.onCreated.addListener(function(tab) { 
  appendToLog('tabs.onCreated --' 
              + ' window: ' + tab.windowId 
              + ' tab: '    + tab.id 
              + ' index: '  + tab.index 
              + ' url: '    + tab.url); 
}); 
注意加载对应的permissions权限 tabs 
事件的全部操作方法: 
void addListener(function callback(...)) 
void removeListener(function callback(...)) 
bool hasListener(function callback(...)) 

Tabs  用于控制每个标签 , 调用时为chrome.tabs 
常见的方法: 
captureVisibleTab connect create detectLanguage executeScript get getAllInWindow getSelected insertCSS move remove sendRequest update 

常见的事件: 
onAttached onCreated onDetached onMoved onRemoved onSelectionChanged onUpdated 

Windows  Chrome中的多窗口 

方法调用中可选的windowId参数,默认为当前窗口 

调用对象: chrome.windows 

常见的方法: create get getAll getCurrent getLastFocused remove update 
常见的事件:onCreated onFocusChanged onRemoved 

Background Pages, 注册在manifest文件中,用于保存长时间运行的脚本,运行在插件所在的进程中,多用于类似守护线程一样的作用,用于状态的更新 
获取页面的方式: 
var views = chrome.extension.getViews(); //获取到的数组,通过循环或者索引得到指定的view也就是js的windows对象,不过这里只局限配置在manifest中的html元素 
"background_page": "background.html", 

Content Scripts 用于对指定页面的内容进行脚本调用 
同样 需要在manifest文件中进行注册 
  "content_scripts": [ 
    { 
      "matches": [" 
      "css": ["mystyles.css"], 
      "js": ["jquery.js", "myscript.js"] 
    } 
  ], 

常见的属性: 
matches, 字符串数组,根据制定的匹配模式进行对指定URL页面的注入 
js:指定的脚本文件将会被注入到符合的页面中去 可选 
css:需要被嵌入的css,可选 
run_at:用于设置何时进行注入,默认为document_idle,还有其他的:document_start,document_end, 
all_frames:boolean 默认为false 

使用的方式可以参考官方文档,不过注意并不能简单的替换同名function来达到注入替换事件的效果,不过可以直接使用document.getElementById获取指定的dom组件,并进行修改. 
作用域的问题上: 对于原有的变量并不能访问到,如果需要进行替换,需要进行完整的事件,变量进行重新声明替换 
比较特殊的作用域:对于注入的代码,将会有一个封闭的作用域,并不会与原有的进行冲突,当却可以修改页面的DOM元素 

为页面元素添加插件内图片的例子 
var imgURL = chrome.extension.getURL("images/myimage.png"); 
document.getElementById("someImage").src = imgURL; 

Cross-Origin XMLHttpRequest 跨站点的异步调用,用于使用插件访问其他网站的API 
分为本地与外部数据两种方面 

本地插件内数据:不需要设置权限 
var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = handleStateChange; // Implemented elsewhere. 
xhr.open("GET", chrome.extension.getURL('/config_resources/config.json'), true); 
xhr.send(); 
注:0表示本地请求成功 

外部网站,需要设置manifest文件中permissions,添加对应的网站地址,更多使用在插件内部功能上 
"permissions": [ 
    " 
  ], 
对于匹配的URL也可以使用模糊匹配 
"http://* 
"http://*/"  表示允许访问所有的网站 ,这里注意对https也要独立的编写 
内置的json转换 JSON.parse(....);可以用于将制定的字符串,转换成所需的js对象 

再次提示,如果需要访问其他网站,一定注意添加权限permissions 

Message Passing 消息传递 

Simple one-time requests:发送一个简单的json数据从一个content script发送到插件的background.html文件中,反之亦然 
chrome.extension.sendRequest() 或 chrome.tabs.sendRequest() methods 
可选的一个回调函数,可以用于接收返回的内容 
如:定义在content script文件中 
chrome.extension.sendRequest({greeting: "hello"}, function(response) { 
  console.log(response.farewell); 
}); 
在background发送使用特殊一些,需要使用getSelected获取选中的tab后,然后发送请求 
chrome.tabs.getSelected(null, function(tab) { 
  chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) { 
    console.log(response.farewell); 
  }); 
}); 

接收的代码为: 
chrome.extension.onRequest.addListener( 
  function(request, sender, sendResponse) { 
    console.log(sender.tab ? 
                "from a content script:" + sender.tab.url : 
                "from the extension"); 
    if (request.greeting == "hello") 
      sendResponse({farewell: "goodbye"}); 
    else 
      sendResponse({}); // snub them. 
  }); 

Long-lived connections 长周期连接 
能够保持连接,持续的进行数据收发 
从content script 连接到background(插件)的代码 
var port = chrome.extension.connect({name: "knockknock"}); 
port.postMessage({joke: "Knock knock"}); 
port.onMessage.addListener(function(msg) { 
  if (msg.question == "Who's there?") 
    port.postMessage({answer: "Madame"}); 
  else if (msg.question == "Madame who?") 
    port.postMessage({answer: "Madame... Bovary"); 
}); 

如果要从background插件处发起连接,需要稍作修改,去获取指定的id 
chrome.tabs.connect(tabId, {name: "knockknock"}). 
设置监听连接的监听器 
chrome.extension.onConnect.addListener(function(port) { 
  console.assert(port.name == "knockknock"); 
  port.onMessage.addListener(function(msg) { 
    if (msg.joke == "Knock knock") 
      port.postMessage({question: "Who's there?"}); 
    else if (msg.answer == "Madame") 
      port.postMessage({question: "Madame who?"}); 
    else if (msg.answer == "Madame... Bovary") 
      port.postMessage({question: "I don't get it."}); 
  }); 
}); 

对应的监听断开方法Port.disconnect(),和对应的事件Port.onDisconnect 

Cross-extension messaging 跨插件消息 
主要使用chrome.extension.onRequestExternal or chrome.extension.onConnectExternal 
方法的细节与上述的连接事件一致 

这里还是提到一下跨站点Js攻击的问题,少使用eval转换返回的字符串,而建议使用专门的JSON.parse方法 

NPAPI Plugins 用于提供Js调用本地二进制代码 ,建议最后使用,也许功能很强大. 

Autoupdating和Packaging章节略过 

因为Chrome开发自WebKit,所以可以调用其特有的API 
V8 Js引擎也为chrome提供了JSON对象 
可以在插件内部集成所需的JS插件,如jQuery 
第二部分编写一个基本插件
首先，新建一个文件夹，取名PixivDayRanking（我插件的名字），这个文件夹就是这个插件的根目录，涉及到的所有文件都应该在这个文件夹内。

第一步，创建一个名字叫做manifest.json的文件，用记事本打开编辑，输入以下内容：
{
  "name": "Pixiv日榜排名插件测试版",           /程序名称
  "version": "1.0",                            //版本信息
  "description": "该插件用于查看Pixiv日榜排名",//程序描述
  "background_page": "background.html",        //这个html页面用来保存插件的主要逻辑
  "permissions": [                             //权限设置，用来定义所需的网络信息，实现跨越
"tabs", "http:/*","notifications"
],
  "browser_action": {                          //浏览器行为
    "default_icon": "icon.gif",                //在浏览器上的小图标
   "popup": "PixivRanking.html"        //点击上面的小图标后弹出的那个小窗口页面
  }
}
这个文件相当于整个插件的配置文件，用于配置这个插件所需的一些信息、资源。上面的注释提供了一些简单的描述。chrome插件的所有配置信息可以去官网查看，还有很多其他类型的配置信息，这里就不多讲了。

下面我们要开始编写整个插件最重要的一个文件：background.html了。在这个文件中，我将编写这个插件的主要逻辑代码，使用了jQuery库，用到了Ajax方法。因为在chrome里面支持跨域，所以用起来很方便。另外，chrome支持HTML5，所以放心的使用HTML5的一些功能吧！这个文件的结构如下：
<html>
<head>
<script src=" 
type="text/javascript"></script>
<script type="text/javascript">
//获取数据的主体方法
function GetRankList(){
}
//获取字符串长度
function getLength(str) { 
     }
     //过滤掉页面上一些标签、脚本、IFrame、CSS引用等
     function stripAllscript(s) { 
     }
     function stripBody(s){
     }
     function stripIframe(s){
     }
     function stripLink(s){
     }
</script>
</head>
<body>
<div>
<ul id="showChrome">
</ul>
</div>
</body>
</html>
可以看出来，这根一个普通的html页面基本没什么区别。下面主要讲一下GetRankList方法，其他几个方法无非就是截取字符，去除一些对本插件功能无用的一些标签而已，实现起来没什么难度，就不贴代码了: )
function GetRankList(){
//首页获取日榜
$.get(" function(data, textStatus){
if(textStatus == "success"){
var content = null;
var reg = '</head>';
var len1 = data.indexOf(reg);
content = data.substring(len1+getLength(reg));
content = stripAllscript(content);
content = stripAllscript(content);//去除所有脚本
content = stripIframe(content);//去除iframe
content = stripLink(content);//去除<link>标签
content = stripBody(content); //去除闭合body和html
content = content.replace("</body>","").replace("</html>","");
$("#showChrome").html(content);
//P站登录跟未登录 排名模块用的不同DOM
var rankList = $("#showChrome .ranklist").html();
if(rankList == null){
rankList = $("#showChrome .ranking:eq(0)");
var fristThreeRankItems = rankList.find(".rank-detail");
fristThreeRankItems.each(function(){
var item = $(this);
item.find("a:eq(0)").addClass("ran_img");
var newHtml = item.find("h2").html()+"<br>"+item.find(".user").html()+"<br>"+"<span class='ranknum'>"+ item.find(".rank").html() +"</span>";
item.find("h2").remove();
item.find(".rank").remove();
item.find(".user").remove();
item.append("<p class='ran_text'>"+ newHtml + "</p><div class='clear'></div>");
});
var smallRankItems = rankList.find("li[class='rank']");
smallRankItems.each(function(){
var item = $(this);
var newHtml = "<span class='ranknumsmall'>"+                                                                    item.find(".rank").html() +"</span>";
item.find(".rank").remove();
item.find("a").before(newHtml);
});
rankList.find("li").removeClass();
rankList = $("#showChrome .ranking:eq(0)").html();
}
$("#showChrome").html(rankList);
$("#showChrome img").each(function(){
var src = $(this).attr("data-src");
$(this).attr("src", src);
$(this).removeAttr("data-src");
});
$("#showChrome a").each(function(){
var href = " + $(this).attr("href");
$(this).attr("href", href).attr("target", "_blank");
});
var rankList = $("#showChrome").html();
if(localStorage["repData"] != null){
if(localStorage["repData"] != rankList){
localStorage["repData"] = rankList;
}
}
else{
localStorage["repData"] = rankList;
}
}
else{
localStorage["repData"] = null;
}
});
}
简单讲一下这个方法的思路：
首先通过jQuery ajax去获取目标页面整个页面的内容。
去除不需要的脚本标签、link标签、iframe等等。
通过jQuery解析所需要的数据，然后重新组装成需要的结构。这里碰到过一个问题，那就是Pixiv（就是我获取的目标页面的网站）的首页dom结构，登录与非登录状态下，结构不一样，虽然只是标签跟样式换了下，但处理起来还是很麻烦...我这里只是做了个简单的判断，然后单独处理。这种方式虽然逻辑简单，但是代码量太多了。后面如果找到了更好的方法，我将更新这个方法。
最终，我组装出了所需要的数据结构，这里我使用了HTML5的localStorage本地存储，讲这个数据结构保存到localStorage中去，供插件的popup页面调用。

OK，到这里为止，这个插件的核心已经编写完毕。接下来就是用popup页面输出这个结果。
接下来创建一个名字叫做PixivRanking.html的文件，用记事本编辑打开，输入下面的代码：
<style type="text/css">
</style>
<!DOCTYPE html>
<body>
<ul class="listUl" id="rankPlace" ranktype="day"></ul>
</body>
<script src=" type="text/javascript"></script> 
<script language="javascript">
var background = chrome.extension.getBackgroundPage();
background.GetRankList();
//background.GetNewManList();
if(localStorage["repData"] === "null"){
$("#rankPlace").html("数据传输出错了喵！");
    }
else{
        $("#rankPlace").html(localStorage["repData"]);
$("#rankPlace").append("<a class='linkMore' href=' target='_blank'>更多</a>");
    }
$("li:even").css("background","#F8F8F8");
$(".changeRank").bind("click",function(){
var ranktype = $(this).attr("ranktype");
//alert(ranktype);
$("[ranktype=" + ranktype + "]").css("display","block");
$(".listUl").not("[ranktype=" + ranktype + "]").css("display","none");
});
</script>
可以看出来，这特么就是一个html页面啊！css代码我就不贴了，有骗字数的嫌疑...
这里的思路是：
先准备好一个容器：<ul id="rankPlace"></ul>，用于最终输出数据；
chrome.extension.getBackgroundPage()，用来获取插件的BackgroundPage对象，也就是上面我们创建的那个background.html。这个方法是chrome的扩展API，详细可以查看官方API文档，这里不做过多解释；
取到BackgroundPage对象后，就可以访问到background.html中的方法了！是不是