在內容腳本中使用 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);
});