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

《chrome插件制作入门,资料,详细过程等》由会员分享，可在线阅读，更多相关《chrome插件制作入门,资料,详细过程等（28页珍藏版）》请在装配图网上搜索。

1、第一部分基本资料Getting Started1:目前不支持标准发布版本的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: /对浏览器的

2、操作 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文件,扩展名为.crxbackground page

3、 :用于保存插件的主要逻辑,插件的逻辑分为: page action,browser action两种,background.html文件的js同时控制两种actionaction,可以理解为动作,也就是浏览器表现出来的行为,如弹出窗一样browser_action 包括 a tooltip, a badge, and a popup.可以在Manifest文件中注册所需的browser action,其中default_icon为必须的,其他均为可选(or)UI部分Icon:大多图片格式都可以,推荐使用19像素的正方形图片,设置的方式分为两种,manifest文件内的default_icon

4、,或者调用setIcon()方法Tooltip:设置manifest的default_title属性,或调用setTitle()方法Badge:用于在图标下显示的字符,字数限制在4个字符一下,可以通过setBadgeText() and setBadgeBackgroundColor()设置内容和背景色Popup:点击后弹出的窗口.定义在manifest文件中,browser_action的popup属性chrome.browserAction的常用方法,其中参数使用json对象,具体查看对应的API查询keysetBadgeBackgroundColor: 设置Badge背景色chrome.

5、browserAction.setBadgeBackgroundColor(object details);setBadgeText:Badge内容chrome.browserAction.setBadgeText(object details)setIcon:设置图标chrome.browserAction.setIcon(object details)shetTitle:设置Tooltipchrome.browserAction.setTitle(object details)browserAction的事件chrome.browserAction.onClicked.addListene

6、r(function(Tab tab) .); /将会在点击图标后触发/这里的参数,比Js多了一种类型2:为插件提供对应的options选项页面,在manifest文件中添加对应的options_page:选项,使用HTMLoptions_page: options.html,所需的HTML可以为一个完整格式的HTML文档,包含所需的html元素Override界面: 用于替换新tab界面,区别于默认的界面,在manifest文件中进行注册chrome_url_overrides: newtab: newtab.html ,Page Actions: 用于出现在指定页面中的图标page_act

7、ion: 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(inte

8、ger tabId)setIconchrome.pageAction.setIcon(object details)setTitlechrome.pageAction.setTitle(object details)showchrome.pageAction.show(integer tabId)事件,类似browser action的事件onClickedchrome.pageAction.onClicked.addListener(function(tab) .);Themes皮肤也是打包成标准的扩展组件,但是并不包含对应的JS和HTML代码,只用主要的manifest.json文件进行设

9、置 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

10、.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/viewv

11、c/chrome/trunk/src/chrome/browser/browser_theme_provider.cc其中tints中,使用 Hue-Saturation-Lightness 灰度 饱和 亮度进行设置,值都是在0-1之间浏览器交互: Browser InteractionBookmarks,Events,Tabs,Windows等Bookmarks,收藏夹,可以创建,组织和管理收藏夹设置权限: manifest文件中permissions: bookmarks ,收藏夹使用tree的形式保存对象,其中主要使用 BookmarkTreeNode对象进行访问,常用的属性有:inde

12、x, title, and url.注:树结构本身比较繁琐一些,可以使用下面方法参考进行访问 function btnclick() chrome.bookmarks.getTree(function(ass) console.log(ass0.children0); for(obj in ass0.children0.children) console.log(ass0.children0.childrenobj.title); ) 建议先查看debug方法(ps:比较繁琐,但是配合console.log比较方便查看对象结构)其中的id使用的也是自增,由0开始常见的方法create , ge

