您的位置：首页 > 其它

[Chrome插件开发]001.入门

2015-10-13 14:05 330 查看
Chrome插件开发入门

Chrome扩展文件

Browser Actions（扩展图标）

Page Actions（地址栏图标）

popup弹出窗口

Background Pages后台页面

实战讲解

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

Chrome的扩展开发十分简单，我们只需要掌握web开发的html+CSS+Javascript，就能很快开发出自己的扩展。

你需要了解的内容：

在开发前首先要掌握一些基础知识。

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来进行相应的操作。

实战讲解:

我们以一个简单的插件来一步步讲解。


上面就是插件的简单页面。



  图标文件不要小于19px*19px，但最好也不要超过这个尺寸，虽然大图它会自适应，但会使得应用文件变大。然后完成和未完成状态的两个图标放到资源文件中，可以建立任意文件夹放进去，因为CSS文件把定义它们的路径。

建立manifest.json来定义我们程序配置：

{

"name": "helloChrome",

"version": "0.1.0",

"manifest_version":2,

"description": "this is my demo.",

"browser_action": {

"default_icon": "icon.png" ,

"default_title": "helloChrome",

"default_popup": "popup.html"

},

"permissions": [

"http://www.babybus.com/"

]

}

其中name代表应用程序名，version代表版本号，description代表功能描述。这些在安装扩展后就能看到，见下图：



  browser_action代表扩展图标段显示，它会定义图标地址、标题（也就是鼠标悬停提示）和默认的popup页面。我们这里定义的popup页面为popup.html。

  接下来开始定义popup.html显示，它不需要使用、和标签，可以直接写上样式、脚本和html。我们的popup.html源码为：

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h4 style="text-decoration:underline">hello</h4>

<font color=red>hello World</font>

<img src="http://pic.meizitu.com/wp-content/uploads/2015a/08/31/03.jpg"  alt="girl" />

</body>

</html>

这样我们文件就已经建立完成，文件列表如下：



现在就可以先尝试把它打包装到自己的Chrome里。

首先打开Chrome-工具-扩展程序，展开开发人员模式，打到“打包扩展程序”按钮：


点击“打包扩展程序…”，弹出打包选择文件窗口，在扩展程序根目标中找到我们建立的文件夹，私有密码文件第一次不用选择：



点击确定，它会在根文件夹同一级生成MyTaskList.crx和MyTaskList.pem，MyTaskList.pem是程序签名文件，以新版本的开发中还需要这个文件，不要删除它。把MyTaskList.crx拖进Chrome窗体内，就会把这个应用MyTaskList安装在Chrome里。



我们的这个简单的插件就能看到效果了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航