Question

未捕获（在承诺中）TypeError：无法读取未定义的属性（读取‘查询’）获取 v3 的当前选项卡 url？

2022-10-30

7372

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

我参考了 https://developer.chrome.com/docs/extensions/reference/tabs/#get-the-current-tab 上的说明。

我知道对此有很多疑问，但我想获取当前选项卡的 url。问题是我收到了一个我很难理解的错误。

未捕获（在承诺中）TypeError：无法读取未定义的属性（读取“查询”）

我尝试将代码片段移动到 background.js、pop.js 和 content.js 文件。

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 为空白。

Answer 1

Cannot read properties of undefined (reading 'query')

此错误表示 query 的父级未定义，即 chrome.tabs 未定义。如果您在错误的位置运行此代码，就会发生这种情况，例如在内容脚本或网页控制台中。

请注意，即使重新加载扩展程序后，chrome://extensions 仍会显示旧错误，因此您可以通过单击垃圾桶图标或 全部清除 按钮来清除它们。

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

扩展程序的每个部分都有自己的获取活动 URL 的方法：

在内容脚本中，它只是 location.href ，不需要任何权限。
在弹出窗口中，它是您的 getTabUrl，但是由于弹出窗口是一个单独的窗口，因此它有自己的 devtools 和控制台：在弹出窗口内单击鼠标右键，然后在菜单中选择“检查”即可查看它。
在后台脚本中，您通常会使用 chrome API 侦听器中事件的 tabId 或 tab 属性，例如 chrome.tabs.onUpdated 。请注意，仅在后台脚本中调用 getTabUrl() 是毫无意义的：它在浏览器启动时运行，可能在创建任何选项卡之前，或者在您重新加载扩展程序时运行，因此活动选项卡是 chrome://extensions。

请注意， activeTab 不是向任何活动选项卡授予权限，而只是向用户明确与您的扩展程序交互的活动选项卡授予权限，例如单击扩展程序图标。

Answer 2

此示例获取弹出窗口中活动选项卡的 URL。

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>