從「popup.html」訪問當前選項卡DOM對象？

Question

我正在開發Google Chrome瀏覽器的擴展程序。 我無法弄清楚如何從「popup.html」頁面訪問當前標籤DOM對象。 有什麼建議嗎？

Answer 1

默認情況下，在popup.js/popup.html中，「文檔」對象僅引用擴展的彈出窗口的文檔。要獲取特定選項卡的DOM（例如當前活動選項卡），您需要使用content scripts communications。例如，我們需要通過popup從extension的請求發送到您的內容腳本，所以在popup.html你做這樣的事：

chrome.tabs.getSelected(null, function(tab) { 
    // Send a request to the content script. 
    chrome.tabs.sendRequest(tab.id, {action: "getDOM"}, function(response) { 
    console.log(response.dom); 
    }); 
}); 

現在在內容腳本，我們需要從listen for those events未來延伸，所以在一些文件中，我們命名爲dom.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
if (request.action == "getDOM") 
    sendResponse({dom: "The dom that you want to get"}); 
else 
    sendResponse({}); // Send nothing.. 
}); 

現在還記得設置你的manifest包含內容腳本和標籤許可。

Answer 2

這個答案似乎不適用於最新的API。這是一個工作示例。

popup.js：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    var tab = tabs[0]; 
    console.log(tab.url, tab.title); 
    chrome.tabs.getSelected(null, function(tab) { 
     chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(msg) { 
      msg = msg || {}; 
      console.log('onResponse', msg.farewell); 
     }); 
    }); 
}); 

getDescription.js：manifest.json中的

window.onload = function() { 
    chrome.runtime.onMessage.addListener(function(msg, _, sendResponse) { 
     console.log('onMessage', msg); 
     if (msg.greeting == "hello") { 
      sendResponse({farewell: "goodbye"}); 
     } else{ 
      sendResponse({}); 
     } 
    }); 
}; 

相關部分：

{ 
    "permissions": [ 
     "tabs" 
    ], 

    "content_scripts": [ 
    { 
     "matches": ["http://*/*", "https://*/*"], 
     "js": ["getDescription.js"] 
    } 
    ] 
} 

Answer 3

這是最新的補丁：

popup.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) { 
     console.log(response.farewell); 
    }); 
}); 

（注：以上的console.log（response.farewell）是popup.html，不是你的當前選項卡）

contentscript.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) { 
    if (request.greeting == "hello") 
     sendResponse({farewell: "goodbye"}); 
    }); 

來源：https://developer.chrome.com/extensions/messaging