Javascript 从“popup.html”访问当前选项卡DOM对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1964225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing Current Tab DOM Object from "popup.html"?
提问by Khaled Musaied
I'm developing an extension for Google Chrome browser. I could not figure out how to access the current tab DOM object from the "popup.html" page. any suggestions?
我正在为 Google Chrome 浏览器开发扩展程序。我无法弄清楚如何从“popup.html”页面访问当前选项卡 DOM 对象。有什么建议？
采纳答案by Mohamed Mansour
By default, within popup.js/popup.html, the "document" object refers to the extension's popup window's document only. To get the DOM for a specific tab (for instance the currently active tab), you would need to use content scripts communications. For example we need to send a request from the extensionto your content script via popup, so in the popup.html you do something like this:
默认情况下，在 popup.js/popup.html 中，“document”对象仅指扩展的弹出窗口的文档。要获取特定选项卡（例如当前活动选项卡）的 DOM，您需要使用内容脚本通信。例如，我们需要通过popup从扩展程序向您的内容脚本发送请求，因此在 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);
});
});
Now in the content script, we need to listen for those eventscoming from the extension, so in some file we named dom.js
现在在内容脚本中，我们需要监听来自扩展的事件，所以在一些我们命名为 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..
});
Now remember to setup your manifestto include the content script and tab permission.
现在请记住设置您的清单以包含内容脚本和选项卡权限。
回答by Timothy Law
This is the latest fix:
这是最新的修复：
popup.js
弹出窗口.js
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
(Note: the above console.log(response.farewell) is for popup.html, not your current tab)
（注意：上面的 console.log(response.farewell) 是针对 popup.html 的，不是你当前的标签页）
contentscript.js
内容脚本.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
回答by goliatone
This answer seems to not be working with the latest API. This is a working example.
这个答案似乎不适用于最新的 API。这是一个工作示例。
popup.js:
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:
获取描述.js：
window.onload = function() {
chrome.runtime.onMessage.addListener(function(msg, _, sendResponse) {
console.log('onMessage', msg);
if (msg.greeting == "hello") {
sendResponse({farewell: "goodbye"});
} else{
sendResponse({});
}
});
};
relevant parts of manifest.json:
manifest.json 的相关部分：
{
"permissions": [
"tabs"
],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["getDescription.js"]
}
]
}
