在内容脚本中使用 chrome.tabs 或其他 chrome API 时“无法读取未定义的属性”

Question

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

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

但在 myScript.js 中，以下返回未定义。

chrome.tabs   

Answer 1

由于内容脚本有其自身的局限性，

chrome.tabs仅在后台脚本和弹出脚本中可用。

如果你想使用chrome.tabs然后将消息从 content_script 传递到后台脚本并使用chrome.tabs 。

Answer 2

内容脚本对 Chrome API 的访问权限有限。 此访问不包括您尝试使用的 API（例如chrome.tabs ）。 如果您需要使用该 API，则必须在后台脚本^{1 中}这样做。

如 Chrome 的内容脚本文档中所列，内容脚本可用的 API 是 [我已将弃用的方法放在删除线格式]：

• 扩展（getURL ， inIncognitoContext ， lastError ， 根据要求 , 发送请求 )
• 国际化
• 运行时（ 连接、 getManifest 、 getURL 、 id 、onConnect 、onMessage 、 sendMessage ）
• 贮存

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

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

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

• extension.lastError .lastError ➞ runtime.lastError

将您的扩展程序划分为后台脚本和内容脚本

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

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

---

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

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

Answer 3

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

被选中

chrome.tabs.getSelected（整数windowId，函数回调）
自 Chrome 33 起已弃用。请使用 tabs.query {active: true}。
获取在指定窗口中选择的选项卡。

也许，你应该像这样在popup.js 中使用 chrome.tabs.query

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

,重新加载您的扩展程序并在扩展程序的检查元素中检查结果。

结果图像

代码图像

https://developer.chrome.com/extensions/tabs#type-Tab显示选项卡显示的 URL。 此属性仅在扩展程序的清单包含“tabs”权限时才存在。 （只是为了提醒有人忘记了。我刚测试的时候就忘记了。）

Answer 4

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

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