Chrome extension read innerHTML of the current page?

问题

Hi this may be a silly question, but I can't find the answer anywhere. I'm writing a chrome extension, all I need is to read in the html of the current page so I can extract some data from it.

here's what I have so far:

<script>
    window.addEventListener("load", windowLoaded, false);
    function windowLoaded() {
        alert(document.innerHTML)
      });
    }
</script>

Can anybody tell me what I'm doing wrong? thanks,

回答1:

function windowLoaded() {
    alert('<html>' + document.documentElement.innerHTML + '</html>');
}
addEventListener("load", windowLoaded, false);

~~Notice how windowLoaded is created before it is used, not after, which won't work.~~

Also notice how I am getting the innerHTML of document.documentElement, which is the html tag, then adding the html source tags around it.

回答2:

I'm writing a chrome extension, all I need is to read in the html of the current page so I can extract some data from it.

I think an important answer here is not the correct code to use to alert the innerHTML but how to get the data you need from what's already been rendered.

As pimvdb pointed out, your code isn't working because of a typo and needing document.documentElement.innerHTML, something you can diagnose in the Chrome console (Ctrl+Shift+I). But that's secondary to why you'd want the inner HTML in the first place. Whether you're looking for a certain node, specific text, how many <div> elements exist, the value of an ID, etc., I'd heavily recommend the use of a library like jQuery (vanilla JS works, but it can be verbose and unwieldy). Instead of reading in all the HTML and parsing it with string functions or regex, you probably want to take advantage of all the DOM parsing functionality already available to you.

In other words, something like this:

$("#some_id").val();                      // jQuery
document.getElementById("some_id").value; // vanilla JS

is probably way safer, easier and more readable than something eminently breakable like this (probably a bit off here, but just to make a point):

innerHTML.match(/<[^>]+id="some_id"[^>]+value="(.*?)"[^>]*?>/i)[1];

回答3:

Use document.documentElement.outerHTML. (Note that this is not supported in Firefox; irrelevant in your case.) However, this is still not perfect as it doesn't return nodes outside the root element (!doctype and possibly some comments or processing instructions). The document.innerHTML property is, AFAIK, specified in HTML5 specification, but currently not supported in any browser.

Just FYI, navigating to view-source:www.example.com also displays the entire markup (Chrome & Firefox). But I don't know whether you can work with it somehow.

回答4:

window.addEventListener("load", windowLoaded, false);

function windowLoaded() {
    alert(document.documentElement.innerHTML);
}

You had a } with no purpose, and the }); should just be }. These are syntax errors.

Also, it's document.documentElement.innerHTML, since it's not a property of document.

来源：https://stackoverflow.com/questions/7050584/chrome-extension-read-innerhtml-of-the-current-page

标签

javascript

html

google-chrome-extension

innerhtml