CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionsave
Pacerier
Pacerier

Reputation: 89623

How to save the full state of a webpage via Chrome extension?

How should the state of a page be saved?

For example, consider the user is browsing through all kinds of webpages, some of them probably coded like this:

onload=function(){
    let d_s = document.getElementById('d').style;
    d_s.width = d_s.height = Math.random() * 500 + 'px';
    setTimeout(onload, 800 + Math.random() * 800);
};
<div id=d style=background:skyblue;></div>
<!-- click Run ↓ -->

I'd like to save the current states of selected tabs (the entire tab session) and resume them at a future time.

What are some techniques to do this?

(This should be possible. After all, we can drag a tab from one Chrome window onto the next without any state change even while playing a video halfway.)

Upvotes: 7

Views: 4665

Answers (3)

AnonA
AnonA

Reputation: 1

This is terrible mistake of HTML5, we demand as third party user return of page 1,2,3, next, prev, go to... It's like forcing us to browse sites through virtual machine. Knowyourmeme f. e. should change that. I can only save html5 but it's only one state that doesn't allow me to change content freely.

Upvotes: -1

Raydel Miranda
Raydel Miranda

Reputation: 14360

You could use selenium in order to automate the needed steps to arrive the desired state.

Usually someone is looking for something like this when testing some functionality.

I generally use it when developing some app that require large amounts of fields to fill in order to test some related functionality. And, it is really tedious to complete the form each time I want to test something.

With selenium you could even automate the whole test.

UPDATE:

If you require execute some js code, with selenium, you can.

This a python example with the selenium package installed:

>>> from selenium import webdriver
>>> wd = webdriver.Firefox()                   # You could use Chrome too.
>>> wd.get("http://localhost/foo/bar")
>>> wd.execute_script("return foobar()")
u'eli'

Example taken from this answer

So with selenium you can to perform a call on a function like this and use some fixed value for emulating a saved state:

onload=function(){
    /* You could use some fixed value for emulate a saved state */
    let d_s = document.getElementById('d').style;
    d_s.width = d_s.height = some_fixed_value * 500 + 'px';
    setTimeout(onload, 800 + some_fixed_value * 800);
};

Upvotes: 2

Soviut
Soviut

Reputation: 91545

In short, no.

This is incredibly ambitious since not only do you have to store the initial DOM state (which could be altered at any point by an on-page script loading) but you have to store the state of local storage, cookies, sessions, assets like images, scripts, stylesheets, the list goes on.

If you were able to take a low level snapshot of the memory, store it somewhere, then restore it to memory later, you might have a chance, since that's what hibernation is doing. However, no such API exists in Chrome, or any browser.

Even before any of the technical challenges, this is going to result in you having to ask for a lot of permissions when installing your extension to access all the various APIs.

Second, assuming you do come up with way of serializing all these aspects of a page, where will you store the hibernated state? Your best bet would be local storage on the background page, but that often has size limits.

Third, you need to actually browse to the page so that the URL is set up correctly. Without this step, the web page will only appear to have been brought back from hibernation but if the user tries to do anything they'll be hit with cross-site scripting (XSS) warnings and refreshing the page will just return to a blank tab.

Finally, you're bound to encounter a nearly infinite number of edge cases brought on by site-specific nuances you're not able to predict.

Upvotes: 6

Related Questions