整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
響應(yīng)分析ーー瀏覽器從響應(yīng)中分析 HTML 數(shù)據(jù)。
DOM 樹創(chuàng)建ーー從解析的 HTML 構(gòu)建文檔對象模型(DOM)樹。
樣式表解析ーー解析樣式表，將呈現(xiàn)數(shù)據(jù)鏈接到 DOM 節(jié)點。
執(zhí)行ーー執(zhí)行 代碼，修改 DOM 。
頁面渲染ーー使用 DOM 和樣式數(shù)據(jù)顯示網(wǎng)頁。
3.1 HTML 解析
瀏覽器一個字符一個字符地讀取 HTML，標識元素、屬性和文本，然后構(gòu)建表示網(wǎng)頁結(jié)構(gòu)的 DOM 樹，并確保正確顯示 HTML 代碼。
3.2 CSS 對象模型
CSS 對象模型表達了應(yīng)用于 HTML 元素的樣式，類似于 DOM 樹的結(jié)構(gòu)化層次結(jié)構(gòu)，并考慮了樣式的特殊性和級聯(lián)性，允許訪問、操作和計算樣式。
3.3 布局管理器
布局管理器結(jié)合 DOM 和 CSS 對象模型形成渲染樹，根據(jù)內(nèi)容、填充等確定Box的尺寸，使用各種方法構(gòu)建具體位置。同時，使用堆疊上下文和 Z 索引處理重疊元素，使用批處理等技術(shù)來優(yōu)化布局變更。最后，在屏幕上繪制元素，在用戶交互期間不斷更新。
4 插件機制
當使用插件時，瀏覽器的操作比普通網(wǎng)頁還要簡單。渲染過程負責(zé)運行網(wǎng)頁，打開頁面時，.js被加載并注入到網(wǎng)頁環(huán)境中，操作類似于 ，操作 DOM 樹并改變顯示。GPU 進程支持渲染插件接口的硬件功能，網(wǎng)絡(luò)進程管理插件中的外部資源請求，例如，插件依賴于外部 的JS 資源。同時，存儲進程為插件提供了本地存儲功能，使用chrome.storage.local在chrome擴展中本地存儲和檢索數(shù)據(jù)。瀏覽器進程起到了橋梁的作用，促進了 Page和.js之間的通信。
4.1 插件的發(fā)展歷程
插件機制的發(fā)展過程如下：
總體而言，Chrome 插件（也被稱為擴展）已經(jīng)經(jīng)歷了3個主要版本的版本開發(fā): V1、 V2和 V3。
V1 (MV1)是 Chrome 擴展清單的初始版本，已經(jīng)被放棄。 V2 (MV2)是當前 Chrome 擴展中廣泛使用的主流版本，它提供了一個健壯的框架，用于構(gòu)建具有增強瀏覽器功能的特性和功能的擴展。 V3是最新的版本，正在逐步取代 MV2。引入 MV3是為了解決安全性和性能方面的問題，它強化了更強的安全措施，并促進了擴展開發(fā)中的更好性能。從 Chrome 127開始(2024年6月) ，谷歌開始在預(yù)穩(wěn)定版本的 Chrome 中禁用 V2擴展，鼓勵開發(fā)者轉(zhuǎn)向 MV3。
4.2 的 功能特點與版本遷移
V2 的功能特性：
V3 的功能特性：
V3代表了從 V1和 V2的重大轉(zhuǎn)變，受到 Chrome 致力于提高隱私、安全性和擴展的整體性能的驅(qū)動。與之前的版本不同， V3優(yōu)先考慮資源利用率，解決了人們對 Chrome 歷史性的高資源利用率的擔(dān)憂。其核心目標是通過擴展來限制系統(tǒng)資源消耗，以優(yōu)化瀏覽器性能。在施加額外限制的同時， V3引入了顯著的好處。 功能允許擴展操作，而無需一直駐留在后臺。這樣可以回收擴展資源，有效地減少總體瀏覽器開銷。對規(guī)則計算的限制作為一種控制機制，確保單個擴展不會過度消耗資源。這些改變共同促進了 Chrome 瀏覽器更加流暢的體驗，符合用戶對提高瀏覽器效率的期望。
在從V2遷移到V3的時候，由于缺少用于配置頁面背景的 . html，與 V2版本不同的是，windows 對象上的 不再適用于 . html 來構(gòu)造 AJAX 請求。相反，必須利用提取方法來獲取接口數(shù)據(jù)。
另外，由于service workers 的生命周期很短，并且在非活動期間終止，因此他們在整個插件生命周期中偶爾啟動、運行和終止，從而引入不穩(wěn)定性。在 MV2中，全局變量被用來直接存儲數(shù)據(jù)。為了適應(yīng)這種情況，需要對 .js 中的邏輯進行修改，以提高穩(wěn)定性和功能性。而且，從 API 過渡到 API 需要大量的代碼重構(gòu)。
4.3 Chrome 插件的主要構(gòu)成4.3.1 文件
.json 文件對于位于根目錄中的 Chrome 插件非常重要。它用于配置所有插件設(shè)置，其基本參數(shù)為 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"
]
}
V3的一個示例如下：
{
"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"]
}4.3.2 內(nèi)容腳本
Chrome 插件中的內(nèi)容腳本通過配置將 JS 和 CSS 注入到指定的頁面中。它們與原始頁面共享 DOM，但不與 JS 共享。訪問頁面 JS 變量需要注入 JS。內(nèi)容腳本無法訪問大多數(shù) Chrome API，除了:
* chrome.
* chrome.i18n
* chrome.runtime
* chrome.storage
對于其他 API，需要與后臺或service worker進行通信。
4.3.3 后臺腳本
Chrome 擴展中的后臺腳本具有最長的生命周期，并且在瀏覽器打開時連續(xù)運行。它擁有廣泛的權(quán)限，允許訪問大多數(shù) Chrome 擴展 API 和跨源請求，而不受 CORS 限制。在 V3中，后臺頁被具有較短生命周期和基于事件的執(zhí)行的服務(wù)工作者所替代，這使得它們不適合存儲全局變量。
4.3.4 彈窗
彈出窗口是一個小窗口的網(wǎng)頁，出現(xiàn)在點擊右上角的圖標。當用戶在網(wǎng)頁之外進行互動時，它會迅速關(guān)閉。通常用于臨時交互，其權(quán)限級別類似于背景，但具有較短的生命周期。
4.3.5 注入腳本
開發(fā)者在 Chrome 插件開發(fā)過程中創(chuàng)造了“注入腳本”這個術(shù)語。它表示通過 DOM 操作注入到頁面中的 。內(nèi)容腳本雖然能夠操作 DOM，但由于訪問限制，DOM 不能直接調(diào)用它。這種限制在事件綁定中是顯而易見的。為了滿足在 Web 頁面中添加一個按鈕來觸發(fā)插件的常見需求，大家采用了插入腳本。
4.4 Chrome 插件的通信機制
在 Chrome 插件中，通信依賴于五種類型的腳本:
注入腳本，表示動態(tài)注入到網(wǎng)頁中的腳本，通常依賴于 window.。
內(nèi)容腳本，在特定網(wǎng)頁上下文中執(zhí)行的腳本，利用 window.、 chrome.runtime. 和 chrome.runtime.connect 進行腳本間通信。
彈窗腳本，與插件的彈出式界面相關(guān)聯(lián)，通常使用 chrome.tabs. 和 chrome.tabs.connect 進行通信。
后臺腳本，在后臺獨立運行的腳本，涉及多種方法，例如 chrome.tabs.、 chrome.tabs.connect、 chrome.tension. 和 chrome.tension.getView。
，開發(fā)工具的附加功能， 使用諸如 chrome...eval 和 chrome.runtime. 之類的特定 API 進行交互。
每個腳本擁有不同的權(quán)限，強調(diào)了它們之間通信的重要性。這種交互對于啟用廣泛的插件功能非常重要。
5. 一句話小結(jié)
溫故而知新，瀏覽器架構(gòu)作為現(xiàn)代互聯(lián)網(wǎng)的基石，歷經(jīng)多次迭代與創(chuàng)新，始終承載著用戶與網(wǎng)頁內(nèi)容之間的橋梁作用。回顧其發(fā)展歷程，從早期的單一渲染引擎到如今的多進程、多線程架構(gòu)，每一次變革都帶來了更為流暢、安全的瀏覽體驗。展望未來，瀏覽器架構(gòu)將繼續(xù)深化其性能優(yōu)化與安全性提升，為用戶帶來更加出色的網(wǎng)絡(luò)瀏覽體驗。
【關(guān)聯(lián)閱讀】
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
