2023-10-03_chrome插件实战01-chrome插件
2023-10-02 本文已影响0人
微笑碧落
1. Chrome插件介绍
- Chrome插件是用来增强浏览器功能的扩展。事实上是通过
html,css,js开发的一个小型“网站”，运行在浏览器上。包含一堆html、js、css、资源文件 - 因为是由浏览器解释和运行的，所以可以调用很多浏览器提供的接口。360、搜狗浏览器都都可以安装这种插件。
- 通过脚本注入（在用户浏览网页的时候注入js和css文件），可以操作用户浏览的网页的dom，可以很方便的修改网页样式和行为。
- 核心文件事实上是一个
manifest.json文件。该文件必须在根目录下，其他文件通过这个文件进行角色定义和引用。
2. manifest.json详解
- 基本属性
{
"manifest_version": 3,
"name": "Hello World",
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0",
}
- backgroud：
用来配置后台运行的js文件，这些js在浏览器运行的时候自动运行。
background.js是一种用于在浏览器后台运行的脚本。当插件被安装时，它会立即启动并一直运行，直到插件被卸载或浏览器被关闭。通常，background.js用于处理一些重要的或需要持续监视的任务，例如处理插件的菜单、键盘快捷键等。
"background": {
"service_worker": "background.js" //后台服务js
}
- action
插件安装完成后在浏览器的插件栏会显示一个该插件的图标。点击该图标会弹出一个界面，用来进行一些交互。该图标和弹出的界面在这个属性配置。
界面是通过html来开发的。大小会自动进行缩放。
"action" : {
"default_title" : "alert hello world",
"default_popup" : "popup.html",
"default_icon" : "popup.png"
}
3.实例：HelloWorld
安装这个插件后，会在插件栏增加一个图标，点击该图标后，会弹出一个页面，上面显示Hello World
image.png
- manifest.json
{
"manifest_version" : 3,
"name" : "Hello World",
"description" : "popup a hello world",
"version" : "1.0",
"action" : {
"default_title" : "alert hello world",
"default_popup" : "popup.html",
"default_icon" : "popup.png"
}
}
- popup.html
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>
4. popup进阶应用
- 注意，popup页面是通过html开发的，意味着可以带有js。可以通过js来实现很多功能。
-
如下例子中，点击插件栏插件图标，开始执行解析这个html文件，然后才会开始执行其中的js代码。就是弹出一个对话框。
image.png
修改版popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<p>Hello World</p>
</body>
</html>
popup.js
alert("Hello World")
