Goolg Chrome 插件开发--Hello world

开发Chrome插件很简单,只要会web开发(html+javascript+css)那么这个就是能驾轻就熟,只需要了解一下插件具体的运行环境及要求就OK了.

1.先创建一个html文件,名字随便取,如index.html,内容如下

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8" /><title></title></head><body>Hello world!</body>
</html>

2.在创建一个名为manifest.json文件,这个名字一个字不能错.这个文件是插件的必须文件,可以理解为启动配置文件.内容如下

{"manifest_version": 2,"name": "Holle world","version": "0.0.1","browser_action": {"default_icon":"s.png","default_title":"Holle world","default_popup":"index.html"}
}

3.在创建一个图标文件.s.png

4.把这3个文件放到同一个文件夹中.(ChromePlugin)

5.打开Chrome浏览器,选择工具->扩展程序->开发者模式->加载正在开发的扩展程序->选择刚才文件夹(chromeplugin),好了一个简单的Chrome插件就做好了,效果图如下

下面解释一下这个(manifest.json)配置文件,其实里面的东西看名字都一目了然,只是有点要注意一下.

"manifest_version":2 这句是后来的Chrome版本才有的,之前版本的插件没有这个配置,现在如果少了这句会报错.较早的教程里面都没有这句话.

Could not load extension from 'E:\WebSite\GooglePlugin'. The 'manifest_version' key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details.

"default_popup"：用来指定点击小图标后弹出的小窗口中默认显示的是哪个html，这个弹出的小窗口就叫做“popup”

"default_title":用于指示当鼠标悬停于图标上的提示文字.

转载于:https://www.cnblogs.com/answercard/p/3342473.html

Goolg Chrome 插件开发--Hello world相关推荐

chrome 插件开发各种功能demo_Chrome 插件开发全攻略
Chrome 浏览器相信大家都用得比较多,有很多的优点,比如简洁.强大的开发者工具等,但是更让大家映像深刻的是有各种各样有趣.有用的插件,今天要给大家推荐的开源项目是 Chrome 插件开发全攻略,你 ...
vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
chrome插件开发记录（1）——解决问题“清单文件缺失或不可读”
chrome插件开发记录(1)--解决问题"清单文件缺失或不可读" 参考文章: (1)chrome插件开发记录(1)--解决问题"清单文件缺失或不可读" (2) ...
Chrome 插件开发-右键菜单开发实战演示，浏览器页面右键菜单选项设置，插件右键菜单点击插件名跳转主页设置
Chrome 插件开发 - 菜单选项浏览器页面右键菜单选项设置 ① 核心代码演示 ② 效果展示 ③ 详细参数文档插件右键菜单点击插件名跳转主页设置 ① 核心代码演示 ② 演示效果图浏览器页面右键 ...
Chrome插件开发之一: 搭建基本结构
Chrome插件开发之一: http://gdfans.net/?p=14 搭建基本结构作者:cmdbuf 发布时间:2010年05月28日发表评论 (6) 4阅读评论欢迎喜爱Chrome的谷友 ...
Chrome 插件开发与本地程序交互流程
Chrome 插件开发与本地程序交互流程一. 将本地程序写入注册表可以采用bat的方式写入注册表 REG ADD "HKCU\Software\Google\Chrome\NativeM ...
Chrome插件开发-右键菜单开启页面编辑
开发一个执行js脚本改变页面DOM的Chrome插件,manifest_version版本为3. Chrome插件基本知识 Chrome插件通常由以下几部分组成: manifest.json 该文件为 ...
Chrome插件开发--后台监控网页并自动刷新，点击页面元素
2015年6.17号,在线旅游网站蚂蜂窝出现了抢粽子活动:页面会出现一些粽子,点击粽子,即抢到.很明显,这是一个重复性的劳动,可以代码自动刷新页面,点击页面上的粽子. 本方案中选择了开发一款Chrom ...
浙大教务网登录验证码自动填充--chrome插件开发
浙大教务网登录验证码自动填充--chrome插件开发一.前言二.验证码图像识别三.chrome插件开发四.插件使用和结果展示五.未来展望六.提示一.前言女朋友说"教务网每次登 ...

Goolg Chrome 插件开发--Hello world

Goolg Chrome 插件开发--Hello world相关推荐

最新文章

热门文章