響應分析ーー瀏覽器從響應中分析 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"]
}