Develop Reference

Detect when external link has finished loading

I have a link to a URL that returns a download PDF dialog box
It takes about 30 seconds to load so I would like to present some visual indication to the user that they've clicked the button and that the PDF has been requested.
As the PDF loads in a dialog box so it can be saved, the user isn't redirected to another URL in their browser. After they've clicked the save the PDF they remain on the same page.
Is there anything I can do with Javascript (or jQuery) to detect when the PDF has loaded and the dialog box has been presented? If so, then when I receive this event then I can hide the loading icon that I'd like to display when the link is first clicked.

Reload page when back from iframe

I have an HTML page on which iframe is embedded which is hidden initially.
When clicking on the button, iframe gets opened. If clicked two times and then click browser back button it getting redirected to cached first iframe and not on the button page.
I am doing the following code to reload the page hence it go to the button page inside the document ready.
window.history.pushState('', null, './');
$(window).on('popstate', function() {
location.reload();
});
Sometimes it doesn't work. Not sure where I am doing wrong.
Any recommendations, please.
Is there any way to prefetch iframe with different sessions?
Updating iframe src vs ajax call and then append data to iframe HTML, which is fast?

Can a Google Chrome Extension send a message from an extension webpage back to a website page and also reopen that page?

I am building a Chrome Extension for ,my Bookmarks app.
A bookmark record has 4 images fields.
Each image filed has these options to set an image:
Generate a screenshot of the viewport of the webpage
select an image scraped from the webpage HTML
Select a region of the webpage screen and then edit it with annotations
Orginally I had a modal style app that loaded in the popup.html file when the extension button was clicked in the toolbar. Because I added the ability to select a region for the screenshot image though I now have to move that modal into the actual webpage DOM.
The reason is that when a user select to select a region screenshot from the modal, it has to close the modal/hide it and show the screen to make the selection. On completion there is no way to re-open the popup from the menu bar!
So I am moving the modal to the webpage. Clicking the toolbar button will then build and show the modal. Then when user selects to select region for 1 of the 4 image fields, I will hide the modal and on completion I can simply show the hidden modal and populate a text input filed with the newly generated and uploaded image.
I am now trying to go a step further though. After selecting the image region, instead of showing the Modal window right away. I want to instead show the image in an editor style page which would be an HTML webpage that belonged to the extension (like this chrome-extension://mcbpblocgmgfnpjjppndjkmgjaogfceg/fsCaptured.html). It would open this in a new tab.
The user would then annotate with text, shapes, etc in the editor and then upload file.
This is where I am stuck. When I get the URL back from the uploaded image, I need to then close this new tab window and go back to the main webpage that had the app modal window and where the screenshot selection was made from. I would need to then open/show the modal again and fill in the text input for the new image upload field.
So my question here is...
Is it possibble for my extension to pass a message from my chrome-extension://mcbpblocgmgfnpjjppndjkmgjaogfceg/fsCaptured.html page with the editor back to the webpage the modal is on?
I would need to:
Pass the image URL back to the webpage with a message
Close the extension editor page/tab
go back to/bring focus to the webpage with the modal on it
Is this even possibble? I realize you can send messages from background scripts to content scripts and content scripts back to background scripts.
UPDATE
For the first part. Perhaps the extension webpage would send a message to the background.js and then the background.js could send a message to the webpage content script. This would solve that part of the process!
Would just need to figure out if the extension webpage can close itself and then bring focus to the original webpage?
Update 2
Looks like I figured it out.
You can make a tab selected/active with:
chrome.tabs.update(tabId, {selected: true});

I believe my custom extension page can send a message to the background.js
and then the background.js could send a message to the webpage content script with the modal window and have it then update the image fields in that modal.
Next from my custom extension page I should be able to call chrome.tabs.update(tabId, {selected: true}); after it sends the above message to the content script which would then close the extension page and bring focus back to my webpage with the modal in it.

window.history.back not working on new window with Firefox

I have a page with a link that opens a new window with a div and an iframe. The user can navigate through the web that it's inside the iframe and the div shows information.
The user wants an option to go back on pages that he visited inside the iframe, so I put an image on the div to allow that option. The image has the onClick event that calls history.back() method.
The problem that I have it's that in Firefox when I try to go a page back, the iframe stills showing the page that I'm seeing but if I try in Chrome it works great, I can visit all the sections that has my page and I can go back clicking on that image.
I tried to use the browser's context menu but in Firefox does nothing.

Iframe load event in firefox extension

I'm building a firefox extension that has an iframe inside a panel.
I use a xul file as src of the iframe.
When i click on a specific button inside the iframe, i want the iframe to be loaded again with the same src but hide some elements and show another ones. To do this hide/unhide, i have the code on the xul onload, and it works well loading the iframe the first time, or when changing the src.
But when i hide and show the panel with the same src, the onload isn't triggered again.
Should i be doing something before opening the panel the second time?

Hiding and showing the frame doesn't reload it - it really only hides and shows it without touching the content. To reload a frame from outside do:
document.getElementById("my-frame").contentWindow.location.reload();
Or from inside the frame:
window.location.reload();
For reference: location.reload()