chrome extension: get specific part of the current tab page in DOM object and display it in either popup.html or new html page?

Posted by sandeep on Stack Overflow See other posts from Stack Overflow or by sandeep
Published on 2012-06-29T12:23:25Z Indexed on 2012/06/30 9:16 UTC
Read the original article Hit count: 196

Filed under:

JavaScript

|

html

|

dom

|

google-chrome-extension

IS there any way so that i can convert any DOM object into HTML page within the script ?

suppose I have dom object like this: content script.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == "fromPopup") {
     console.log("got Request from Popup");   
     var myDivObj = document.getElementById("definition");
   //sendResponse({data: "from Content Script to Popup"});
   if ( myDivObj ) {
     sendResponse({data:myDivObj});
     }
     else{
     sendResponse({data:"Empty or No Tag"});
     }
      console.log("sent Response1");   
  } else {
    sendResponse({}); // snub them.
    console.log("sent Response2");   
  }
});

here is my popup.html

<body>
  <Div>Searching..</Div>
  <Div id="output">Response??</Div>
  <script>
  console.log("Pop UP Clicked");
 chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendRequest(tab.id, {method: "fromPopup", tabid: tab.id}, function(response) {

    console.log("got Response from Content Script");   
    document.getElementById("output").innerHTML=response.data;
  });
});
  </script>


</body>

I know we can send onaly JSON type of data to the popup.html page.. am i right ?

If yes is ther any way that I can creat HTML page with DOM Object( myDivObj ) which I collected..

Any alternative solution..?

In short i want get only specific part of the current tab page in DOM object and display it in either popup.html or separate html page..

Developer IT