update: 修改文件 🥳

Author: godwei123

Diff for: docs/.vitepress/serviceWorker.ts

@@ -2,29 +2,127 @@
 
 > 浏览器插件是一种可以在浏览器中安装的软件，它可以增强浏览器的功能，比如可以通过插件实现广告屏蔽、页面翻译、下载管理等功能。
 
-## 开发基础知识概念介绍
+## manifest.json
 
-### 1. 插件的分类
+manifest.json 是插件的配置文件，它可以配置插件的名称、版本、图标、权限等。
 
-浏览器插件主要分为以下几类：
+```json5
+{
+  name: "My Extension",
+  version: "1.0",
+  manifest_version: 3,
+  description: "This extension is a starting point to create a real extension.",
+  permissions: ["storage", "activeTab"],
+  action: {
+    default_popup: "popup.html",
+    default_icon: {
+      "16": "images/get_started16.png",
+      "48": "images/get_started48.png",
+      "128": "images/get_started128.png",
+    },
+  },
+  background: {
+    service_worker: "background.js",
+  },
+  options_page: "options.html",
+  content_scripts: [
+    {
+      matches: ["<all_urls>"],
+      js: ["content.js"],
+      css: [],
+    },
+  ],
+  web_accessible_resources: ["images/*.png"],
+  icons: {
+    "16": "images/get_started16.png",
+    "48": "images/get_started48.png",
+    "128": "images/get_started128.png",
+  },
+  browser_action: {
+    default_popup: "popup.html",
+    default_icon: {
+      "16": "images/get_started16.png",
+      "48": "images/get_started48.png",
+      "128": "images/get_started128.png",
+    },
+  },
+  host_permissions: ["http://www.example.com/"],
+  optional_permissions: ["tabs"],
+  chrome_url_overrides: {
+    newtab: "newtab.html",
+  },
+}
+```
 
-- **扩展插件**：扩展插件是一种可以修改浏览器的行为的插件，比如可以通过扩展插件实现广告屏蔽、页面翻译、下载管理等功能。
-- **主题插件**：主题插件是一种可以修改浏览器的外观的插件，比如可以通过主题插件修改浏览器的背景、图标等。
-- **应用插件**：应用插件是一种可以在浏览器中运行的应用程序，比如可以通过应用插件实现在线聊天、音乐播放等功能。
-- **搜索插件**：搜索插件是一种可以在浏览器中添加搜索引擎的插件，比如可以通过搜索插件添加百度、谷歌等搜索引擎。
-- **工具栏插件**：工具栏插件是一种可以在浏览器中添加工具栏的插件，比如可以通过工具栏插件添加书签、历史记录等功能。
-- **辅助插件**：辅助插件是一种可以在浏览器中添加辅助功能的插件，比如可以通过辅助插件实现页面截图、网页翻译等功能。
+## background.js
 
-### background.js
+background.js 是插件的后台脚本，它可以监听浏览器事件、处理插件请求、与页面通信等。基于 background 的 service_workerAPI 可以打开一个独立后台运行脚本。此脚本会随着插件安装，初始化执行一次，然后一直在后台运行。可以用来存储浏览器的全局状态数据。background 脚本是长时间运行在后台，随着浏览器打开就运行，直到浏览器关闭而结束运行。通常把需要一直运行的、启动就运行的、全局公用的数据放到 background 脚本。
 
-background.js 是插件的后台脚本，它可以监听浏览器事件、处理插件请求、与页面通信等。
+```js
 
-### content.js
+```
 
-content.js 是插件的内容脚本，它可以在页面中注入脚本、修改页面内容、与页面通信等。
+## content.js
 
-### manifest.json
+content.js 是插件的内容脚本，它可以在页面中注入脚本、修改页面内容、与页面通信等。content-scripts（内容脚本）是在网页上下文中运行的文件。通过使用标准的文档对象模型(DOM)，它能够读取浏览器访问的网页的详细信息，可以对打开的页面进行更改，还可以将 DOM 信息传递给其父级插件。内容脚本相对于 background 还是有一些访问 API 上的限制，它可以直接访问以下 chrome 的 API
 
-manifest.json 是插件的配置文件，它可以配置插件的名称、版本、图标、权限等。
+- i18n
+- storage
+- runtime:
+  - connect
+  - getManifest
+  - getURL
+  - id
+  - onConnect
+  - onMessage
+  - sendMessage
+
+content.js 运行于一个独立、隔离的环境，它不会和主页面的脚本或者其他插件的内容脚本发生冲突 有 2 种方式添加 content 脚本,一种是通过 manifest.json 配置，另一种是通过 chrome.tabs.executeScript()方法注入。通过 manifest.json 配置的方式，需要在 manifest.json 中配置 content_scripts 属性，如下所示：
+
+```json5
+{
+  content_scripts: [
+    {
+      matches: ["<all_urls>"],
+      js: ["content.js"],
+      css: [],
+    },
+  ],
+}
+```
+
+content_scripts 属性除了配置 js，还可以设置 css 样式，来实现修改页面的样式。matches 表示需要匹配的页面；除了这 3 个属性，还有
+
+run_at: 脚本运行时刻，有以下 3 个选项：
+
+- document_idle，默认；浏览器会选择一个合适的时间注入，并是在 dom 完成加载
+- document_start；css 加载完成，dom 和脚本加载之前注入。
+- document_end：dom 加载完成之后
+
+exclude_matches：排除匹配到的 url 地址。作用和 matches 相反。
+
+chrome.tabs.executeScript()方法注入，可以通过 chrome.tabs.executeScript()方法注入脚本，如下所示：
+
+```js
+chrome.tabs.executeScript(tabId, {
+  file: "content.js",
+});
+```
+
+## popup.html
+
+popup.html 是插件的弹窗页面，它可以显示插件的功能、与用户交互等。
+
+## options.html
+
+options.html 是插件的设置页面，它可以配置插件的参数、保存用户设置等。
+
+## newtab.html
 
 ## 浏览器插件开发-通信
+
+[浏览器插件开发-通信](./浏览器插件开发-通信篇.md)
+
+## 参考链接
+
+- [浏览器插件开发](https://mp.weixin.qq.com/s/QUgT5bGRutstyo0l6nHFfg)

Diff for: docs/.vitepress/webWorker.js

@@ -1,19 +1,3 @@
 # JavaScriptGuide dev
 
 ![img.png](./public/javascript-guide-logo.svg)
-
-```text
-canvas
-requestAnimationFrame
-innerWidth/Height...
-style="--i: 2; --j: 0"
-transform-style: preserve-3d;
-perspective: 1000px;
-scroll-snap-type
-scroll-snap-align: start;
-textShadow
-shape-outside: circle();
-background-clip: text;
--webkit-background-clip: text;
--webkit-text-fill-color: transparent;
-```