chrome扩展写法
最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展,但是由于不经常写,也没做积累也都忘记了,现在重新回顾一下。
一、chrome扩展基本概念
chrome扩展应用其实是压缩在一起的一组文件,包括HTML,CSS,Javascript脚本,图片文件,还有其它任何需要的文件。 应用(扩展)本质上来说就是web页面,它们可以使用所有的浏览器提供的API,从XMLHttpRequest到JSON到HTML5全都有。
应用(扩展)可以与Web页面交互,或者通过content script或cross-origin XMLHttpRequests与服务器交互。应用(扩展)还可以访问浏览器提供的内部功能,例如标签或书签等。
应用(扩展)的界面:
很多应用(不包括WebApp)会以browser action或page action的形式在浏览器界面上展现出来。每个应用(扩展)最多可以有一个browser action或page action。当应用(扩展)的图标是否显示出来是取决于单个的页面时,应当选择page action;当其它情况时可以选择browser action。
比较全的
//这个json是用来给chrome读取的,json左右两边都要加""
{
"app": {
"background": {
"scripts": ["background.js"]
}
},
"manifest_version": ,
"name": "My Extension",
"version": "versionString",
"default_locale": "en",
"description": "A plain text description",
"icons": {
"": "images/icon16.png",
"": "images/icon48.png",
"": "images/icon128.png"
},
"browser_action": {
"default_icon": {
"": "images/icon19.png",
"": "images/icon38.png"
},
"default_title": "Extension Title",
"default_popup": "popup.html"
},
"page_action": {
"default_icon": {
"": "images/icon19.png",
"": "images/icon38.png"
},
"default_title": "Extension Title",
"default_popup": "popup.html"
},
//需要数据保存程序中,如果当前用户关闭popup,就需要Background Pages来进行相应的操作
"background": {
"scripts": ["background.js"]
},
//需要和网页交互,那么他就需要一个内容脚本(Content scripts),内容脚本常由JavaScript编写,会在网页载入完成后调用
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
//选项页面
"options_page": "options.html",
//跨域权限许可,权限
"permissions": [
"*://www.google.com/*"
],
//web可访问资源
"web_accessible_resources": [
"images/*.png"
]
}
二、chrome扩展开发需要掌握的基础知识
1、Chrome扩展文件
Chrome扩展文件以.crx为后缀名,在Google Chrome扩展官方网站下载扩展时,Chrome会将.crx文件下载到Chrome的Application Data文件夹的User Data\Temp下,一般是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp,安装完成或者取消安装,该文件就会被删除。.crx实际上是一个压缩文件,使用解压文件打开这个文件就可以看到其中的文件目录:
因此可以认为,我们实际上就是写一个Web应用,然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。
2、Browser Actions(扩展图标)
把Browser Actions翻译成扩展图标不是很准确,但它的功能就是把你的应用显示在Chrome工具栏上。我们在上面看到一个文件manifest.json,就是使用这个文件来把相应的图标和其他参数注册到Browser Actions。比如下图中就是EverNote的扩展图标。
3.Page Actions(地址栏图标)
如果你熟悉一些Chrome插件的话,你一定会发现有些扩展的图标不是显示在地址栏的右边,而是显示在地址内部右方,这就是Page Actions地址栏图标。
可以看出上面中有三个Page Actions,图中我标出的是Chrome添加书签,现在你就会发现其实这个也是Chrome的扩展,只不是它是直接内置在Chrome的。
Page Actions与Browser Actions的区别就是Page Actions不是随时都是显示的,必须在特定的页面中这个功能才能使用。因此在开发中注意:如果不是全部页面中都能使用的功能请使用Page Actions方式
4、popup弹出窗口
popup属于Browser Actions,当点击图标时出现这个窗口,可以在里面放置任何html元素,它的宽度是自适应的。当然,这个弹出窗口不会被Chrome拦截的:)
如下图中是evernote的popup窗口:
5、Background Pages后台页面
这个窗口不会显示,它是扩展程序的后台服务,它会一直保持运行。比如在一些需要数据保存程序中,如果当前用户关闭popup,就需要Background Pages来进行相应的操作。
6、chrome扩展所包含的文件
每个应用(扩展)都应该包含下面的文件:
- 一个manifest文件
- 一个或多个html文件(除非这个应用是一个皮肤)
- 可选的一个或多个javascript文件
- 可选的任何需要的其他文件,例如图片
在开发应用(扩展)时,需要把这些文件都放到同一个目录下。发布应用(扩展)时,这个目录全部打包到一个应用(扩展)名是.crx的压缩文件中。如果使用Chrome Developer Dashboard,上传应用(扩展),可以自动生成.crx文件。
三、chrome扩展示例
目录结构:
manifest.json文件
{
// 必须的字段
"name": "My Chrome Extension",
"version": "1.0",
"manifest_version": ,
// 建议提供的字段
"description": "MY SELF CHROME EXTENSION",
"icons": {
"": "images/1.png" ,
"" : "images/1.png"
},
// "default_locale": "en", 指定这个扩展保的缺省字符串的子目录:_lcoales。如果扩展有_locales目录,这个字段是必须的。如果没有_locales目录,这个字段是必须不存在的。 // 多选一,或者都不提供
"browser_action": {
"default_icon": "images/1.png" ,
"default_title": "My Chrome Extension",
"default_popup": "index.html"
}
}
index.html文件:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
*{margin:;padding:;}
body{color:#;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;}
img{margin: 4px;}
#addItemDiv{color:#ccc;}
.hide{display:none;}
.show{display:block;}
.taskItem{cursor:pointer;}
input{width:%;}
label.on{width:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;}
label.off{width:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;}
</style>
</head>
<body>
<div id="newItem" class="gray">添加新项</div>
<div id="addDiv" class="hide"><input type="text" id="txtTitle" /></div>
<div id="taskItemList">
<div class="taskItem">
<label class="on"></label><span class="taskTitle">新任务</span>
</div>
<div class="taskItem">
<label class="off"></label><span class="taskTitle">已完成任务</span>
</div>
</div>
</body>
</html>
我们将文件加拖拽到chrome扩展中就会看到:
是不是很简单,一个简单的小例子就这样完成了。
四、打包chrome扩展程序
在浏览器窗口输入chrome://extensions/,或者菜单 ->设置 ->扩展程序,会看到有两个菜单“加载正在开发的扩展程序”和“打包扩展程序”
我们点击打包扩展程序:
就会看到生成了两个文件:mychrome.pem 和 mychrome.crx, mychrome.crx解压就可以看到元素的目录,那么我们可以把mychrome.crx扩展上传到chrome应用商店。
五、chrome扩展API简介
在我们写chrome扩展时,经常要与浏览器进行数据交互,下面简单介绍几个常用的扩展API(实例:http://blog.csdn.net/ciml/article/details/5638112 http://blog.csdn.net/ciml/article/details/5700719):
chrome.tabs.create():调用该api将打开一个新的标签页。
chrome.windows.getCurrent(function callback):该函数是获取当前窗口,其参数是一个回调函数,在回调函数中将传递一个windows对象,通过该对象可以获取窗口的基本信息,在我们的例子中主要是利用了窗口id。
chrome.tabs.getAllInWindow(integer windowId, function callback):该接口是获取某个窗口的所有tab页,其第一个参数是窗口id,第二个参数是一个回调函数,在回调函数中将传回一个tabs数组对象,数组包含了当前窗口所打开的所有tab标签页对象。通过数组条目获取单个tab对象的基本信息,我们用到了tab的id和url属性。通过url判断,我们只将消息发送给了我们挂接了内容脚本的google首页。
chrome.tabs.sendRequest(integer tabId, any request, function responseCallback):该函数从扩展页发送消息给内容脚本,第一个参数是内容脚本所在的tab id,第二参数是消息内容,为json格式。第三为可选响应回调函数参数。
chrome.extension.onRequest.addListener(function(any request, MessageSender sender, function sendResponse) {...}):
该接口用于挂接消息处理函数,在内容脚本和扩展页中都一样。收到的消息就是sendRequest发出的json格式消息。
chrome.extension.sendRequest(string extensionId, any request, function responseCallback):从内容脚本发送消息给扩展页。第一个参数是扩展的id,为可选参数,默认表示发送给当前扩展。第二个参数为json格式消息对象,第三个参数是可选响应回调函数参数。
消息传递: http://open.chrome.360.cn/html/dev_messaging.html
https://crxdoc-zh.appspot.com/apps/api_index
六、上传chrome扩展到chrome商店
进入地址https://chrome.google.com/webstore/developer/dashboard,需要5刀,注册才能发布。
资料来源:
- 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
- 手把手教你开发Chrome扩展二:为html添加行为
- 手把手教你开发Chrome扩展三:关于本地存储数据
- 360极速浏览器应用开发平台
- Chrome扩展程序开发实例
- 一个初步的 Chrome Packaged App 写法
- Chrome插件(Extensions)开发攻略
- 一个鲜为人知却十分实用的Chrome浏览器使用技巧
- Chrome扩展及应用开发(首发版)
- 如何从零开始写一个 Chrome 扩展?
- 简单的Chrome 扩展开发
- Chrome插件开发进阶
- chrome提供给开发者的扩展工具方便调节扩展
chrome扩展写法的更多相关文章
- 一起来做chrome扩展《可配置的代理》
一.本文主要涉及相关内容: chrome.proxy pacScript browser_action popup localStroage 二.预览 (代理运行截图,图中的代理服务器有防火墙,暂不对 ...
- 一起来做chrome扩展《本地存储localStorage》
chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...
- 清除页面广告?身为前端,自己做一款简易的chrome扩展吧
大家肯定有这样的经历,浏览网页的时候,左右两端广告,诸如“屠龙宝刀,点击就送”,以及最近火的不行的林子聪37传奇霸业什么“霸业面具,霸业吊坠”的魔性广告总是充斥我们的眼球. 当然有现成的扩展程序或者插 ...
- chrome扩展程序开发
首先,明确两个概念的区别:chrome扩展程序和Web Apps.具体参考:http://www.chromi.org/archives/10106 本文只讨论chrome扩展程序. 最好的开发教程莫 ...
- 一起来做chrome扩展《AJAX请求》
chrome在一次更新之后,出于安全考虑,完全的禁止了content_script从https向http发起ajax请求,即使正常情况下也会在console里给出提示.这对于WEB来讲是好事,但对于扩 ...
- 一起来做chrome扩展《基础介绍》
首先说明,chrome的扩展并不它的插件,网上很多说写插件,其实都是说的扩展.写扩展并不复杂,只要根据chrome提供的一系列的API进行就可以实现很多的功能.只是对API的学习是有代价的,加上国内访 ...
- 编写Chrome扩展程序
Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看 ...
- Web 开发人员必备的12款 Chrome 扩展程序
之前已经分享过一些帮助 Web 开发人员和设计师的 Chrome 扩展,这次我们继续展示一组很有用的 Chrome 应用程序.这些免费的 Chrome 应用程序可以简化您的工作流程,为了加快您的工作流 ...
- 【转发】NPAPI学习(Firefox和Chrome扩展开发 )
NPAPI学习(Firefox和Chrome扩展开发 ) 2011-11-08 14:41:02 by [6yang], 1172 visits, 收藏 | 返回 Firefox和Chrome扩展开发 ...
随机推荐
- [转] fitnesse中的Map处理
http://blog.csdn.net/doubeizhucele/article/details/42263887 fintesse会把!{}标记的变量视为HashTable对象,展现到页面上的将 ...
- 【LSTM】Understanding-LSTMs
http://colah.github.io/posts/2015-08-Understanding-LSTMs/
- 用python将MSCOCO和Caltech行人检测数据集转化成VOC格式
代码:转换用的代码放在这里 之前用Tensorflow提供的object detection API可以很方便的进行fine-tuning实现所需的特定物体检测模型(看这里).那么现在的主要问题就是数 ...
- Docker技术原理
Docker技术原理之Linux Namespace(容器隔离) https://blog.csdn.net/songcf_faith/article/details/82748987 Docker技 ...
- 一些JavaScript基本函数
1.document.write(”");为 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览 ...
- Android重写HorizontalScrollView仿ViewPager效果
Android提供的ViewPager类太复杂,有时候没有必要使用,所以重写一个HorizontalScrollView来实现类似的效果,也可以当做Gallery来用 思路很简单,就是重写onTouc ...
- SpringBoot------连接mysql时出现警告:Establishing SSL connection without server's identity verification is not recommended
SpringBoot连接MySQL时出现警告: 英文: Mon Jun :: CST WARN: Establishing SSL connection without server's identi ...
- SpringMVC由浅入深day01_9商品修改功能开发
9 商品修改功能开发 9.1 需求 操作流程: 1.进入商品查询列表页面 2.点击修改,进入商品修改页面,页面中显示了要修改的商品(从数据库查询) 要修改的商品从数据库查询,根据商品id(主键)查询商 ...
- C#(少用的)
挖一挖C#中那些我们不常用的东西之系列(1)——ToDictionary,ToLookup 挖一挖C#中那些我们不常用的东西之系列(2)——IsXXX 系列方法 挖一挖C#中那些我们不常用的东西之系列 ...
- ios开发之--编码及命名规范
做了几年的开发工作,因为是半路出的家,所以对这块一直都没怎么重视,所以在工作中,出现了很多的尴尬场景,编码和命名的规范是一定得有的,最起码一个团队之间的规范也是很有必要的.面向对象的编程,其实很好理解 ...