Develop Reference

Window that was opened by window.open won't close

I'm having problems with a piece of code that has worked before for years, but seems to have stopped working now.
I'm opening a window with a login form and I'm listening via a WebSocket for events regarding that login. After the login was successful, I want to close the window (that my script has opened and kept the reference to) after a short moment. I'm using the following code:
const windowManager = {
window: null,
eventType: null,
}
function openWindow({ url, eventType }) {
windowManager.window = window.open(url)
windowManager.eventType = eventType
}
function closeWindow({ eventType }) {
if (windowManager.window && windowManager.eventType == eventType) {
setTimeout(() => {
windowManager.window && windowManager.window.close()
windowManager.window = null
}, 100)
}
}
I have confirmed that windowManager.window.close() is called and does not thrown an error. I have also extracted the code from the application and tested it separately and it still won't close the window. As I said, this piece of code has worked before and was not changed in the past two years or so.
I'm using the following browsers:
Safari 15.3
Firefox 97.0b9 (Developer Edition)
Chromium 94.0.4606.61
I'm grateful for any pointers which could help resolve this issue. Thanks a lot!

After figuring out that the above code worked totally fine with other sites like Google or GitHub, I found that the Cross-Origin-Opener-Policy header in our auth backend (which was the site that was opened with the code) is the culprit. We had just updated Helmet to version 5 which added the header by default.
Our solution was to set Cross-Origin-Opener-Policy to same-origin-allow-popups on both source and target window (which are hosted on the same origin, but served by different servers). It also worked when setting it to unsafe-none for the target window without setting it at all on the source window.

Getting the current domain name in Chrome when the page fails to load

If you try to load with Chrome: http://sdqdsqdqsdsqdsqd.com/
You'll obtain:
ERR_NAME_NOT_RESOLVED
I would like, with a bookmarklet, to be able to get the current domain name and redirect it to a whois page in order to check if the domain is available.
I tried in the console:
window.location.href
but it outputs:
"data:text/html,chromewebdata"
Is there any way to retrieve the failed URL?

