在内容脚本中使用 chrome.tabs 或其他 chrome API 时"Cannot read property of undefined"

chrome.tabs返回未定义，尽管我在权限块中设置了选项卡。

"permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
],
"content_scripts": [
    {
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "js": [
            "js/myScript.js"
        ],
        "all_frames": true
    }
],

但在myScript.js，chrome.tabs是undefined。

内容脚本只能使用chrome。i18n，铬。dom，铬。storage 和铬的一个子集。runtime/铬。extension .

大多数chrome API(如 chrome.tabs(仅在后台脚本(MV3 中的服务工作者(、弹出脚本等中可用。

溶液

将消息从内容脚本传递到后台脚本，并在后台脚本中使用 API。

内容脚本对 Chrome API 的访问权限有限。此访问不包括您尝试使用的 API(例如 chrome.tabs(。如果需要使用该 API，则必须在后台脚本¹ 中执行此操作。

如 Chrome 的内容脚本文档中所列，内容脚本可用的 API 包括 [我已将已弃用的方法置于

~~删除线~~格式中]：

扩展名 ( getURL ， inIncognitoContext ， lastError ，
~~onRequest~~ ， ~~sendRequest~~ (
i18n
运行时 ( 连接，获取清单， getURL ， id ， onConnect ， onMessage ， sendMessage (
存储

列出的几个 API 已弃用，并且已经存在了一段时间。那些被弃用的已移动到不同的位置(也列在上面(：

extension.onRequest ➞ runtime.onMessage
extension.sendRequest ➞ runtime.sendMessage

虽然没有正式弃用，但extension.lastError也可以作为runtime.lastError使用。此时，通常在该位置引用它：

extension.lastError ➞ runtime.lastError

将扩展划分为后台脚本和内容脚本

您需要根据每种类型的脚本可用的功能，将代码分为需要包含在后台脚本中的内容和需要在内容脚本中的内容。内容脚本有权访问注入它们的网页的 DOM，但对扩展 API 的访问权限有限。后台脚本对扩展 API 具有完全访问权限，但无法访问网页内容。您应该阅读Chrome扩展程序概述以及从那里链接的页面，以了解哪些功能应该位于哪种类型的脚本中。

通常需要在内容脚本和后台脚本之间进行通信。为此，您可以使用消息传递。这允许您在两个脚本之间传达信息，以完成仅使用一种类型的脚本无法完成的事情。例如，在您的内容脚本中，您可能需要只能从其他 Chrome API 之一获得的信息，或者您需要通过其他 Chrome 扩展程序 API 之一最合适(或只能(完成某些事情。在这些情况下，您需要使用 chrome.runtime.sendMessage() 向后台脚本发送消息，告诉它需要做什么，同时提供足够的信息使其能够这样做。然后，后台脚本可以将所需的信息(如果有(返回到内容脚本。或者，有时处理将主要在后台脚本中完成。后台脚本可以注入内容脚本，或者只是向已注入的脚本发送消息，以从页面获取信息或对网页进行更改。

<小时 />

是指后台上下文中的任何脚本。除了实际的background脚本外，还包括弹出窗口和选项页面等。但是，唯一可以确保始终可用于从内容脚本接收消息的页面是在 manifest.json 中定义的实际background脚本。由于用户与浏览器的交互，其他页面可能在某些时候可用，但它们并非始终可用。

^{这个答案是从重复的问题中移出的，然后进行了修改。}

https://developer.chrome.com/extensions/tabs#method-getSelected 显示

获取所选

chrome.tabs.getSelected(integer windowId， function 回调(
自 Chrome 33 起已弃用。请使用 tabs.query {active： true}。
获取在指定窗口中选择的选项卡。

也许，你应该在弹出窗口中使用chrome.tabs.query.js像这样

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    console.log(tabs[0].url);
});

，重新加载扩展并在扩展的 inspect 元素中检查结果。

结果图像

代码图像

https://developer.chrome.com/extensions/tabs#type-Tab 表明选项卡显示的 URL。仅当扩展的清单包含"选项卡"权限时，此属性才存在。(只是为了提醒某人忘记了。我刚刚测试它时忘记了它。

也检查这个答案 https://stackoverflow.com/a/6718277/449345这个对我有用

chrome.tabs.getSelected(null, function(tab){
    console.log(tab);
});

溶液

将扩展划分为后台脚本和内容脚本

获取所选

结果图像

代码图像

相关内容

最新更新

热门标签：