13、t getChildren getTree move remove removeTree search update常见的事件常见的事件onChanged onChildrenReordered onCreated onMoved onRemoved使用的例子:chrome.bookmarks.onMoved.addListener(.)chrome.bookmarks.getTree(.) /具体请查看APIEvent事件的使用例子chrome.tabs.onCreated.addListener(function(tab) appendToLog(tabs.onCreated - + wi

14、ndow: + 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 det

15、ectLanguage executeScript get getAllInWindow getSelected insertCSS move remove sendRequest update常见的事件:onAttached onCreated onDetached onMoved onRemoved onSelectionChanged onUpdatedWindows Chrome中的多窗口方法调用中可选的windowId参数,默认为当前窗口调用对象: chrome.windows常见的方法: create get getAll getCurrent getLastFocused rem

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

17、页面的内容进行脚本调用同样 需要在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使用的方式可以参考官方文档

18、,不过注意并不能简单的替换同名function来达到注入替换事件的效果,不过可以直接使用document.getElementById获取指定的dom组件,并进行修改.作用域的问题上: 对于原有的变量并不能访问到,如果需要进行替换,需要进行完整的事件,变量进行重新声明替换比较特殊的作用域:对于注入的代码,将会有一个封闭的作用域,并不会与原有的进行冲突,当却可以修改页面的DOM元素为页面元素添加插件内图片的例子var imgURL = chrome.extension.getURL(images/myimage.png);document.getElementById(someImage).sr

19、c = 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表示本地请求成功外部网站,需要设置ma

20、nifest文件中permissions,添加对应的网站地址,更多使用在插件内部功能上permissions: ,对于匹配的URL也可以使用模糊匹配http:/*http:/*/ 表示允许访问所有的网站 ,这里注意对https也要独立的编写内置的json转换 JSON.parse(.);可以用于将制定的字符串,转换成所需的js对象再次提示,如果需要访问其他网站,一定注意添加权限permissionsMessage Passing 消息传递Simple one-time requests:发送一个简单的json数据从一个content script发送到插件的background.html文件中

21、,反之亦然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, functio

22、n(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.gr

23、eeting = 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 (

24、msg.question = Whos there?) port.postMessage(answer: Madame); else if (msg.question = Madame who?) port.postMessage(answer: Madame. Bovary););如果要从background插件处发起连接,需要稍作修改,去获取指定的idchrome.tabs.connect(tabId, name: knockknock).设置监听连接的监听器chrome.extension.onConnect.addListener(function(port) console.asse

25、rt(port.name = knockknock); port.onMessage.addListener(function(msg) if (msg.joke = Knock knock) port.postMessage(question: Whos there?); else if (msg.answer = Madame) port.postMessage(question: Madame who?); else if (msg.answer = Madame. Bovary) port.postMessage(question: I dont get it.); ););对应的监听

26、断开方法Port.disconnect(),和对应的事件Port.onDisconnectCross-extension messaging 跨插件消息主要使用chrome.extension.onRequestExternal or chrome.extension.onConnectExternal方法的细节与上述的连接事件一致这里还是提到一下跨站点Js攻击的问题,少使用eval转换返回的字符串,而建议使用专门的JSON.parse方法NPAPI Plugins 用于提供Js调用本地二进制代码 ,建议最后使用,也许功能很强大.Autoupdating和Packaging章节略过因为Chro

27、me开发自WebKit,所以可以调用其特有的APIV8 Js引擎也为chrome提供了JSON对象可以在插件内部集成所需的JS插件,如jQuery第二部分编写一个基本插件首先，新建一个文件夹，取名PixivDayRanking（我插件的名字），这个文件夹就是这个插件的根目录，涉及到的所有文件都应该在这个文件夹内。第一步，创建一个名字叫做manifest.json的文件，用记事本打开编辑，输入以下内容：name: Pixiv日榜排名插件测试版, /程序名称version: 1.0, /版本信息description: 该插件用于查看Pixiv日榜排名,/程序描述background_page:

28、background.html, /这个html页面用来保存插件的主要逻辑permissions: /权限设置，用来定义所需的网络信息，实现跨越tabs, http:/*,notifications,browser_action: /浏览器行为default_icon: icon.gif, /在浏览器上的小图标popup: PixivRanking.html /点击上面的小图标后弹出的那个小窗口页面这个文件相当于整个插件的配置文件，用于配置这个插件所需的一些信息、资源。上面的注释提供了一些简单的描述。chrome插件的所有配置信息可以去官网查看，还有很多其他类型的配置信息，这里就不多讲了。下面

29、我们要开始编写整个插件最重要的一个文件：background.html了。在这个文件中，我将编写这个插件的主要逻辑代码，使用了jQuery库，用到了Ajax方法。因为在chrome里面支持跨域，所以用起来很方便。另外，chrome支持HTML5，所以放心的使用HTML5的一些功能吧！这个文件的结构如下：/获取数据的主体方法function GetRankList()/获取字符串长度function getLength(str) /过滤掉页面上一些标签、脚本、IFrame、CSS引用等function stripAllscript(s) function stripBody(s)function

30、 stripIframe(s)function stripLink(s)可以看出来，这根一个普通的html页面基本没什么区别。下面主要讲一下GetRankList方法，其他几个方法无非就是截取字符，去除一些对本插件功能无用的一些标签而已，实现起来没什么难度，就不贴代码了: )function GetRankList()/首页获取日榜$.get( function(data, textStatus)if(textStatus = success)var content = null;var reg = ;var len1 = data.indexOf(reg);content = data.su

31、bstring(len1+getLength(reg);content = stripAllscript(content);content = stripAllscript(content);/去除所有脚本content = stripIframe(content);/去除iframecontent = stripLink(content);/去除标签content = stripBody(content); /去除闭合body和htmlcontent = content.replace(,).replace(,);$(#showChrome).html(content);/P站登录跟未登录

32、排名模块用的不同DOMvar 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()+item

33、.find(.user).html()+ item.find(.rank).html() +;item.find(h2).remove();item.find(.rank).remove();item.find(.user).remove();item.append(+ newHtml +););var smallRankItems = rankList.find(liclass=rank);smallRankItems.each(function()var item = $(this);var newHtml = + item.find(.rank).html() +;item.find(.

34、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(fu

35、nction()var href = + $(this).attr(href);$(this).attr(href, href).attr(target, _blank););var rankList = $(#showChrome).html();if(localStoragerepData != null)if(localStoragerepData != rankList)localStoragerepData = rankList;elselocalStoragerepData = rankList;elselocalStoragerepData = null;);简单讲一下这个方法的

36、思路：首先通过jQuery ajax去获取目标页面整个页面的内容。去除不需要的脚本标签、link标签、iframe等等。通过jQuery解析所需要的数据，然后重新组装成需要的结构。这里碰到过一个问题，那就是Pixiv（就是我获取的目标页面的网站）的首页dom结构，登录与非登录状态下，结构不一样，虽然只是标签跟样式换了下，但处理起来还是很麻烦.我这里只是做了个简单的判断，然后单独处理。这种方式虽然逻辑简单，但是代码量太多了。后面如果找到了更好的方法，我将更新这个方法。最终，我组装出了所需要的数据结构，这里我使用了HTML5的localStorage本地存储，讲这个数据结构保存到localStor

37、age中去，供插件的popup页面调用。OK，到这里为止，这个插件的核心已经编写完毕。接下来就是用popup页面输出这个结果。接下来创建一个名字叫做PixivRanking.html的文件，用记事本编辑打开，输入下面的代码：var background = chrome.extension.getBackgroundPage();background.GetRankList();/background.GetNewManList();if(localStoragerepData = null)$(#rankPlace).html(数据传输出错了喵！);else$(#rankPlace).htm

38、l(localStoragerepData);$(#rankPlace).append(更多);$(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););可以看出来，这特么就是一个html页面啊

39、！css代码我就不贴了，有骗字数的嫌疑.这里的思路是：先准备好一个容器：，用于最终输出数据；chrome.extension.getBackgroundPage()，用来获取插件的BackgroundPage对象，也就是上面我们创建的那个background.html。这个方法是chrome的扩展API，详细可以查看官方API文档，这里不做过多解释；取到BackgroundPage对象后，就可以访问到background.html中的方法了！是不是很方便！这是chrome插件开发中的一个重要技巧，就是可以互相调用不同页面中的js方法；最后用脚本访问localStorage，将取到的数据插入到之

40、前准备好的标签容器中。OK大功告成！额，等等，怎样才能看到效果呢？！好吧，最后一步，打开chrome，点击右上角的扳手-工具-扩展程序，然后在扩展程序页面中，勾选开发人员模式这个勾选框，然后点击载入正在开发的扩展程序，然后选到最先创建的那个PixivDayRanking文件夹。然后chrome上就有了一个小图标！真帅！赶紧点击看看！这简直酷毙了！怎么样，有没有觉得写一个chrome插件很简单呢？基本跟普通前端开发没有什么太大的区别，唯一需要熟悉的就是manifest的配置以及chrome浏览器的一些API。赶紧动手来制作你自己的chrome插件吧！ : )第三部分编写插件详细过程Chrome的

41、更新速度可以说前无古人，现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本。界面清爽、操作人性化、网络备份资料和快速的启动速度令我爱不释手，还有它拥有众多的扩展程序，相对于firefox的插件来说，数量上和质量上稍显不足，但相信chrome将会很快在扩展上超越firefox，firefox上内存占用上实在不令人满意，也许我使用firefox的一个原因就是因为firebug，不过相信chrome平台的类firebug插件也会很快出现。Chrome的扩展开发十分简单，我们只需要掌握web开发的htm+CSS+Javascript，就能很快开发出自己的扩展。你需要了解的内容在开发前首先

42、要掌握一些基础知识。1、Chrome扩展文件Chrome扩展文件以.crx为后缀名，在Google Chrome扩展官方网站下载扩展时，Chrome会将.crx文件下载到Chrome的Application Data文件夹的User DataTemp下，一般是C:Documents and SettingsUserLocal SettingsApplication DataGoogleChromeUser DataTemp，安装完成或者取消安装，该文件就会被删除。.crx实际上是一个压缩文件，使用解压文件打开这个文件就可以看到其中的文件目录，下图中是“关灯看视频”扩展的截图：因此可以认为，我们

43、实际上就是写一个Web应用，然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。2、Browser Actions（扩展图标）把Browser Actions翻译成扩展图标不是很准确，但它的功能就是把你的应用显示在Chrome工具栏上。我们在上面看到一个文件manifest.json，就是使用这个文件来把相应的图标和其他参数注册到Browser Actions。比如下图中就是EverNote的扩展图标。3、Page Actions（地址栏图标）如果你熟悉一些Chrome插件的话，你一定会发现有些扩展的图标不是显示在地址栏的右边，而是显示在地址内部右方，这就是Page Actio

44、ns地址栏图标。可以看出上面中有三个Page Actions，图中我标出的是Chrome添加书签，现在你就会发现其实这个也是Chrome的扩展，只不是它是直接内置在Chrome的。Page Actions与Browser Actions的区别就是Page Actions不是随时都是显示的，必须在特定的页面中这个功能才能使用。因此在开发中注意：如果不是全部页面中都能使用的功能请使用Page Actions方式。4、popup弹出窗口popup属于Browser Actions，当点击图标时出现这个窗口，可以在里面放置任何html元素，它的宽度是自适应的。当然，这个弹出窗口不会被Chrome拦截的

45、:)如下图中是evernote的popup窗口：5、Background Pages后台页面这个窗口不会显示，它是扩展程序的后台服务，它会一直保持运行。比如在一些需要数据保存程序中，如果当前用户关闭popup，就需要Background Pages来进行相应的操作。自己动手做一个我们以一个简单的任务管理程序来一步步讲解。上图是界面实现，我们首先完成界面的显示部分，首先建立一个新文件夹，以扩展应用的名称为标题，我们这里的应用叫做MyTaskList。然后把找一个图标文件，放到文件夹中，也可直接右键下载我的这个图标：图标文件不要小于19px*19px，但最好也不要超过这个尺寸，虽然大图它会自适应，

46、但会使得应用文件变大。然后完成和未完成状态的两个图标放到资源文件中，可以建立任意文件夹放进去，因为CSS文件把定义它们的路径。建立manifest.json来定义我们程序配置：? name: MyTaskList, version: 0.9.0, description: Management my everydays task lists., browser_action: default_icon: icon.png,default_title: My Task List,default_popup: popup.html 其中name代表应用程序名，version代表版本号，descri

47、ption代表功能描述。这些在安装扩展后就能看到，见下图：browser_action代表扩展图标段显示，它会定义图标地址、标题（也就是鼠标悬停提示）和默认的popup页面。我们这里定义的popup页面为popup.html。接下来开始定义popup.html显示，它不需要使用、和标签，可以直接写上样式、脚本和html。我们的popup.html源码为：?*margin:0;padding:0;bodycolor:#333;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;imgmargin:0

48、4px;#addItemDivcolor:#ccc;.hidedisplay:none;.showdisplay:block;.taskItemcursor:pointer;inputwidth:100%;label.onwidth:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;label.offwidth:12px; display:inline-block; height:12px; background:url(images/bg_task_

49、off.gif) no-repeat 0px 2px;添加新项新任务已完成任务打开预览，样子就已经出来了：这样我们文件就已经建立完成，文件列表如下：现在就可以先尝试把它打包装到自己的Chrome里。首先打开Chrome-工具-扩展程序，展开开发人员模式，打到“打包扩展程序”按钮：点击“打包扩展程序”，弹出打包选择文件窗口，在扩展程序根目标中找到我们建立的文件夹，私有密码文件第一次不用选择：点击确定，它会在根文件夹同一级生成MyTaskList.crx和MyTaskList.pem，MyTaskList.pem是程序签名文件，以新版本的开发中还需要这个文件，不要删除它。把MyTaskList.c

50、rx拖进Chrome窗体内，就会把这个应用MyTaskList安装在Chrome里。我们的这个简单的模型就能看到效果了，下一节我们就会完善其中的代码。手把手教你开发Chrome扩展二：为html添加行为上一节我们已经讲了Chrome扩展的基础知识，并构建了基础的html，这一节我们将就html DOM添加部分添加脚本，即脚本在我们的popup页面中进行的操作，页面所产生的变化。正常情况下数据处理加载完成状态，这些数据是从本地数据读取的。点击“添加新项”，出现输入框，输入文字后回车提交数据：添加完成后将数据存储，同时添加DOM元素：考虑到功能最简化处理，点击已标为完成的任务，将提示“删除或重置为

51、未完成”：以上功能为最核心功能，可以在此基础上进行扩展，比如任务分组，修改任务，任务提醒，网络同步数据等等。下面开始相应的脚本内容。为了避免全局变量，使用匿名函数方式，所有事件处理及数据绑定均在此函数中进行，同时定义与jQuery中的$()类似的函数：?(function()var$=function(id)returndocument.getElementById(id);)();建立Tasks对象，定义show()函数和hide()函数，同时存储几个常用的DOM对象。?varTasks = show:function(obj)obj.className=;returnthis;,hide:

52、function(obj)obj.className=hide;returnthis;,/存储dom$addItemDiv:$(addItemDiv),$addItemInput:$(addItemInput),$txtTaskTitle:$(txtTaskTitle),$taskItemList:$(taskItemList)其中show()函数和hide()函数均使用了链式调用，每次执行此函数均会返回对象本身，这样对象就可以使用形如类似jQuery书写方式来使用此函数。然后注册事件：?/./初始化init:function()/*注册事件*/打开添加文本框Tasks.$addItemDiv.addEventListener(click,function()Tasks.show(Tasks.$addItemInput).hide(Tasks.$addItemDiv);Tasks.$txtTaskTitle.focus();,true);/回车添加Tasks.$txtTaskTitle