Why Can't My Content Script Access chrome.tabs and How Do I Fix the 'Undefined Reference' Error?

Content Scripts and Chrome APIs: Undefined Reference Error

When working with content scripts in Chrome extensions, you may encounter the error "Cannot read property of undefined" when attempting to access Chrome APIs such as chrome.tabs. This issue arises despite granting the necessary permissions in the manifest.

Understanding Chrome API Availability

Content scripts have limited access to Chrome APIs due to security considerations. Only a select group of APIs are accessible within content scripts:

• chrome.i18n
• chrome.dom
• chrome.storage
• A subset of chrome.runtime/chrome.extension

APIs such as chrome.tabs, which manipulate browser tabs, are only available in the background script (or service worker in Manifest V3), popup scripts, and other extension contexts.

Solution: Message Passing

To access Chrome APIs that are unavailable in content scripts, you must pass messages from the content script to the background script. The background script can then perform the API operation and send the results back to the content script.

Here's a code snippet demonstrating this approach:

// content script:

chrome.runtime.sendMessage({ type: "getTabs" }, function(response) {
  console.log(response.tabs);
});

// background script:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.type == "getTabs") {
    chrome.tabs.query({}, function(tabs) {
      sendResponse({ tabs: tabs });
    });
  }
});

By following this approach, you can effectively access Chrome APIs that are unavailable within content scripts while maintaining security and encapsulation.

The above is the detailed content of Why Can't My Content Script Access chrome.tabs and How Do I Fix the 'Undefined Reference' Error?. For more information, please follow other related articles on the PHP Chinese website!