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