目录
一、chrome extensions（扩展）
1、introduction（介绍）
* small programs（小程序）
* modify dom of a web page（修改网页的dom）
* html、css、javascript
2、tutorial structure（教程结构）
* hello world extension（hello world扩展）
* browser action extension（浏览器操作扩展）
* page action extension（页面操作扩展）
* neither BA or PA （既不是浏览器操作也不是页面操作）
* debug（调试）
* depoly（仓库）
3、the big picture（大局）
* manifest html css javascript（编写清单）
* .crx zipped file（打包成.crx压缩文件）
* chrome web store（部署到chrome应用商店）
4、extension types（扩展类型）
* browser action（浏览器操作）
- stay in tool bar（停留在工具栏中）
- accessible at all times（可随时访问）
* page action（页面操作）
- stay in tool bar but grey-ed out（停留在工具栏中，但变灰）
- accessible only on certain pages （只能在某些页面上访问）
* neither BA or PA action（既不是BA也不是PA操作）
- run in the background（在后台运行）
5、mainfest（清单）
* information about the extension（关于扩展的信息）
* json format（json格式）
* mandatory（强制性的）
- mainfest version（清单版本）
- name of the ext（扩展的名称）
- version of the ext（扩展的版本）
二、hello world
1、开发基础
- 概念
* mainfest_version除非chrome有更新，否则目前就是3
* mainfest_version、name（扩展名称）、version（扩展版本）是必须的
* icons需要128、48、16三种大小的图标（可通过iconfont下载）
* action.default_icon右上角扩展图标，action.default_popup点击扩展图标展示的弹窗html
* 扩展加载到chrome的步骤
- 地址栏输入：chrome://extensions/
- 开启开发者模式
- 加载已解压的扩展程序，选择扩展的开发目录
* 右击扩展弹窗html，检查（inspect）菜单调试html
- manifest.json
{
"manifest_version": 3,
"name": "扩展名",
"description": "扩展的描述信息",
"version": "1.0",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"action": {
"default_icon": "icon16.png",
"default_popup": "popup.html"
}
}
- popup.html
<html>
<head>
<meta charset="UTF-8">
<script src="popup.js"></script>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h1>扩展弹窗的内容</h1>
</body>
</html>
- popup.js
console.log("执行js")
- popup.css
h1 {
color: red;
}