当前位置：搜档网 › Chrome 插件开发

Chrome 插件开发

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": [ //权限,用于定义所需的网络资源

"https://www.sodocs.net/doc/6e5242208.html,/"

]

}

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个字符一下,可以通过setBadgeT ext() and setBadgeBackgroundColor()设置内容和背景色

Popup:点击后弹出的窗口.定义在manifest文件中,browser_action的popup属性

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

setBadgeBackgroundColor: 设置Badge背景色

chrome.browserAction.setBadgeBackgroundColor(object details);

setBadgeT ext:Badge内容

chrome.browserAction.setBadgeT ext(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"

}

默认皮肤,可以通过下面的链接进行查看

https://www.sodocs.net/doc/6e5242208.html,/viewvc/chrome/trunk/src/chrome/browser/browser_theme_provid https://www.sodocs.net/doc/6e5242208.html,

其中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

常见的方法:

captureVisibleT ab 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": ["https://www.sodocs.net/doc/6e5242208.html,/*"],

"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": [

"https://www.sodocs.net/doc/6e5242208.html,/"

对于匹配的URL也可以使用模糊匹配

"http://*https://www.sodocs.net/doc/6e5242208.html,/"

"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(https://www.sodocs.net/doc/6e5242208.html, == "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

1.让你的浏览器准备就绪

不用多说，首先肯定是安装浏览器了，至于你是Windows，Linux，Mac？官方都有对应的下载。

2.创建并加载一个扩展

1.首先创建一个文件夹

2.在你的文件夹里面创建一个名为：manifest.json的文件，并且写下以下内容：Json代码

2"name": "My First Extension",

3"version": "1.0",

4"description": "The first extension that I made.",

5"browser_action": {

6"default_icon": "icon.png"

7},

8"permissions": [

9"https://www.sodocs.net/doc/6e5242208.html,/"

10]

11}

3.将这个图标复制到你的文件夹

4.加载你的扩展

a.点击浏览器的图标，并且选择Extensions

b.加入右上角的“Developer mode”前面是+，那么点击它，页面会添加几个按钮，并且+会变为-，

c.点击Load unpacked extension按钮，一个dialog窗口就弹出来了，

d.选择你最开始创建的文件夹，点击OK，（记住，不要放在文件目录有中文的地方，否则会报错，反正我放在桌面上就报错了）

做完以上步骤，就会出现如下的内容：

3.添加代码到你的扩展

1.编辑manifest.json，添加代码（只添加加粗的那一行）: Json代码

12...

13"browser_action": {

14"default_icon": "icon.png",

15[b]"popup": "popup.html"[/b]

16},

17...

2.创建文件popup.html，并且写下以下代码:

Java代码

3,回到扩展管理页面，现在属性一下插件（reload），加载新版本的插件

4.点击右上角的插件图标，就会看见效果了，如以下图片：

PS：最后一步的时候，有时候会有点点慢，你点击图标后其实是在执行（当你鼠标移开的时候如果图标样式还是你鼠标一上去的时候那种样式，说明就是在运行了），我最开始还以为是我代码有问题呢，结果后来不经意间才发现这个问题

chrome扩展程序

时下很多人都用上了Google Chrome浏览器，这款目前世界上最快的浏览器既简洁又高效，用来上网冲浪还真是不错。不过好马也得配好鞍，和很多非IE核心浏览器一样，Chrome也需要利用插件扩展自己的能耐。下面就是笔者精心挑选的75款实用插件，感兴趣的不妨慢慢往下看吧! 1. 搞定网银—— IE Tab 虽说网页标准化已经实行多年，可事实上出于安全性或其他考虑，很多特殊的站点(如网上银行)仍旧只能用IE打开。而这款插件的最大好处，就是能够在Chrome中直接生成一个IE内核标签。插件装好后会自动在地址栏右侧生成一个按钮，每次点击都能产生一个空白IE标签，在这个标签中拥有一套独立的地址栏及工具栏，打开的网页将享受到与IE一样的服务。此外它还有一个很人性化的考虑，那就是可以将当前页面设为“自动启动”(工具栏左数第2个按钮)，换句话说当我们再次打开相同页面时，Chrome将自动以IE模式打开。图1 IE Tab插件下载网址：https://www.sodocs.net/doc/6e5242208.html,/utilities/ie-tab/ 2. 鼠标手势—— Chrome G estures 鼠标手势就不用我多解释了吧，安装这款插件后，Chrome便能在鼠标的“指挥”下完成很多特定操作。除了能够显示出鼠标的轨迹，一个很人性化的设计就是提供了手势功能提示，于是我们便可以在操作时随时掌握即将发生的任务。而且这款插件还有一个特别之处，那就是实现了超级拖拽(即利用拖拽在新标签页中打开链接或文本搜索)，进入“扩展程序”→“Chrome Gestures”→“选项”后即可找到这项功能。此外我们也能对默认手势进行修改，甚至为“链接”或“文字”拖拽指定不同的动作(超级拖拽)。

