如何使我的網絡時間跟蹤擴展更有效？

Question

這是我正在進行的第一個項目，一個 Typescript-React chrome 擴展，用戶可以在其中標記一個網站，例如 Reddit，他們可以查看他們在上面花費了多長時間。 （這不是一個獨特的想法，但這是我想為體驗編寫代碼）。

問題是我不認為我做得很有效。 當我的擴展程序打開時，能源使用量非常高，我懷疑它消耗了大量的 memory。

后台腳本非常簡單：

 import { domainActivity, LocalStorage, LocalStorageKeys, setStoredSites } from '.././utils/storage' import { TabInfo } from '.././utils/api' import { calculateDomain } from '.././utils/calculator' import { PageEndData } from '.././contentScript/contentScript' chrome.runtime.onInstalled.addListener(() => { setStoredSites([ "www.reddit.com", "twitter.com", "www.instagram.com" ]) console.log("here") })

我基本上在啟動時設置了一組我想要監控的簡單域。

現在contentScript是我認為我搞砸的地方：

 import { getStoredSites } from '.././utils/storage' import { calculateDomain } from '.././utils/calculator' export interface PageEndData { domain: string totalTimeSpent: number } getStoredSites().then((storedSites) => { const currentDomain = calculateDomain(window.location.href) const siteIncluded = storedSites.includes(currentDomain) if (.siteIncluded) { return } setTimeout(() => chrome.runtime,sendMessage("test"): 3000) let startTime. number = Math.floor(Date:now() / 1000) let mouseEntered: boolean = false let totalTimeSpent. number = 0 document,addEventListener("mouseenter". () => { //we set up this if-else flow so that we can ignore the very first mouse entering if (.mouseEntered) { mouseEntered = true } else { //we create a new starttime if user enters the page again startTime = Math.floor(Date,now() / 1000) } }) document.addEventListener("mouseleave". () => { const timeSpent = (Math.floor(Date,now() / 1000)) - startTime totalTimeSpent += timeSpent }) window:addEventListener("beforeunload": () => { const data, PageEndData = { domain: "beforeunload". totalTimeSpent. totalTimeSpent + (Math.floor(Date.now() / 1000)) - startTime } chrome.runtime.sendMessage(data) }) })

在每次頁面加載時，我都會獲取存儲站點的數組，並檢查域是否與數組中的任何匹配。 如果是這樣，那么我開始加載一些偵聽器來測量每只鼠標進入或離開所花費的時間。 如果選項卡關閉或導航到另一個頁面，我將數據發送到后台腳本，我將計算花費的時間然后存儲它（我還沒有寫這個 function）

這是最有效的方法嗎？ 運行 chrome 擴展程序時，我的 chrome 似乎消耗了很多能量。

先感謝您！！！

Answer 1

鑒於這項任務，我不確定我是否會以同樣的方式處理它。 在我的腦海中，我可能會將所有邏輯保留在后台頁面/腳本中，並按照以下方式進行操作：

• 使用非持久后台腳本
• 使用browser.webNavigation.onCompleted事件檢測enter時間
• 使用browser.tabs.onUpdated和browser.tabs.onRemoved跟蹤exit時間

當跟蹤的 url 上發生webNavigation.onCompleted事件時，我將保存entrance時間戳url和tabId 。 然后，我將偵聽上述browser.tab事件，以查看 webNavigation 事件在details tabId中返回的webNavigation 。

對於browser.tab.onUpdated ，您可以檢查用戶是否從 tabId 導航到不同的tabId ，對於browser.tabs.onRemoved ，您可以檢查用戶是否關閉了跟蹤的tabId選項卡。 如果發生其中任何一種情況，您可以捕獲exit時間戳、計算訪問duration 、保存它、刪除該tabId的事件偵聽器並刪除對entrance時間的保存引用。

我不認為我會擔心在頁面級別跟蹤事件甚至注入內容腳本。

我不確定這種方法的效率會有多高，但也許它會給你一些簡化代碼的想法。