Chrome Extension Read Innerhtml Of The Current Page?
Solution 1:
functionwindowLoaded() {
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.
Solution 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(); // jQuerydocument.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];
Solution 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.
Solution 4:
window.addEventListener("load", windowLoaded, false);
functionwindowLoaded() {
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
.
Post a Comment for "Chrome Extension Read Innerhtml Of The Current Page?"