Chrome 擴充功能:擴充 API 以支援即時導覽功能

Dave Tapuska
Dave Tapuska

重點摘要:Extension API 經過更新,可支援往返快取 預先載入導覽。詳情如下。

Chrome 不斷在加快瀏覽速度。即時導航 技術,例如往返快取 (透過電腦出貨: Chrome 96) 和推測規則 (在 Chrome 103 中推出) 改善了回溯和未來的發展方向 無須專人管理我們將在這篇文章中介紹瀏覽器的幾項更新 來執行這些新的工作流程

瞭解網頁類型

在我們推出往返快取和預先算繪之前 分頁內只有一個有效網頁。以前看到的都是如此。如果 使用者返回上一頁,系統就會刪除使用中的網頁 (網頁 B) 而記錄中的上一頁將會完全重建 (第 A 頁)。 擴充功能也不必擔心生命週期頁面有哪些部分 這是因為分頁只有一個,處於啟用/可見狀態

移除使用中的網頁
移除使用中的網頁。

有了往返快取和預先轉譯功能, 標籤與頁面之間的關係現在,每個分頁都會儲存多個 頁面和頁面在狀態之間轉換,並不會遭到刪除

例如頁面可能會以預先算繪 (未顯示) 的頁面開始運作 並在使用者點擊連結時轉換為活動 (可見) 網頁, 儲存到「往返快取」(不會顯示) 中 而這些網頁也不會遭到刪除。本文的後續說明 我們將介紹各種新屬性,幫助擴充功能 狀態頁面

網頁類型
網頁類型。

請注意,分頁標籤可包含一系列預先算繪頁面 (不只是一個頁面), (可見) 網頁,以及一系列往返快取網頁。

本次異動對擴充功能開發人員有何影響?

FrameId == 0

在 Chromium 中,最上層/主要頁框稱為最外層。

假定 frameId 的擴充功能作者 的最外層為 0 (先前的最佳做法) 可能會有問題。 由於一個分頁現在可以有多個外層 (預先轉譯和快取) 網頁),系統會假設 標示的影格不正確「frameId == 0」仍會是 「活躍」頁面的最外層,但最外層的頁框 同一個分頁中的「其他」頁面顯示的值不是零。frameType 的新欄位包含 ,即可解決這個問題。詳情請參閱「如何判斷影格是否為最外側的影格?」 一節。

影格與文件的生命週期

擴充功能的另一個問題是 相框。頁框可代管文件 (與已修訂網址相關聯)。 文件可以變更 (例如透過瀏覽),但 frameId 不會,, 很難將某份文件發生的情況與 只有 frameIds。我們導入了 documentId 的概念 也就是每份文件的專屬 ID如果有使用者瀏覽的影格 會開啟新的文件,ID 將會變更。這個欄位適用於 決定網頁何時會變更生命週期狀態 (介於 預先算繪/主動/快取) 相同。

網站導覽事件

chrome.webNavigation 命名空間中的事件 可以多次觸發 視所在生命週期而定 顯示相同頁面詳情請見 「如何判斷網頁所屬的生命週期?」 以及「如何判斷頁面轉移時間?」章節。

如何判斷網頁所屬的生命週期?

DocumentLifecycle 已為一些擴充功能 API 新增類型,其中 frameId 是 如果事件中出現 DocumentLifecycle 類型 (例如 onCommitted)、 這個值是產生事件的狀態。你隨時可以查詢 資訊來源:WebNavigation getFrame()getAllFrames() 方法,但還是建議您使用事件的值。使用 這兩種方法都知道影格狀態可能會在事件發生時間 產生的值,並解決兩者都傳回的結果。

DocumentLifecycle 具有下列值:

  • "prerender 吋:目前未向使用者顯示,但準備向使用者顯示。
  • "active":目前向使用者顯示。
  • "cached":儲存在往返快取中。
  • "pending_deletion":文件正在遭到刪除。

如何判斷影格是否為最外層的影格?

先前的擴充功能可能會檢查 frameId == 0 來判斷 這個事件是否適用於最外層的影格。有多個頁面 分頁中,我們有多個外層的影格,因此 frameId 的定義是 則有問題您絕不會收到快取/轉送相關事件 相框。然而,針對預先算繪影格,frameId 會 最外層的影格速率為零。因此,使用 frameId == 0 做為 判斷是否最外層的影格不正確。

為解決這個問題,我們推出了名為 FrameType敬上 因此,現在可以輕鬆判斷影格是否確實位於最外側的影格。 FrameType 具有下列值:

  • "outermost_frame":通常稱為頂層影格。請注意, 這些都可以例如,如果您有預先算繪 每個頁面都有一個最外層的頁框,可以稱為最上層頁框
  • "fenced_frame":保留供日後使用。
  • "sub_frame":一般為 iframe。

我們可以將 DocumentLifecycleFrameType 結合,並判斷影格是否 使用最外層的外層畫面例如:tab.documentLifecycle === “active” && frameType === “outermost_frame”

如何解決頁框的使用時間問題?

如同我們先前所說的,頁框代管文件,頁框可能會前往新的 文件,但 frameId 不會變更。這樣當您產生問題時 收到一個只包含 frameId 的事件。您可以查詢網址 可能會與實際發生時間不同 在使用上存在問題

為解決這個問題,我們推出了 documentId (和 parentDocumentId)。 webNavigation.getFrame() 如果提供 documentId,方法現在會讓 frameId 變為選用。 每當使用者瀏覽影格時,documentId 都會變更。

如何判斷頁面轉換的時機?

可以透過明確信號判斷網頁在狀態之間轉換的時機。

現在來看看 WebNavigation 事件

初次瀏覽任何網頁時,您會看見四個事件順序 。請注意,在設定過程中, DocumentLifecycle 狀態為 "prerender""active"

onBeforeNavigate
onCommitted
onDOMContentLoaded
onCompleted

如下圖所示,documentId 會改變 預先算繪頁面變成使用中網頁時為 "xyz"

當預先算繪頁面變為使用中頁面時,documentId 就會變更
documentId在預先算繪頁面變成 有效頁面。

網頁從往返快取或預先算繪到 運作中狀態還有三個事件 (但有 DocumentLifecyle 個) 如 "active")。

onBeforeNavigate
onCommitted
onCompleted

documentId 將與原始事件相同。這是 上述 documentId == xyz 啟動時。請注意, 相同的導覽事件觸發,但 onDOMContentLoaded 除外 事件,因為頁面已載入。

如有任何意見或問題,歡迎到 chromium-extensions 群組。