javascript - Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'query') get current

admin管理员组

文章数量:1389824

I'm referencing the instruction on .

I know there are many questions on this but I want to get the url of the current tab. The problem is I'm getting an error I'm struggling to understand.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'query')

I've tried moving the snippet of code to the background.js, pop.js, and the content.js files.

background.js

async function getTabUrl() {
    const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
    console.log(tab);
    return tab[0].url;
}

getTabUrl().then(tab => console.log(tab))

manifest.json

{
    "manifest_version": 3,
    "name": "...",
    "description": "...",
    "version": "1",
    "action": {
        "default_popup": "popup.html",
        "default_icon": "icons/favicon.ico"
    },
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "js": [
                "scripts/content.js"
            ],
            "matches": [
                ...
            ]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

scripts/content.js is blank.

I'm referencing the instruction on https://developer.chrome./docs/extensions/reference/tabs/#get-the-current-tab.

I know there are many questions on this but I want to get the url of the current tab. The problem is I'm getting an error I'm struggling to understand.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'query')

I've tried moving the snippet of code to the background.js, pop.js, and the content.js files.

background.js

async function getTabUrl() {
    const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
    console.log(tab);
    return tab[0].url;
}

getTabUrl().then(tab => console.log(tab))

manifest.json

{
    "manifest_version": 3,
    "name": "...",
    "description": "...",
    "version": "1",
    "action": {
        "default_popup": "popup.html",
        "default_icon": "icons/favicon.ico"
    },
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "js": [
                "scripts/content.js"
            ],
            "matches": [
                ...
            ]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

scripts/content.js is blank.

• javascript
• google-chrome-extension
• chrome-extension-manifest-v3

Share Improve this question Follow asked Oct 30, 2022 at 9:01 engineer-xengineer-x 3,23522 gold badges1919 silver badges4747 bronze badges 1

• I get a different error: "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'url')". The error occurs in the line return tab[0].url; – Thomas Mueller Commented Oct 30, 2022 at 9:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Cannot read properties of undefined (reading 'query')

This error says that the parent of query is undefined i.e. chrome.tabs is undefined. It happens if you run this code in the wrong place e.g. in a content script or in a web page console.

Note that chrome://extensions will show old errors even after reloading the extension, so you can clear them by clicking the trashcan icon or the Clear all button.

I've tried moving the snippet of code to the background.js, pop.js, and the content.js files.

Each part of the extension has its own method of getting the active URL:

• In the content script it's just location.href, no need for any permissions.
• In the popup it's your getTabUrl, however since the popup is a separate window it has its own devtools and console: right-click inside the popup and select "inspect" in the menu to see it.
• In the background script you would normally use the tabId or tab property of the event in your chrome API listener like chrome.tabs.onUpdated. Note that just calling getTabUrl() in the background script is pretty meaningless: it runs at browser startup, possibly before any tabs are created, or when you reload the extension so the active tab is chrome://extensions.

Note that activeTab is not about granting the permission to any active tab, but only to the active tab in which the user interacted with your extension explicitly, e.g. clicked the extension icon.

This sample gets the URL of the active tab in popup.

popup.js

const elmUrl = document.getElementById("url");

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  const url = tabs[0].url;
  console.log("url=", url);
  elmUrl.innerText = url;
});

manifest.json

{
  "name": "Get URL of Active tab in popup",
  "manifest_version": 3,
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    * {
      font-size: x-large;
    }
  </style>
</head>

<body style="min-width:300px;min-height:100px;">
  <span id="url"></span>
  <script src="popup.js"></script>
</body>

</html>

本文标签：