你的位置:首页 > Java教程

[Java教程]chrome扩展写法

  最近看到公司同事经常写chrome扩展,来提高生成效率,回想想自己以前也写过chrome扩展,但是由于不经常写,也没做积累也都忘记了,现在重新回顾一下。

一、chrome扩展基本概念

  chrome扩展应用其实是压缩在一起的一组文件,包括HTML,CSS,Javascript脚本,图片文件,还有其它任何需要的文件。 应用(扩展)本质上来说就是web页面,它们可以使用所有的浏览器提供的API,从

  应用(扩展)可以与Web页面交互,或者通过content script或cross-origin

二、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": 2,   // 建议提供的字段   "description": "MY SELF CHROME EXTENSION",   "icons": {     "48": "images/1.png" ,     "16" : "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:0;padding:0;}  body{color:#333;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;}  img{margin:0 4px;}  #addItemDiv{color:#ccc;}  .hide{display:none;}  .show{display:block;}  .taskItem{cursor:pointer;}  input{width:100%;}  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扩展到chrome商店

  进入地址https://chrome.google.com/webstore/developer/dashboard,需要5刀,注册才能发布。

  

资料来源:

  1. 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单
  2. 手把手教你开发Chrome扩展二:为html添加行为
  3. 手把手教你开发Chrome扩展三:关于本地存储数据
  4. 360极速浏览器应用开发平台
  5. Chrome扩展程序开发实例
  6. 一个初步的 Chrome Packaged App 写法