The solutions given by others didn't work (maybe because I was getting a different error or have a newer version: Chrome 55):
document.querySelector('strong[jscontent="hostName"]').textContent
but the same can be achieved via:
document.querySelector('#reload-button').url
A potentially more future-proof version (from Thomas's comment)
loadTimeData.data_.summary.failedUrl
So a cross-version solution incorporating all workarounds:
var url = (l‌​ocation.href === 'data‌​:text/html,chromeweb‌​data'
&& loadTimeData.data_.summary.failedUrl
|| document.querySelector('#reload-button').url
) || location.href;
var hostname = (l‌​ocation.href === 'data‌​:text/html,chromeweb‌​data'
&& loadTimeData.data_.summary.hostName
|| document.querySelector('strong[jscontent="hostName"]').textContent
) || location.hostname;

On the Chrome error page, location.href doesn't point to the domain you tried to visit, since it's an internally-hosted page.
However, the domain name you tried to visit is available if you expand the "Show Details" link.
You can run this code in console (or a bookmarklet) to parse out the domain name:
document.querySelector('strong[jscontent="hostName"]').textContent

A modified version of nderscore's since you'll need to have an if statement for the return of the correct one.
function getUrl () {
if(window.location.hostname == "") {
return document.querySelector('strong[jscontent="hostName"]').textContent
} else{
return window.location.href;
}
}

While looking in source code of html page using Developer Tools (right-click on a web page, and select Inspect Element), I've found that full original failed URL is in a variable called
loadTimeData.data_.summary.failedUrl
In my case I have to update some 'incorrect part' of auto generated URL to 'correct part'. So I've created bookmarlet like this:
javascript: location.assign(loadTimeData.data_.summary.failedUrl.replace('IncorrectPart','CorrectPart'));

Controlling a Firefox Extension via Javascript

Is it possible, using javascript, to control an overlay firefox extension? I've extracted the contents of the extension and have identified what functions/methods I need to run, but they are not accessible within the scope of the console.
Thanks in advance for any ideas.

Yes it possible to interact with other add-ons, given the right circumstances.
My test case here will be com.googlecode.sqlitemanager.openInOwnWindow(), which is part of the SqliteManager addon.
In newer builds (I'm using Nightly), there is the Browser Toolbox. With it is is as simple as opening a toolbox and executing com.googlecode.sqlitemanager.openInOwnWindow() in the Console.
You may instead use the Browser Console (or any chrome enabled WebDev Console for that matter, e.g. the Console of "about:newtab"). But you need some boilerplate code to first find the browser window. So here is the code you can execute there: var bwin = Services.wm.getMostRecentWindow("navigator:browser"); bwin.com.googlecode.sqlitemanager.openInOwnWindow()
Again, enable chrome debugging. Then open a Scratchpad and switch to Chrome in the Environment menu. Now executing com.googlecode.sqlitemanager.openInOwnWindow() in our Scratchpad will work.
You may of course write your own overlay add-on.
As a last resort, patch the add-on itself.
Bootstrapped/SDK add-ons: you can load XPIProvider.jsm (which changed location recently) and get to the bootstrapped scope (run environment of bootstrap.js) via XPIProvider.bootstrapScopes[addonID], and take it from there (use whatever is in the bootstrap scope, e.g. the SDK loader).
Now about the right circumstances: If and how you can interact with a certain add-on depends on the add-on. Add-ons may have global symbols in their overlay and hence browser window, such as in the example I used. Or may use (to some extend) JS code modules. Or have their own custom loader stuff (e.g. AdBlock Plus has their own require()-like stuff and SDK add-ons have their own loader, which isn't exactly easy to infiltate)...
Since your question is rather unspecific, I'll leave it at this.
Edit by question asker: This is correct, however I figured I'd add an example of the code I ended up using in the end, which was in fact taken directly from mozilla's developer network website:
In my chrome js:
var myExtension = {
myListener: function(evt) {
IprPreferences.setFreshIpStatus(true); // replace with whatever you want to 'fire' in the extension
}
}
document.addEventListener("MyExtensionEvent", function(e) { myExtension.myListener(e); }, false, true);
// The last value is a Mozilla-specific value to indicate untrusted content is allowed to trigger the event.
In the web content:
var element = document.createElement("MyExtensionDataElement");
element.setAttribute("attribute1", "foobar");
element.setAttribute("attribute2", "hello world");
document.documentElement.appendChild(element);
var evt = document.createEvent("Events");
evt.initEvent("MyExtensionEvent", true, false);
element.dispatchEvent(evt);

Update for Firefox 47 and up
Things changed drastically in Firefox 47. This is the new way to access it.
var XPIScope = Cu.import('resource://gre/modules/addons/XPIProvider.jsm');
var addonid = 'Profilist#jetpack';
var scope = XPIScope.XPIProvider.activeAddons.get(addonid).bootstrapScope
Old way for < Firefox 47
Update for methods of today
Typically you will do so like this:
If i wanted to get into AdBlocks scope, I check AdBlock id, it is {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d} so I would go:
var XPIScope = Cu.import('resource://gre/modules/addons/XPIProvider.jsm');
var adblockScope = XPIScope.XPIProvider.bootstrapScopes['{d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}'];
You can now tap into anything there.
Another example, I have an addon installed with id NativeShot#jetpack
I would tap into it like this:
var XPIScope = Cu.import('resource://gre/modules/addons/XPIProvider.jsm');
var nativeshotScope = XPIScope.XPIProvider.bootstrapScopes['NativeShot#jetpack'];
if you do console.log(nativeshotScope) you will see all that is inside.

How to access performance object of every resource in a web page?

I can see, in Chrome Developer tools, loading time, time it took to get a particular resource from server and other info, for all of the resources in a webpage.
I want to capture these stats using JavaScript. How is it possible?
there is window.performance object available, but only for the requested page, not for page resources.
Is there any way to access performance object of all of the page resources.

You should be able to use window.performance.getEntries() to get resource-specific stats:
var resource = window.performance.getEntries()[0];
console.log(resource.entryType); // "resource"
console.log(resource.duration); // 39.00000000430737
console.log(resource.startTime); // 218.0000000007567
Sample from the above link:

There is still a bug in latest version of chrome - 29.0.1547.76 m
When you raise an xmlhttprequest, lets say while downloading an image, you can see that the resource is downloaded with status code 200 OK in network tab, but the performance.getEntries() or performance.getEntriesByName(resourceUrl) doesn't list the resource entry. When the page load is complete and you evaluate performance.getEntriesByName(resourceUrl) in console, it lists properly. So, there is a lag in chrome while populating the resource entries in performance entries?
In IE10, this works perfectly fine.

window.performance.getEntries()
may return not all resources. after bufferful some records is disapear
need check it before it happend
head code part
var storedEntries = [];
var updateStoredEntries = p => {
storedEntries.concat(
p.getEntries().filter(rec => /yourRegExp/.test(rec.name))
)
};
performance.addEventListener('resourcetimingbufferfull', e => {
updateStoredEntries(e.target)
});
...
later part
updateStoredEntries(performance)

IE 6/7 Access Denied trying to access a popup window.document

I'm creating a popup window with no URL source using window.open(). I don't give it a URL because soon I'll want to post a form to it. However, in the meantime I'd like to display a short "Now loading..." message so the user isn't looking at a blank page for the 2-3 seconds it'll take the form post to go through.
I tried adding Javascript that just writes to the popup window's document. That worked great in Firefox and IE 8, but failed with an Access Denied message in IE 6 and 7. Anyone know of a way around this? I would love to be able to a) hard-code some HTML into window.open(), b) learn how to update the popup's DOM in this situation, or c) hear about anything anyone can think of.
Below is the code I'm using to spawn the window:
var wref = window.open("", winName, "toolbar=1,resizable=1,menubar=1,location=1,status=1,scrollbars=1,width=800,height=600");
if (wref != null) {
try {wref.opener = self;} catch (exc) {}
// while we wait for the handoff form post to go through, display a simple wait message
$j(wref.document.body).html('Now loading …'); // EPIC FAIL
wref.focus();

IE considers "about:blank" to be a insecure URL and it won't let you talk to it. I would create a "Now Loading..." static HTML file and open that instead.

Test
<script type="text/javascript">
function test() {
window.open('javascript:opener.write(window);', '_name', 'width=200,height=200');
}
function write(w) {
w.document.write("Hello, World.");
}
</script>
Works in IE 6, 7 & 8, Opera 9.6, Firefox 2 & 3.
Does not work in Safari for Windows 3 & 4 or Google Chrome.
When it does work, it results in a pretty ugly URL in the Location box.
If the browser support listed above is acceptable, you can use the solution provided, otherwise I'd do what David said and window.open('Loading.htm' ...) where Loading.htm contains whatever content you want to display (you should probably keep it lightweight otherwise it might take longer to load and render than the form will to POST).

Also note that the winName you supply in IE must NOT have spaces... if so it will fail.

Another workaround is to open an empty "blank.htm" file on your site, then do the document.open() to access it