I am embedding a dynamic webpage in a popup. Currently its working and every time popup is loaded the webpage is loaded again, thus me losing the work i did on the webpage in popup. Though its fine, but i want that webpage remain loaded in background and i just show it in popup on click. to do this i copied complete code from my pop up page(script+html) to background.html. Now how should i access the page completely in popup and show directly(i want to show html also-from background page)
Thanks
Popups live in the same process (the extension process) as the background page, and one page can get the DOM Window of the other. A popup gets the background page by calling chrome.extension.getBackgroundPage(). So every time you open the popup, just read and write to some variable on the background page, for example chrome.extension.getBackgroundPage().enteredData = "value";.
Alternately, you can use HTML5 localStorage to store variables even after the browser is shut down; e.g. localStorage['enteredData'] = "value".
Related
So the chrome extension honey has a popup over the page injected by the contentscript that shows the current progress of applying coupons on a webshop.
Some websites reload as a whole if you submit a coupon (instead of just AJAX reqs), so if you would have injected some HTML it would go away because the contentscript would get reloaded and it would have to inject the HTML again.
See this as an example: https://youtu.be/iLk9Y5VUToE?t=87
How do they keep the popup in front at all times while a page is hard reloading while keeping track of the progress?
NOTE: This is not about the popup functionality (like popup.html)
Hope I explained this well enough :)
Good day,
I have taken over a Drupal site that uses iframes for the main content area. I have a minor issue that I'd like to correct.
When a user clicks a link to a page that has a lot of content, then uses the browser's back button to navigate to the previous page, the old content appears, but the iframe's src does not change. I'm using some javascript to set the height of the page dynamically, so when the previous page has less content, there's a huge amount of empty space between the content and the footer.
Here's a diagram that hopefully illustrates what I'm working with:
So upon returning to the previous page, via the browser back button, the footer is pushed way down below because the source has not changed, and therefore the page isn't rendered again.
I've not really used iframes because they aren't great to work with. I'm wondering, is there a way to force the source of the iframe to change when using the browser back button?
I'm developing a webextension and I'm stuck with following problem.
I have browser_action that displays popup window with some content. The problem is, it takes 3-4 seconds to load, and user has to wait every time he opens this browser action.
I want somehow force browser_action to load DOM of popup window just once, so when I open this action again it shows me already rendered window.
I can't preload any assets through background script, because the asset is <iframe> of remote website and you can't easily store rendered DOM in localStorage just to display it later on user request.
I thought about putting <iframe> inside background script and displaying it somehow in browser_action popup window, but I failed to find out how to do that.
Background page is loaded once and stays forever while extension is enabled, so maybe I could display it contents inside browser_action popup window somehow?
Unfortunately, I don't think that's not possible. Your best bet would be to show some useful UI while the iframe loads.
It's certainly not possible to make the popup page itself be persistent.
And I'm 98% positive you can't swap in a loaded tab/frame into the page of the popup. Chrome does it internally sometimes (preload then swap, see tabs.onReplaced), but you have little control over this mechanism.
It seems you can trigger it with preload links:
<link rel="preload" href="https://example.com/"
as="document" crossorigin="anonymous">
However, it serves little purpose to embed that into the popup page (it will be fetched when the popup loads, which is milliseconds of difference) and I'm reasonably sure that preloading it from, say, the background page won't carry over to the popup, despite them normally sharing the browser process. You can experiment though!
Okay I changed the plan. How would I create a bookmarklet that refreshes a link and clears cache until a page change is detected?
Edit: this might help (from JavaScript Bookmarklet; click button, reload page, then open page):
If a page reloads, any code currently running on that page, including code from a bookmarklet, is ended and removed. Traditionally bookmarklet code ceases to work after a page load and user clicks it again.
There are three workarounds that I know of.
A.) Change the process that loads the page to instead use AJAX.
B.) Change the process that loads the page to instead open a new window, and then use JavaScript to manipulate the new window.
C.) Before triggering the page load, open a new child window and insert code into it. The code in that child window can then monitor its parent and take actions on the parent even after the parent has reloaded.
Edit 2: this refreshes the page, so now I just need to clear cache on each refresh and stop when a page change is detected (overall function is like a page monitor but clears cache after each refresh).
---or----
javascript:
timeout=prompt("Set timeout [s]");
current=location.href;
if(timeout>0)
setTimeout('reload()',1000*timeout);
else
location.replace(current);
function reload(){
setTimeout('reload()',1000*timeout);
fr4me='<frameset cols=\'*\'>\n<frame src=\''+current+'\'/>';
fr4me+='</frameset>';
with(document){write(fr4me);void(close())};
}
Edit 3: found this for clearing cookies (which should be sufficient):
Edit 4: this checks for page changes:
Now how do I put this together?
I have a iFrame which loads many different pages, the initial load is always fine as i hide the IFrame until content is loaded then only do i display the IFrame.
My problem is now i have some pages which need to postback to grab information out the database dependent on what a user has on that page.
When this happens i get a white page while content is loaded. I cant hide the page as this would look worse then having a white loading page, i just need it to sit still with no flash while its drop down box populates.
I'm up for any solution using JS JQ or C# and my project is in ASP.
How i call my page refresh:
window.location.reload(true);
I call the refresh from inside the iFrame (Name: IFrameDam)
I am able to hid my IFrame from with in its self if this sparks any idea's:
$('#IFrameDam', window.parent.document).hide();
You can use Ajax request instead iframe and update the contents inside iframe parent div with id #IFrameDam and set the timer to resend ajax request and update without white screen. This behavior is same for almost any browser whereas iframe loads a whole new page inside current page leaving a blank space when not loaded.
here's how you can achieve this using ajax and jquery.
Just put iframe src path after "request_page" and refresh time after "time" variables.
Follow this link: http://jsbin.com/EYIKAnAb/1/edit?js