為什麼從內容腳本存取 Chrome API 時出現「無法讀取未定義的屬性」？

從內容腳本存取Chrome API：解決「無法讀取未定義的屬性」錯誤

從以下位置存取Chrome API（例如chrome.tabs）時在內容腳本中，開發人員可能會遇到「無法讀取未定義的屬性」錯誤。出現此錯誤的原因是內容腳本對 Chrome API 的存取權限受到限制。

問題中提供的清單檔案中的權限部分包含選項卡權限。但是，此權限僅授予對背景腳本、彈出腳本或服務工作執行緒中的選項卡 API 的存取權限。

錯誤原因

內容腳本被注入到 web 中頁面並具有一組有限的可以使用的 API。這些 API 包括：chrome.i18n、chrome.dom、chrome.storage 以及 chrome.runtime 和 chrome.extension 的子集。像 chrome.tabs 這樣操作瀏覽器標籤和視窗的 API 在內容腳本中不可用。

解決方案

要解決此錯誤，解決方案是傳遞從內容腳本到後台腳本的訊息。然後，後台腳本可以使用 chrome.tabs API 並回應來自內容腳本的訊息。

以下是示例實現：

內容腳本：

chrome.runtime.sendMessage({ action: "getTabsInfo" }, (response) => {
    // Process the response from the background script
});

背景script:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "getTabsInfo") {
        chrome.tabs.query({}, (tabs) => {
            sendResponse({ tabs });
        });
        return true;
    }
});

透過使用此方法，內容腳本可以透過向後台腳本發送訊息來存取Chrome API。

以上是為什麼從內容腳本存取 Chrome API 時出現「無法讀取未定義的屬性」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！