基于Chrome浏览器插件的爬虫系统

学校代码：10255 学号：2131569 基于Chrome浏览器插件的爬虫系统 WEB CRAWLER SYSTEM BASED ON CHROME EXTENSION 学科专业：软件工程作者：魏少鹏指导教师：夏小玲答辩日期：2016年1月 2015年12月

东华大学学位论文原创性声明本人郑重声明：我恪守学术道德，崇尚严谨学风。所呈交的学位论文，是本人在导师的指导下，独立进行研究工作所取得的成果。除文中已明确注明和引用的内容外，本论文不包含任何其他个人或集体已经发表或撰写过的作品及成果的内容。论文为本人亲自撰写，我对所写的内容负责，并完全意识到本声明的法律结果由本人承担。学位论文作者签名：日期：年月日

东华大学学位论文版权使用授权书学位论文作者完全了解学校有关保留、使用学位论文的规定，同意学校保留并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅或借阅。本人授权东华大学可以将本学位论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存和汇编本学位论文。保密□，在年解密后适用本版权书。本学位论文属于不保密□。学位论文作者签名：指导教师签名：日期：年月日日期：年月日

基于Chrome浏览器插件的爬虫系统摘要随着大数据时代的来临，网络信息以“爆炸”的方式增长，以新浪微博为例，其日均微博更新多达1.2亿条，但在信息空前丰富的前提下，用户获取自己需要数据的难度也日趋增加。传统搜索引擎如百度、Google等提供的零散结果已经不能满足用户的需求，人们不论在专业数据分析还是在日常生活方面更需要的是经过有效整合的数据，整合互联网数据要使用网络爬虫技术。然而目前常用的网络爬虫系统开发难度大，稳定性差并且使用不友好，已经不能满足当今用户的需求，因此研究设计一种开发扩展简单，稳定性高，适用范围广以及使用友好的网络爬虫系统具有非常重要的价值。本文先研究了国内外现有网络爬虫技术、网络爬虫系统和反爬虫策略的现状，分析了现有网络爬虫系统实现过程复杂、稳定性差和使用不友好的原因，并且基于此提出了基于Chrome扩展的网络爬虫系统。其次，为了满足不同的需求和发挥互联网的优势，提出了在基于Chrome扩展的网络爬虫系统中实现两种信息抓取模块，分别是个人版信息抓取模块和服务器版信息抓取模块。最后，为了支持个人版信息抓取模块对中央服务器模块的高并发性需求，提出了基于Netty框架实现的中央服务器模块和采用主从库配置的数据库模块，并且为了在有更多新需求的情况下中央服务器模块能够更好的进行扩展，本文采用了面向接口编程并且引入了Spring框架来管理中央服务器模块

Firefox Chrome插件、扩展的区别

