码迷,mamicode.com
首页 > 其他好文 > 详细

编写一个简单的chrome插件

时间:2018-07-29 14:11:50      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:应用   支持   扩展程序   图片显示   程序   简单的   esc   应该   默认   

编写一个chrome插件,你需要准备好一个好看的图片作为扩展程序的图标。准备好图标后,我们就要开始设计插件了。

1、chrome扩展需要的文件
可以这么理解,chrome扩展程序就是一个web应用,所以我们实际是要写html代码。而chrome插件需要的文件就包括配置文件(manifest.json)、扩展图标(icon.png 可以是任意的名字,在配置文件中会使用到)、popup弹出窗口html文件(popup.html)以及其他静态资源文件(如images、css、js等)。如下图,我建立了一个jubar的文件用作chrome扩展文件夹。

2、Browser Actions(扩展图标)
只要chrome启用了某个chrome扩展程序,对应地将该程序的扩展图片显示在地址栏的右侧。

3、popup弹出窗口
接下来,就是编写popup弹出窗口了。

4、编写配置文件manifest.json
{
"name": "Jubar",
"manifest_version":2,
"version": "4.0.1",
"description": "Gather your friends and family",
"browser_action": {
"default_icon": "icon.png" ,
"default_title": "Jubar",
"default_popup": "popup.html"
}
}

必须属性:
name、version、manifest_version
1、name 插件名称;
2、version 插件的版本号;
3、manifest_version 指定清单文件格式的版本,在Chrome18之后,应该都是2,所以这个值直接设定为2就OK了;

推荐属性:
description、icons、default_locale
1、description 插件描述,简单介绍插件用途;
2、icons 插件图标,需准备16*16(扩展信息栏)、48*48(扩展管理页面)、128*128(用在安装过程中)的三个图标文件,建议为PNG格式,因为PNG对透明的支持最好;
3、default_locale 国际化支持,支持何种语言的浏览器,虽然官方推荐,不过我没用;

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

 

6、打包扩展程序
1、打开Chrome –> 更多工具 –> 扩展程序
2、打开“开发者模式”

编写一个简单的chrome插件

标签:应用   支持   扩展程序   图片显示   程序   简单的   esc   应该   默认   

原文地址:https://www.cnblogs.com/zyhphq/p/9384934.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!