Khaled Musaied Khaled Musaied - 1 year ago 45
Javascript Question

Accessing Current Tab DOM Object from "popup.html"?

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?

Answer Source

To get the DOM from a specific tab, you would need to use content scripts communications. For example we need to send a request from the extension to your content script via popup, so in the popup.html you do something like this:

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

Now in the content script, we need to listen for those events coming from the extension, so in some file we named dom.js

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

Now remember to setup your manifest to include the content script and tab permission.