how to retrieve HTML structure data from a url and analyse DOM specific data using javascript

I am doing a chrome extension.

This extension will query the search engine and get each keyword output in HTML table format.

After retrieve the HTML document, JS will analyse the HTML DOM, and get the data specified, then display the data in a defined tab.

I researched in stackOverflow.

1. how can I retrieve an html document from a url from javascript? This one, cause chrome extension does not have origin problem, it can access any domain.
2. How to scrape specific data from scrape with simple html dom parser This one, I do not need it to be written in PHP.

I need JavaScript solution.

After researched for 2 days, I got a draft plan using jQuery to solve this.

But I am doubting that it is the best solution to solve this problem. Wish experts' experienced suggestions.

The problem is :

1) Using Javascript request a url;

2) Using Javascript get the response data开发者_开发技巧 and save the data into a variable or some temporary file;

3) Using Javascript retrieve specific data from step 2 such as specific tag_id or class name tag elements.

4) Using Javascript write the data to current focused web page tab in Chrome browser.

Thanks in advance.

You mean something like http://api.jquery.com/jQuery.get/

$.get("http://www.whatismyip.com/", function(response) {
     console.log ("Hey I found out " + $(response).find("#ip").text());
    });

That probably addresses 1) 2) and 3) if you get around the access-control-allow-origin problem (maybe by having a proxy on your server that allows all domains in its access-control-allow-origin.

As for 4) you can inject arbitrary javascript into any loaded page when you are a chrome extension, documentation is here http://code.google.com/chrome/extensions/tabs.html

This jsFiddle demonstrates how to get some data from a url and extract parts of it. Is that what you are looking for?

$.get('/').success(function(data){
    $(data).find('#home').appendTo('div');
});