Truy cập đối tượng DOM tab hiện tại từ "popup.html"?

Question

Tôi đang phát triển tiện ích cho trình duyệt Google Chrome. Tôi không thể tìm ra cách truy cập đối tượng DOM tab hiện tại từ trang "popup.html". bất kỳ đề xuất nào?

Answer 1

Theo mặc định, trong popup.js/popup.html, đối tượng "tài liệu" chỉ đề cập đến tài liệu của cửa sổ bật lên của tiện ích. Để có được DOM cho một tab cụ thể (ví dụ như tab hiện đang hoạt động), bạn sẽ cần sử dụng content scripts communications. Ví dụ chúng ta cần phải gửi một yêu cầu từ extension để kịch bản nội dung của bạn qua popup, vì vậy trong popup.html bạn làm điều gì đó như thế này:

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); 
    }); 
}); 

Bây giờ trong kịch bản nội dung, chúng ta cần phải listen for those events đến từ phần mở rộng, vì vậy trong một số tệp chúng tôi đặt tên là 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.. 
}); 

Bây giờ hãy nhớ thiết lập số manifest để bao gồm tập lệnh nội dung và quyền tab.

Answer 2

Câu trả lời này dường như không hoạt động với API mới nhất. Đây là một ví dụ làm việc.

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:

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

phần liên quan của manifest.json:

{ 
    "permissions": [ 
     "tabs" 
    ], 

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

Answer 3

Đây là việc sửa chữa mới nhất:

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); 
    }); 
}); 

(Lưu ý: console.log trên (response.farewell) là dành cho popup.html, không tab hiện tại của bạn)

contentscript.js

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

Nguồn: https://developer.chrome.com/extensions/messaging