Save the current state rendered in the browser page

Is it possible to save the current state of the rendered page as static HTML with references to images, CSS (if can be calculated) using an extension or bookmarklet?

For example, I went to the site. Orangeries page, worked all scripts, added elements in the DOM and ie on the screen I see the current state. I can "play with fonts," but how to save the result for later viewing and edits? Preferably "One button".
October 3rd 19 at 02:30

Related questions

More answers about "Save the current state rendered in the browser page"
2 answers
October 3rd 19 at 02:32
Solution
The simplest script for GreaseMonkey.
If the viewing is planned on the network — push source code in some pastebin.
There is a ready decision? - verdie25 commented on October 3rd 19 at 02:35
// ==UserScript==
// @name Save HTML
// @namespace <a href="http://habrahabr.ru">http://habrahabr.ru</a>
// @version 0.1
// @description enter something useful yourself
// @match <a href="http://*/*">http://*/*</a>
// @copyright 2013, Yuriy 'Urvin' Gorbachev
// ==/UserScript==

function getHtmlString()
{
 return document.documentElement.outerHTML;
}

getSaverString function()
{
 return '<div style="position:fixed;background-color:#fff;width:100px;height:30px;left:20px;top:20px;;z-index:9999;text-align:center;line-height:30px;border:#888 1px solid;border-radius:6px; box-shadow: 0 0 10px rgba(0,0,0,0.7);"><a href="#" id="btnSave">Save</a></div>';
}

function saveString(aString)
{ 
 document.location = "data:application/octet-stream;filename=page.html," + encodeURIComponent(aString);
}

onSaveButtonClick function()
{
 var lPageContents = getHtmlString().replace(getSaverString(),");
saveString(lPageContents);
 return false;
}

var lSaverBlock = document.createElement('div');
lSaverBlock.innerHTML = getSaverString();
document.body.insertBefore(lSaverBlock, document.body.firstChild);
document.getElementById("btnSave").addEventListener("click", onSaveButtonClick, false);
- Arch_Ledner53 commented on October 3rd 19 at 02:38
Great! And there is a possibility to keep the existing styles? - verdie25 commented on October 3rd 19 at 02:41
Do not really understand the task. Styles are written in either CSS or in the tag "style".
In the first case — using Greasemonkey to load and insert into the page text CSS
in the second they are preserved. - Arch_Ledner53 commented on October 3rd 19 at 02:44
Now for the HTML preserved the existing DOM. As required. Thank you :)

If styles for example are generated by the script can be fixed in firebug or is there some plug-in styles (with the overrides, the inheritance and other trash are in someone else's skin is difficult to debug), and which eventually settled to the final value (computed style) can we keep it up to date as well as DOM, but for style items?

For example, to about:blank in which no external styles, but in the developer tools is already clear margin, the values are inherited by default. - verdie25 commented on October 3rd 19 at 02:47
I think this is only some extensions can... - Arch_Ledner53 commented on October 3rd 19 at 02:50
And you can iterate over all elements and for each to make the window.getComputedStyle(element)? - verdie25 commented on October 3rd 19 at 02:53
Hurt greasy. And then imagine to get the 50-megabyte page "hello world" with a listing of all the styles. - Arch_Ledner53 commented on October 3rd 19 at 02:56
Yeah, for about:blank line on 273 7544 bytes, but if you include the inherited styles, it turns out compactly. - verdie25 commented on October 3rd 19 at 02:59
October 3rd 19 at 02:34
Okay, thank you. I hope someone besides me will enjoy.

Find more questions by tags HTMLBrowsersExtensions for browsers