Why Do I Get 'Cannot read property of undefined' When Accessing Chrome APIs from a Content Script?

Accessing Chrome APIs from Content Scripts: Resolving the "Cannot read property of undefined" Error

When accessing Chrome APIs like chrome.tabs from a content script, developers may encounter the "Cannot read property of undefined" error. This error occurs because content scripts have limited access to Chrome APIs.

The permissions section in the manifest file, as provided in the question, includes the tabs permission. However, this permission only grants access to the tabs API in background scripts, popup scripts, or service workers.

Cause of the Error

Content scripts are injected into web pages and have a restricted set of APIs they can use. These APIs include: chrome.i18n, chrome.dom, chrome.storage, and a subset of chrome.runtime and chrome.extension. APIs like chrome.tabs, which manipulate browser tabs and windows, are not available in content scripts.

Solution

To resolve this error, the solution is to pass a message from the content script to the background script. The background script can then use the chrome.tabs API and respond to the message from the content script.

Here is an example implementation:

Content script:

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

Background script:

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

By using this approach, content scripts can access Chrome APIs by sending messages to background scripts.

The above is the detailed content of Why Do I Get 'Cannot read property of undefined' When Accessing Chrome APIs from a Content Script?. For more information, please follow other related articles on the PHP Chinese website!