提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
因为想要开发chrome插件只能找到基础性知识所以开始自己想办法学习
一、创建清单
创建一个名为manifest.json的文件
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3
}
其中name定义了拓展的名称
version定义了扩展的版本
description定义了扩展的描述
二、添加功能
1.在清单中注册后台脚本
扩展在该字段下的清单中注册其后台服务人员。"background"此字段使用"service_worker"指定单个 JavaScript 文件的键。
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
}
}
2.创建后台脚本
此扩展在安装后将需要来自持久变量的信息。runtime.onInstalled首先在后台脚本中包含一个监听事件。在onInstalled侦听器内部,扩展将使用存储API 设置一个值。这将允许多个扩展组件访问该值并对其进行更新。在扩展的目录中创建一个名为background.js并添加以下代码的文件。
// background.js
let color = '#3aa757';
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ color });
console.log('Default background color set to %cgreen', `color: ${color}`);
});
runtime.onlnstalled:首次安装扩展程序、扩展程序更新到新版本以及 Chrome 更新到新版本时触发。
3.添加储存权限
大多数 API,包括存储API,必须"permissions"在清单中的字段下注册,以便扩展使用它们。大多数 API,包括存储API,必须"permissions"在清单中的字段下注册,以便扩展使用它们。
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"]
}
4.引入用户界面
扩展可以有多种形式的用户界面;这将使用一个弹出窗口。创建并添加一个名为popup.html扩展目录的文件。这个扩展使用一个按钮来改变背景颜色。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="button.css">
</head>
<body>
<button id="changeColor"></button>
</body>
</html>
与后台脚本一样,必须在清单中声明此文件,以便 Chrome 将其显示在扩展程序的弹出窗口中。为此,请将一个action对象添加到清单并设置popup.html为操作的default_popup.
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"],
"action": {
"default_popup": "popup.html"
}
}
action:使用chrome.actionAPI 控制 Google Chrome 工具栏中的扩展程序图标。用来显示图标
这个弹出窗口的 HTML 引用了一个名为button.css. 将另一个文件添加到扩展的目录,然后添加以下代码。
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
border: none;
border-radius: 2px;
}
button.current {
box-shadow: 0 0 0 2px white,
0 0 0 4px black;
}
工具栏图标的名称也包含action在该default_icon字段中。在此处下载 images 文件夹,解压缩,并将其放在扩展程序的目录中。更新清单,以便扩展知道如何使用图像。
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
}
}
扩展程序还会在扩展程序管理页面、权限警告和网站图标上显示图像。这些图像在清单中指定icons。
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
}
弹出 UI 的最后一步是为按钮添加颜色。创建一个以popup.js以下代码命名的文件并将其添加到扩展的目录中。
// Initialize button with user's preferred color
let changeColor = document.getElementById("changeColor");
chrome.storage.sync.get("color", ({ color }) => {
changeColor.style.backgroundColor = color;
});
此代码popup.html从存储中获取按钮并请求颜色值。然后它将颜色应用为按钮的背景。popup.js在 中包含一个脚本标签popup.html。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="button.css">
</head>
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
重新加载扩展程序以查看绿色按钮。
5.层逻辑
该扩展现在有一个自定义图标和一个弹出窗口,它根据保存到扩展存储中的值为弹出按钮着色。接下来,它需要进一步的用户交互逻辑。popup.js通过将以下内容添加到文件末尾来更新。
// When the button is clicked, inject setPageBackgroundColor into current page
changeColor.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setPageBackgroundColor,
});
});
// The body of this function will be executed as a content script inside the
// current page
function setPageBackgroundColor() {
chrome.storage.sync.get("color", ({ color }) => {
document.body.style.backgroundColor = color;
});
}
更新后的代码click向按钮添加了一个事件侦听器,该事件侦听器会触发以编程方式注入的内容脚本。这会将页面的背景颜色变为与按钮相同的颜色。使用编程注入允许用户调用内容脚本,而不是自动将不需要的代码插入网页。
清单将需要activeTab允许扩展临时访问当前页面的scripting权限,以及使用脚本 APIexecuteScript方法的权限。
{
"name": "Getting Started Example",
...
"permissions": ["storage", "activeTab", "scripting"],
...
}
该扩展现在功能齐全!重新加载扩展程序,刷新此页面,打开弹出窗口并单击按钮将其变为绿色!