Get source code from Tab

**Lorin** · 10-23-2011

Is there any way how to get tab source code using plugin without the url knowledge? I can not use XmlHttpRequest, because the page do not change the URL (it is dynamicaly generated page without URL change).

Excuse my bad english. It's better to say something wrong, than say nothing.

**sergey-pypyrev** · 10-24-2011

Do you mean extension when you say plugin? If so - then content script can get HTML in tab. document.documentElement.outerHTML contains this. Any dynamic changes done in tab are reflected in document.documentElement.outerHTML. More information about content scripts is available here: http://code.google.com/chrome/extens...t_scripts.html

**Lorin** · 10-25-2011

Thanks for your reply.

If I understood well: Everything I need to do is create content script (for example script.js) and get the source by using

Code:

document.documentElement.outerHTML

?

I do not need to specify what window or tab I want to use?

L.

**sergey-pypyrev** · 10-26-2011

Yes, you can get source from content script that way. There is no need to specify window or tab because there will be separate instance of content script in every tab.

**Lorin** · 10-26-2011

Its possible to hook from content script to popup window? Or it is necessary to use listeners and sending requests?

L.

**sergey-pypyrev** · 10-26-2011

Content script can not be accessed directly from other parts of extension. So, you'll need listeners and requests for this.

**Lorin** · 10-28-2011

So I have popup page index.html:

Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function zadost() {
                chrome.tabs.getSelected(null, function(tab) {
                    chrome.tabs.sendRequest(tab.id, {action: "getHtml"}, function(response) {
                        console.log(response.html);
                        if (response.html) {
                            document.getElementById('output').innerHTML =  response.html;
                        } else {
                            document.getElementById('output').innerHTML = 'I did not get the source code.';
                        }
                    });
                });
            }
        </script>
    </head>
    <body onLoad="zadost()">
        <h1>KatastrBuster</h1>
        <div id="output"></div>
    </body>
</html>

Content script script.js:

Code:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.action == "getHTML") {
        console.log("Got getHTML request.").
        var htmlCode = document.documentElement.outerHTML;
        sendResponse({html: htmlCode});
    } else {
        sendResponse({});
    }
});

and manifest.json:

Code:

{
  "name": "KatastrBuster",
  "version": "0.1",
  "description": "Some kiddings about the extension.",
  "browser_action": {
    "default_icon": "ikonka.png",
    "default_title": "KatastrBuster",
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
        "matches": ["http://*/*"],
        "js": ["script.js"]
    }
  ],
  "permissions": [ "tabs", "http://*/*" ]
}

That should send a request from Popup to content script for HTML code. After, content script should get the source code and resend it to the popup to show the code, but nothing hapend.

Console is empty all the time and no code is visible. Could you tell me, where is the problem?

**sergey-pypyrev** · 10-28-2011

You should look not only at console log of extension popup, but also at console log of page where your content script is injected. If you will do this - you will see that your content script has syntax error on line 4. This is because on line 3 you has "." instead of ";".

Next error is that from popup script you send "getHtml", but in content script you expect "getHTML".

**Lorin** · 10-28-2011

Really thanks for your help. I was nearly to lose my hope in this.

**Lorin** · 10-28-2011

The final code
Popup index.html

Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function zadost() {
                chrome.tabs.getSelected(null, function(tab) {
                    chrome.tabs.sendRequest(tab.id, {action: "getHtml"}, function(response) {
                        console.log(response.html);
                        if (response.html) {
                            document.getElementById('output').innerHTML =  response.html;
                        } else {
                            document.getElementById('output').innerHTML = 'I did not get the source code.';
                        }
                    });
                });
            }
        </script>
    </head>
    <body onLoad="zadost()">
        <h1>KatastrBuster</h1>
        <div id="output"></div>
    </body>
</html>

Content script script.js:

Code:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.action == "getHtml") {
        console.log("Got getHTML request.");
        var htmlCode = document.documentElement.outerHTML;
        sendResponse({html: htmlCode});
    } else {
        sendResponse({});
    }
});

and manifest.json:

Code:

{
  "name": "KatastrBuster",
  "version": "0.1",
  "description": "Some kiddings about the extension.",
  "browser_action": {
    "default_icon": "ikonka.png",
    "default_title": "KatastrBuster",
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
        "matches": ["http://*/*"],
        "js": ["script.js"]
    }
  ],
  "permissions": [ "tabs", "http://*/*" ]
}

Thread: Get source code from Tab

Thread Tools

Get source code from Tab

Posting Permissions