插件（plugins）、扩展（extensions）与主题（themes）和语言包（languages）都是附加组件（Add-ons）不同种类。插件与扩展是完全不同的东西。 Firefox：插件与扩展插件（Plugins/Plug-ins）：它通常是第三方应用程序提供给firefox使用的二进制文件。也就是说第三方应用程序把相关功能编译成了二进制的机器指令提供给各类浏览器，方便它们调用。 Firefox需要显示某些自身并不能显示的特定文件类型的时候，就会调用与之相关的第三方应用程序提供给firefox的插件来显示它。插件的作用也在于此。 windows下的firefox插件通常是dll格式，linux下的通常是so格式。例如，Adobe提供给firefox的插件“Adobe reader”使其能直接在浏览器里显示网络上的pdf 文档，而Adobe提供给firefox的另一个插件“Adobe shockwave flash”则使其能显示网页中嵌入的flash。Microsoft提供的“Windows media player firefox plugin”使firefox能播放网页中嵌入的windows媒体（wmv、wma、asf以及对应的播放列表格式）。扩展（extensions）：它通常是扩展开发者为了修改或者增强firefox本身的功能而提供的一种打包格式。它通常由包含功能代码的js脚本、包含界面的xul文件以及包含皮肤的css文件和各种图像文件组成。少数特定平台下的扩展可能还会附带一些二进制文件。 ?Firefox扩展是什么？官方定义：它是用于给Firefox增加一些实用新功能的附加组件。使用的技术： ○XUL: 一种基于XML的用户界面语言 ○CSS,DOM,JavaScript ○XPCOM: 跨平台的COM（COM 的全称是Component Object Model 组件对象模型。）技术，基本原理与微软的COM类似 ○XPConnect: 将JavaScript和XPCOM连接起来，即可以让XPCOM组件被脚本化，在js代码中调用，也允许使用js来开发XPCOM组件开发，相当于“胶水”。 ○RDF: 资源定义框架，用于保存扩展的注册信息和描述信息扩展的格式都是xpi后缀的。其实是zip格式打包的。常见的扩展有noscript、adblock plus等。

谷歌浏览器插件

16个实用的Google Chrome扩展/插件下载 2010/02/20 | 分类：TOOLS 这次推荐的Google Chrome扩展皆是本人亲自试用过的。如果有更好的选择请在留言中交流。另外，Google Chrome extensions（chrome扩展程序库）的下载链接貌似经常被墙，所以最好还是找个比较靠谱的代理。 AdBlock 用这个插件可以过滤掉各种类型的广告！而且它不会占用地址栏的位置，并且有相当强大的自定义功能。推荐理由：有多少人喜欢满是广告的网页呢？过滤广告几乎是任何浏览器中都不能忽略的功能。但是。这个扩展有时候会误杀一些有用的东西。 Chromed Bird Chrome中非常好用的twitter客户端。支持API。自定义功能同样强大！推荐理由：推油们必备。Firefox有Echofon，Chrome有Chromed Bird！ chromed brid的新版本必须要OAuth验证登陆，无意义继续使用，建议替换成下面这个扩展。 Chrowety chrome中相当好用的twitter客户端，支持API，可以无视chromed bird了！

推荐理由：支持API，有中文版本。 ChromeMilk GTD时间/任务管理的应用我选择了基于Remember The Milk的扩展。这个看个人喜好吧。推荐理由：Remember The Milk这个平台更为专业，扩展性更好。 gTasks 同上一个插件，如果你习惯于用Google tasks，可以用这个扩展。推荐理由：基于Google T asks的扩展很多。这个扩展有较好的UI，有计数功能。 Drag and Go 国人作品。支持拖拽搜索，拖拽打开链接等等。推荐理由：拖拽是很多人的浏览习惯，在这个插件上可以得到延续。 Google Dictionary (by Google) 词典工具，必备。支持划词翻译。推荐理由：GOOGLE官方出的扩展，非常实用。 IE Tab Classic 大名鼎鼎的IE T ab，让你在Chrome的环境下随时用IE的内核打开网页！有些网页IE可能

chrome扩展开发——自动填表实例

manifest.json配置文件 --------------------------- { "name": "项目名称", "version": "1.0", "permissions": ["tabs", "http://*/*", "https://*/*"], "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["jquery-1.6.4.min.js"] } ], "icons": {"128":"icon.png"}, "browser_action": { "default_title": "优酷好友申请批量通过", "default_icon": "icon.png", "popup": "popup.html" } } ------------------------------------------- 解释： "permissions": ["tabs", "http://*/*", "https://*/*"]是该扩展应用到tabs(选项页)中的所有http://和https://页面 "content_scripts": [{ "matches": ["http://*/*", "https://*/*"], jquery应用的页面有http 和https开头的页面 "js": ["jquery-1.6.4.min.js"] 这是导入jquery用以应用 }], 浏览器行为： "browser_action": {

"default_title": "优酷好友申请批量通过", "default_icon": "icon.png", "popup": "popup.html" 行为代码页面 } popup.html浏览器行为代码页面，就是点击浏览器上的图标后，执行这个页面来对当前选项卡页面进行处理 -----------------------------------------------