- 开发 Chrome 扩展
- Hello, World
- 项目
- 加载未打包的扩展
- icon
- 刷新
- 引入 JS 与错误处理
- Hello, World
开发 Chrome 扩展
开发 Chrome 扩展除了需要基本的 HTML, CSS, JS 之外, 还可以使用 Chrome 额外提供的 API.
除了需要的 .html, .css 和 .js 文件之外呢, 扩展还包括不同类型的文件, 具体可以包含哪些文件取决于扩展提供的功能. 下面列出最经常用到的文件
The manifest
每个扩展都必须提供一个名为 manifest.json 的文件, 而且这个文件必须位于扩展的根目录. manifest.json 通常提供了重要的元数据, 资源定义, 权限许可, 并且指明哪些文件在后台运行, 哪些在页面运行.
The service worker
插件的 service worker 用来监听和处理浏览器事件, 包括导航🧭到新页面、移除书签🔖或者关闭一个页面等. service worker 可以使用所有的 Chrome APIs 但是它不能直接与页面的内容交互
content scripts
content scripts 才在网页的环境中执行 JS. 它们可以读取和修改扩展注入的页面的 DOM. content scripts 只能使用一部分 Chrome APIs 但是可以与 service worker 交换信息来间接访问剩下的 APIs.
The popup and other pages
扩展可以包括各式各样的 HTML 文件, 比如弹出页面, 选项页面和其他页面. 所有页面都可以访问 Chrome APIs
Hello, World
项目
下面写一个 Hello World 版本的插件, 插件的功能就是创建点击插件时展示 Hello World 和当前时间.
创建一个文件夹, 并创建 manifest.json.
{
"manifest_version": 3,
"name": "Hello, World",
"description": "show Hello World on popup",
"version": "1.0",
"action": {
"default_popup": "hello_world.html",
"default_icon": "favicon-16x16.png"
}
}
这个文件必须包含的 key 是 manifest_version, name 和 version. 开发阶段支持 // 形式的注释, 如果要上架到 Chrome Web Store 必须移除注释.
使用 https://favicon.io/ 创建扩展的图标. 然后创建 hello_world.html
<html>
<style>
h3 {
color: #ff5e57;
}
</style>
<body>
<h3>Hello World</h3>
</body>
</html>
加载未打包的扩展
在开发者模式下加载未打包的扩展
1️⃣在 Chrome 浏览器中输入 chrome://extensions/ 进入扩展管理页面. 点击右上角开关打开开发者模式
点击「加载已解压的扩展程序」并选择开发插件代码的文件夹
然后选择浏览器右上角的扩展按钮🔘,并将自己的开发的扩展固定在导航栏部分. 之后点击我们的插件就可以看到效果了
icon
其实发现了上面的截图中, 扩展页面是没有图片的. 在 manifest.json 中通过 icons 声明
{
...
"icons": {
"16": "favicon-16x16.png",
"32": "favicon-32x32.png",
"48": "android-chrome-192x192.png",
"128": "android-chrome-512x512.png"
}
}
不同大小的 icon 用在不同的地方展示
16x16: 用在浏览器右上角的扩展和扩展按钮点击后的展示32x32:windows操作系统要求32x32大小48x48: 在扩展管理页面128x128: 安装时展示, 在Chrome Web Store中展示
刷新
如果我们修改了代码, 可以在扩展管理页面点击右下角的刷新按钮刷新
<html>
<style>
body {
min-width: 300px;
}
h3 {
color: #ff5e57;
}
</style>
<body>
<h3>Hello World</h3>
</body>
</html>
当然, 不是所有文件修改后都需要刷新, 只有 manifest.json, service worker, content scripts 修改了才需要刷新.
引入 JS 与错误处理
我们可以创建 popup.js 并在 hello_world.html 中引入
console.log('Hello, World.')
<body>
<h3>Hello World</h3>
<script src="./popup.js"></script>
</body>
为了看到打印的内容, 需要完成下面的操作
- 点击扩展的刷新按钮
- 点击扩展, 弹出页面
- 右击页面, 出现菜单并选择「检查」项
- 在弹出的扩展的开发者工具中, 选择
console选项卡, 就可以看到输入的内容了😊
如果 JS 中出现了错误, 例如打印一个不存在的变量, 然后重复上面刷新的步骤
console.log(a)
之后, 在扩展管理页面扩展就出现了「错误」按钮, 点击就可以看到具体的错误代码和错误原因.
