在项目文件夹中创建以下文件：
manifest.json
popup.html
popup.js
background.js
Manifest.json
让我们首先创建一个文件，该文件将包含扩展的详细信息，例如（名称，描述）包括其权限。manifest.json
{
"name": "Gettin started example",
"description": "i build a example for getting started",
"version": "1.0.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting"],
"action": {
"default_popup": "popup.html"
}
}
首先，我们指示名称描述和版本，继续阅读，我们将看到属性背景> service_worker这非常重要，因为我们必须注册将在后台执行的文件，在这种情况下，我们有一个文件将被称为background.js
在这里，您可以看到可以在清单中指定的更详细的内容。
Background.js
我们将创建一个调用以查看其工作原理的文件background.js
// background.js
chrome.runtime.onInstalled.addListener(function () {
console.log("Hello from background");
});
首先在后台脚本中包括 runtime.on 的侦听器事件。在onInstalled侦听器中，扩展将显示控制台消息，我们还可以在此处设置持久变量等,
在我们的浏览器中加载扩展程序,
转到浏览器的扩展管理器，我们将激活开发模式,
单击显示加载解压缩的按钮，然后选择包含文件的文件夹,我们应该看到我们的扩展程序已加载
现在，我们将单击检查视图，其中显示服务工作线程，将打开一个选项卡，在控制台中，我们将能够看到我们的消息Hello from background
您已经有一个后台文件，您可以在其中在后台执行脚本，现在我们将继续在我们的扩展中显示表单。
Popup.html
您可能已经注意到，我们在清单中有一个名为 action 的属性：default_popup，其中我们指示一个名为 popup 的文件.html我们将在其中放置一个 html 代码和我们的窗体：
<!DOCTYPE html>
<html>
<body>
<p>Tag for change the border</p>
<input type="text" id="tagcolor" />
<button id="changeColor">Change</button>
<script src="popup.js"></script>
</body>
</html>
我们有一个脚本，我们将创建一个名为popup.js这就是我们要编写逻辑的地方，但让我们回顾一下我们的html的内容，它有一个输入和一个按钮，它们各自的id，用js检索它们并能够执行逻辑
Popup.js
在此文件中，我们将执行几项操作，首先是按id选择我们的按钮
let changeColor = document.getElementById("changeColor");
现在，我们将向此按钮添加一个单击事件，在异步函数中，我们将选择我们的输入，从而拥有我们编写的值。
changeColor.addEventListener("click", async() => {
let inputtag = document.querySelector("#tagcolor");
chrome.storage.sync.set({ inputtag: inputtag.value });
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setBorderColor,
});
});
function setBorderColor() {
chrome.storage.sync.get("inputtag", ({ inputtag }) => {
document.querySelectorAll(inputtag).forEach((element) => {
element.style.border = "1px solid red";
});
});
}
我们会将输入中写入的值发送到我们的 storage.sync，以便以后从 setBorderColor 函数访问它
chrome.storage.sync.set({ inputtag: inputtag.value });
在此之后，我们必须选择我们所在的窗口并将其存储在变量中，为此我们使用数组的解构
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
我们将使用以下代码在屏幕上发送以执行脚本
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: setBorderColor,
});
在这个setBorderColor函数中，我们将要选择的文档已经是我们指示的选项卡中的文档，它不再是我们的弹出窗口.html dom，这必须是清楚的，在函数之外，文档相当于弹出窗口的文档.html我们的扩展。
最后，在 setBorderColor 函数中，我们要做的是获取我们创建的持久值，该值应该是标签、id 或类的名称，作为回调，我们将执行 querySelectorAll，我们将遍历元素并更改 style 属性
border:
function setBorderColor() {
chrome.storage.sync.get("inputtag", ({ inputtag }) => {
document.querySelectorAll(inputtag).forEach((element) => {
element.style.border = "1px solid red";
});
});
}
现在我们将转到任何页面，在这种情况下，我们将放置标签的名称，使用div
结果：
