1. chrome extensions介绍
chrome extensions值的是chrome浏览器扩展插件。它能增强chrome浏览器的功能,例如跨域插件,截屏插件,翻译软件,甚至一些小游戏等等。
你可以把一个extension理解为一个app

2. 开发技术
chrome extensions的开发只要有html,css,javascript技术就快速上手
3. 入门项目hello world
github项目地址:https://github.com/yanglimou/chrome-extensions-study/tree/master/helloworld
0. 新建目录helloworld,项目结构如下

1. manifest.json
每一个extension都有一个manifest.json文件,它是extension的描述文件
{
"manifest_version": 2,//描述extension的版本(这个基本不变,除非chrome浏览器更新了extension的开发版本,类似于开发安卓的安卓版本)
"name": "hello world",//该extension名称
"version": "1",//该extension的版本,升级需要增加
"description": "this is a hello world extension",//描述信息
"browser_action": {//表示这个extension是一个browser action extension
"default_popup": "hello.html",//点击弹出页面
"default_icon": "images/icon16.png"//工具栏的默认展示图标
},
"icons": {//相关显示图标
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
2. hello.html
<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
3. 安装

网友评论