响应分析ーー浏览器从响应中分析 HTML 数据。

DOM 树创建ーー从解析的 HTML 构建文档对象模型(DOM)树。

样式表解析ーー解析样式表，将呈现数据链接到 DOM 节点。

执行ーー执行 代码，修改 DOM 。

页面渲染ーー使用 DOM 和样式数据显示网页。

3.1 HTML 解析

浏览器一个字符一个字符地读取 HTML，标识元素、属性和文本，然后构建表示网页结构的 DOM 树，并确保正确显示 HTML 代码。

3.2 CSS 对象模型

CSS 对象模型表达了应用于 HTML 元素的样式，类似于 DOM 树的结构化层次结构，并考虑了样式的特殊性和级联性，允许访问、操作和计算样式。

3.3 布局管理器

布局管理器结合 DOM 和 CSS 对象模型形成渲染树，根据内容、填充等确定Box的尺寸，使用各种方法构建具体位置。同时，使用堆叠上下文和 Z 索引处理重叠元素，使用批处理等技术来优化布局变更。最后，在屏幕上绘制元素，在用户交互期间不断更新。

4 插件机制

当使用插件时，浏览器的操作比普通网页还要简单。渲染过程负责运行网页，打开页面时，.js被加载并注入到网页环境中，操作类似于 ，操作 DOM 树并改变显示。GPU 进程支持渲染插件接口的硬件功能，网络进程管理插件中的外部资源请求，例如，插件依赖于外部 的JS 资源。同时，存储进程为插件提供了本地存储功能，使用chrome.storage.local在chrome扩展中本地存储和检索数据。浏览器进程起到了桥梁的作用，促进了 Page和.js之间的通信。

4.1 插件的发展历程

插件机制的发展过程如下：

总体而言，Chrome 插件（也被称为扩展）已经经历了3个主要版本的版本开发: V1、 V2和 V3。

V1 (MV1)是 Chrome 扩展清单的初始版本，已经被放弃。 V2 (MV2)是当前 Chrome 扩展中广泛使用的主流版本，它提供了一个健壮的框架，用于构建具有增强浏览器功能的特性和功能的扩展。 V3是最新的版本，正在逐步取代 MV2。引入 MV3是为了解决安全性和性能方面的问题，它强化了更强的安全措施，并促进了扩展开发中的更好性能。从 Chrome 127开始(2024年6月) ，谷歌开始在预稳定版本的 Chrome 中禁用 V2扩展，鼓励开发者转向 MV3。

4.2 的 功能特点与版本迁移

V2 的功能特性：

V3 的功能特性：

V3代表了从 V1和 V2的重大转变，受到 Chrome 致力于提高隐私、安全性和扩展的整体性能的驱动。与之前的版本不同， V3优先考虑资源利用率，解决了人们对 Chrome 历史性的高资源利用率的担忧。其核心目标是通过扩展来限制系统资源消耗，以优化浏览器性能。在施加额外限制的同时， V3引入了显著的好处。 功能允许扩展操作，而无需一直驻留在后台。这样可以回收扩展资源，有效地减少总体浏览器开销。对规则计算的限制作为一种控制机制，确保单个扩展不会过度消耗资源。这些改变共同促进了 Chrome 浏览器更加流畅的体验，符合用户对提高浏览器效率的期望。

在从V2迁移到V3的时候，由于缺少用于配置页面背景的 . html，与 V2版本不同的是，windows 对象上的 不再适用于 . html 来构造 AJAX 请求。相反，必须利用提取方法来获取接口数据。

另外，由于service workers 的生命周期很短，并且在非活动期间终止，因此他们在整个插件生命周期中偶尔启动、运行和终止，从而引入不稳定性。在 MV2中，全局变量被用来直接存储数据。为了适应这种情况，需要对 .js 中的逻辑进行修改，以提高稳定性和功能性。而且，从 API 过渡到 API 需要大量的代码重构。

4.3 Chrome 插件的主要构成4.3.1 文件

.json 文件对于位于根目录中的 Chrome 插件非常重要。它用于配置所有插件设置，其基本参数为 Manif_ version、 name 和 version。

V2 的一个示例如下：

{
  "manifest_version": 2,
  // Plugin name
  "name": "...",
  // Plugin version
  "version": "1.0.0",
  // Plugin description
  "description": "...",
  "icons": {
    "16": "img/icon16.png",
    "48": "img/icon48.png",
    "128": "img/icon128.png"
  },
  // Persistent background JS or background page
  "background": {
    "scripts": ["js/background.js"]
  },
  // Browser icon settings ：browser_action, page_action, app
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_title": "...",
    "default_popup": "popup.html"
  },
  // Icon displayed only when specific pages are open
  "page_action": {
    "default_icon": "img/icon.png",
    "default_title": "...",
    "default_popup": "popup.html"
  },
  // JS directly injected into pages
  "content_scripts": [{
    "matches": [""],
    "js": ["js/content-script.js"],
    "css": ["css/custom.css"],
    // Code injection timing, default is document_idle
    "run_at": "document_start"
  }],
  // Permissions requested
  "permissions": [
    "contextMenus", // Right-click menu
    "tabs", // Tabs
    "notifications", // Notifications
    "webRequest", // Web requests
    "webRequestBlocking",
    "storage", // Plugin local storage
    "https://*/*" // Websites accessible via executeScript or insertCSS
  ],
  // List of plugin resources directly accessible by normal pages  "web_accessible_resources": ["js/inject.js"],
  "homepage_url": "...", // Plugin homepage
  "chrome_url_overrides": { // Override browser default pages
    "newtab": "newtab.html"
  },
  "options_ui": { // Plugin options page
    "page": "options.html",
    "chrome_style": true
  },
  "omnibox": { "keyword" : "..." }, // Register a keyword in the address bar for search suggestions, only one keyword can be set
  "default_locale": "en", // Default language
  "devtools_page": "devtools.html", // Devtools page entry, can only point to an HTML file    "content_security_policy": "...", // Security policy
  "web_accessible_resources": [ // Loadable resources
    "RESOURCE_PATHS"
  ]
}

{
  "manifest_version": 3,
  "name": "...", 
  "version": "1.0.0",
  "description": "...", 
  "icons": {
    "16": "img/icon16.png",
    "48": "img/icon48.png",
    "128": "img/icon128.png"
  },
  "background": {
    "service_worker": "js/background.js"
  },
  "action": {
    "default_icon": "img/icon.png",
    "default_title": "...", 
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "...",
    "sandbox": "..."
  },
  "web_accessible_resources": [
    {
      "resources": ["RESOURCE_PATHS"]
    }
  ],
  "permissions": [
    "contextMenus",
    "tabs",
    "notifications",
    "webRequest",
    "webRequestBlocking",
    "storage",
    "https://*/*"
  ],
  "web_accessible_resources": ["js/inject.js"],
  "homepage_url": "...", 
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "options_ui": {
    "page": "options.html",
    "chrome_style": true
  },
  "omnibox": {
    "keyword": "..."
  },
  "default_locale": "zh_CN", 
  "devtools_page": "devtools.html",
  "content_security_policy": "...",
  "web_accessible_resources": ["RESOURCE_PATHS"]
}