迈出第一步
创建项目目录
创建项目目录,随便啥遍名字。比如: MyChromeHelloWorld
.
创建项目配置
创建文件 manifest.json
, 填写基本内容。
{
"name": "你好世界",
"description": "这是一个简单到可以作为Chrome扩展的模板的项目",
"version": "1.0",
"manifest_version": 3
}
注意 version 区别于 manifest_version。manifest_version 是配置告诉Chrome浏览器用什么版本的manifest解释器。而 version 是指MyChromeHelloWorld的版本目前是第几个。很显然,可以从 1.0 版本开始咯。
让浏览器以加载目录的方式加载扩展
操作三步走:
- 浏览器访问
chrome://extensions
。可以为了方便点击这里直达。 - 打开开发者模式。
- 点击
Load unpacked
(我不知道中文版本下它是怎么显示的),并选择扩展项目目录。
搞定,但是因为没有配置Icon,所以Icon是用的默认的一个。
加点儿功能
设个目标,咱们加一个网页来展示一点儿信息,当然也可以有复杂功能。当点击 Chrome 扩展的图标的时候,可以唤起这个网页。
添加 browser_action 配置
{
"name": "你好世界",
"description": "这是一个简单到可以作为Chrome扩展的模板的项目",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
}
}
添加 popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>你好世界!</title>
<link href="./popup.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2 class="coral">欢迎来到Chrome世界!</h2>
<url>
<li><a href="https://baidu.com/" target="_blank">百度</a></li>
</url>
<script src="./popup.js"></script>
</body>
</html>
添加 popup.css
body {
width: 400px;
height: 300px;
}
h2.coral {
color: coral;
}
添加 popup.js
document.addEventListener("DOMContentLoaded", () => {
window.alert("DOMContentLoaded callback 123");
});