A simple test: if I open developer tools on this page and run this command in Chrome:
window.open('https://stackoverflow.com/', 'newWindowName').document.readyState
I see the output:
"complete"
which looks wrong to me since the window clearly didn't load yet. I see more sane output in other browsers - I checked Firefox and IE.
My question is: is there any other way to be notified when a created window's DOM is ready in Chrome? It's not cross origin, so I should be able to access the window's properties. Also, I'm aware that there's the DOMContentLoaded event, but it fires only once, and doesn't work again if I re-use the same window (in my example, using the name "newWindowName") to get notified when a new page's DOM is ready.
Related
I am trying to get the event listeners of all the elements on the DOM (without need the user to fire any event).
I am using chrome extensions, but i didn't found any way to this even with the chrome.devtools api.
what i did find, is the following console api function
getEventListeners(document);
but it's only running on the console, i can't run it on the actual code.
Any ideas?
I don't have any relevant code to show here, the documentation of the function getEventListeners() says that it's running only on the console, but might be a way to do it with chrome extensions, but it don't have any idea how to do it.
I am starting with chrome extension development and have a couple of questions regarding extension install/update flow and testing during the development :
What happens with the background script after extension update, does chrome perform background script reload ?
Are content scripts detached from background script after extension update ?
If there's an onInstalled event handler in background script, what happens with that event handler when chrome updates extension(is this event handler detached, and when update finishes, the new handler is attached and then executed or some other flow is exercised) ?
Is there a way to simulate update process during development in order to debug events that happen during the update process, for example to host extension on some local server and update from there ?
where to search for documentation on topics like this and similar, is the chromium source code the right place or at least the starting point ?
Thanks!
What happens with the background script after extension update, does Chrome perform background script reload?
The behavior depends on whether you have a handler to chrome.runtime.onUpdateAvailable event registered and whether your extension has a persistent background page or event page.
If you have a persistent background page:
If you handle this event and call chrome.runtime.reload(), the extension is unloaded and then updated before being loaded again.
If you handle this event and do not call chrome.runtime.reload(), then the update will only apply when the extension is next reloaded - likely the next full browser restart.
If you do not handle this event at all, the extension will be unloaded immediately to be updated.
If you have a non-persistent Event page:
If you handle this event and call chrome.runtime.reload(), the extension is updated before being loaded again.
If you do not call chrome.runtime.reload(), or do not handle the event at all, Chrome will update the extension when the Event page next gets unloaded.
There is no way to programmatically prevent the update once the background page gets unloaded for whatever reason.
Are content scripts detached from background script after extension update?
Yes, and it's not pretty. They enter an "orphaned" state when using Chrome API gives inconsistent errors (some do nothing, some trigger exceptions), but are still running — for example, any DOM event listeners will still trigger.
As such, if you want the content scripts to work immediately again, your job is to:
Inject scripts programmatically in existing tabs, without making an assumption that it did not execute before: cleanup first if necessary.
Make sure orphaned copies stop executing: either by noticing in the old copy that it's orphaned, or by broadcasting a DOM event from the new copy.
Important note about WebExtensions: Firefox, unlike Chrome, always reinjects content scripts on load into pages that match manifest entries. Make sure to take that into account.
There are a few question that cover this; for example:
Sending message from a background script to a content script, then to a injected script (See addendum to the answer)
How to properly handle chrome extension updates from content scripts
Chrome extension content script re-injection after upgrade or install
If there's an onInstalled event handler in background script, what happens with that event handler when chrome updates extension (is this event handler detached, and when update finishes, the new handler is attached and then executed or some other flow is exercised)?
Since an update can only happen while the background page is unloaded, there is no complex logic; it will simply fire on first load of the extension afterwards with details.reason == "update". Be sure to register the handler synchronously on script load (e.g. in top level code), or else you may miss the event — normally this only concerns Event pages, but I suspect it's also important here.
Is there a way to simulate update process during development in order to debug events that happen during the update process, for example to host extension on some local server and update from there?
Sadly, this is no longer possible to the best of my knowledge, unless you can use Enterprise Policy install. Your best bet is to have an extension in CWS that's published as Private.
To a certain extent, pressing "Reload" after making some changes to an unpacked extension simulates what happens during the update - with the exception of onInstalled event.
Where to search for documentation on topics like this and similar, is the chromium source code the right place or at least the starting point?
Well.. For detailed questions Chromium code is, of course, the authoritative source. You should search StackOverflow as well, as there's quite a body of knowledge amassed here already. Finally, the official docs provide a lot of information, even if it's not immediately evident - the chrome.runtime API docs, for example.
I'm trying to monitor some performance in a production environment. The JS is minified and uglified so I cannot easily set a breakpoint on the function that binds the event.
I have seen in Chrome dev tools that when I inspect a particular element that I can also see the bound event handlers.
Is it possible to set a timer or create some kind of monitor that can tell me how long it has taken for the event handler to be attached to the element (on page load).
Thanks
Check out console.time and console.timeEnd on the Console API of DevTools:
https://developers.google.com/chrome-developer-tools/docs/console-api#consoletimelabel
I'd put the time on the very first line of code and timeEnd in the attach event funciton.
Also note that DevTools can somewhat prettify your code, when you're in sources panel, click the {} button on the bottom left corner of the DevTools window.
The spec says, that I should be able to use postMessage() on a window object. Mozilla says, I should be able to do it on an open()'d window, too.
However, I've taken Robert Nyman's postMessage example and tried to make it work across windows. However, neither IE10 nor Chrome seem to provide the postMessage function for a newly opened window.
var target = … // original declaration
popoutbutton.onclick = function(evt) {
realWin = window.open(iframeWin.frameElement.src, "window1", "width=600,height=400,status=yes,scrollbars=no,resizable=yes");
target = realWin;
target.focus();
};
// …snip…
target.postMessage(myMessage.value, expectorigin); // <-- fails because target.postMessage() is undefined
Am I missing something or is this feature simply not there yet?
- update below -
The developer preview simply doesn't seem to do that. I tried again with the consumer preview. IE10 (build 8250) does it like expected. Thanks for your help!
I can get it working in Chrome 15.0.874.121 although in your sample you are calling target.postMessage before you have opened the window, although you have skipped whatever code originally sets target.
You may also be encountering the issue of calling postMessage before the content in the new window has loaded (or at least loaded enough for the event listener to be attached). So the event could be fired off when nothing is actually listening. You may need to add a wait in this scenario to ensure the newly opened window is loaded.
In Internet Explorer 10 I get the error SCRIPT16388: Operation Aborted whenever I try the script - even if I wait 10 seconds.
I'm attaching some functionality to javascript by doing a firefox addon. However when coding in chrome and listening to the load event in the chrome overlay triggers for every loaded tab, but the "content" variable only points to the tab currently in the foreground.
How can I get the content of every tab upon document load from a firefox addon?
Assuming you are using code like this to be told every time a new page loads (which is what you really want to use if you aren't), aEvent.originalTarget is a reference to the document that the event was for.