I am developing a custom translation extension for GMail in chrome and need to trigger the content script when the user clicks on an email in his inbox.
Since GMail uses AJAX, I decided to use the DOMSubTreeModified event. My extension works, but it seems via console logging that the function that sits the translate keeps getting executed constantly, even though the email text remains the same.
DOMContentLoaded does not trigger. Can anyone suggest any alternative I can use? I guess a timer or something in GMail constantly updates the page and makes minor adjustments. I had even narrowed the element on which the event is generated.
It appears that you should be using gmail-specific events to know when a new email is loaded, not generic DOM events. This add-on is not official Google code, but if you look at how it works, you could probably discover how to observe all sorts of gmail events or you could just use it to solve your problems.
Related
To give context, my team is building a rich text editor in the browser that needs to persist state to a server between sessions. The editor's state can obviously change from updates to the document that include keydown events, but we should also account for updates to the editor's stage that are triggered by undo/redo events.
Unfortunately the browser has no native undo/redo events (ref). One proposed hack floating around seems to be to stop propagation for keydown events that maps to undo's keyboard shortcut in addition to disabling the context menu. However, this still leaves open the ability for the user to navigate directly to Edit -> Undo in the application's menu bar, which will directly trigger a document.execCommand('undo') and doesn't fire an event. As a result we wouldn't know to send an update to the server.
Here's a W3C thread on this issue. As of the writing of this, it appears that a solution is still in the works...
When Quill, another browser text editor, ran into this issue their team seemed to advise: "disable the native undo/stack", which is what Facebook's Draft.js actually does. Given that seems to be what we're working with, does anyone know of a way to disable/substitute the browser's native undo/redo stack? Obviously, this is an aggressive solution, but, as of the writing of this, that seems to be the only option.
In the meantime, the answer to this question probably buried somewhere in the Draft's code. If no one beats my team to it, I'll report back on what Draft seems to be doing. Thought it was at least worth documenting this issue.
Likely the best solution is to listen for a debounced onChange event from the contentEditable element. This doesn't allow for custom behavior regarding undo, but it should solve the main issue. Also adding a beforeunload event to alert the user to potential unsaved changes should handle additional edge cases.
I want to analyze a website that is not mine.
So, I want to use Javascript to do it at my end in the browser.
After I click a button on the website I want to trigger a timer and as soon as a notification from the website comes back, the timer should stop and save the notification that came back.
How can I do this the easiest way?
I cannot give you the link to the website, because it's hosted in a private network.
My first question would be, how I can log all events that are triggered on a website to the console, so I know the name of the button I want to wait for.
Thanks!
dave
All events on a specific DOM node:
To see all the events for a specific DOMnode, or window (only works on chrome i believe, didnt test it elsewhere):
getEventListeners(window)
this will give you an object with all the events, then you can intercept them with
window.addEventListener(eventName, fn, true);
The whole application:
this way your event will be called whenever an event on that node is triggered (window in this case)
if you want absolutely all events on the whole app, you can achieve it with using something like firebug
Specific event on a specific element:
if you want a button click only, you can do the following:
var specificButton = document.querySelector('#specific-button')
specificButton.addEventListener('click', function() {});
Implementation:
if you do not own the sourcecode, you can use something like greasemonkey or tampermonkey to inject your javascript into the page.
if you are using it on a server, you can use cheerio to parse the returned html from the get request, and apply queries on it, but you will lose the ability for listening to live events from io devices.
If I understand you, the easiest option I see is to open your browser developer tools and using the console get the button (document.getElementById, i.e.) and change its onclick callback, including a call to the old callback in your new callback, and trigger your timer.
To intercept the response to this button (I assume that it triggers a network request), you'll have to analyze a bit the code of the web to see how you can detect it.
You could also edit the website javascript throught "Sources" tab of your browser's dev tools.
It's an idea. I have never done something like that. I have to admit that it sounds a little weird to me.
Context :
I have developped an application which require authentification. This application uses events for dialoging with a server. When the server answer, some events are send to the client (UI).
Problem :
When the user close the page, it is necessary to make a logout on the server. With my architecture, it's easy to call a method which perform this logout. But i would like that the user show the logout progress before closing the webpage. In fact, i would like to close the webpage only when a specific event (for example : disconnection_success), is well received.
Moreover, it's verry important to not launcg another webpage because event is received on the first webpage when the logout is successfull. (Because dialog is done throw XMLHttpRequest)
Test :
I already do some test using onbeforeunload but it seems that is difficult to customize the popup.
Do you have some ideas to resolve the problem ?
BR
There are some issues with this, but you're on the right track. You're right in that you should use onbeforeunload because it is the only event that you can have triggered upon the closing of the browser window. (I know you can use onunload but at that point you have no time to do anything.) The issue here is how much code do you want to execute. The onbeforeunload doesn't allow you much time before it starts to unload the page.
BTW, there are two different scenarios with onbeforeunload:
If you return a string inside the onbeforeunload event, it creates the pop-up that you were referring to. The issue here is that with the pop-up, you won't have enough time to execute code
The other option is not returning anything. Instead, call your logout methods. This should give your code enough time to execute before closing
I actually had a question very similar to this and ended up solving it myself: How to logout during onbeforeunload/onunload using Javascript
In your question you state that you want to have a progress bar displayed when they log-out. This is impossible to do when the user closes the browser. At the moment they close their window, you have lost all control, except for in the onbeforeunload (and onunload but don't use this), and that is why your code needs to be executed there. With that being said, you could anchor your logout button (I'm assuming you have one on your application) and have it display the progress bar.
Just think about what could happen if you actually did have that kind of control - where you could pop up windows and progress bars when the user is trying to close their browser window. You could pop up anything and restrict the user from having any reliable functionality. That is why it was programmed that the onbeforeunload (and unload) events are the only ones possible to access the closing of a browser. These events have some pretty strict guidelines to them that prevent any kind of possible mis-use. I understand the problem you're having, I was there and it stinks, but I think that is your only option if you were going to use onbeforeunload.
I'm writing a chrome history extension, and I was wondering if there's a way to detect when the user clicks a link.
Instead of injecting listeners to every single link via Content-Script, can you utilize: chrome.tabs.onUpdated event? There are many events as well.
But since you stated history, you can use the onVisited event, which fires when a URL is visited.
It would be better to utilize the extension framework instead of relying on content scripts all the time which might become messy.
I am trying to write a JavaScript script that is "overlayed" on top of a Facebook page. It uses DOMContentLoaded to detect when content is loaded, then adds some extra stuff in. However, because Facebook doesn't actually "reload" the page when going to a new page (it just uses AJAX), the DOMContentLoaded handler doesn't run again, even though there is new stuff to look through.
Anyway, to detect the change, I thought about using onhashchange since Facebook used to change the page's hash, but in Firefox 4 (I need to support Firefox 3 and later with this, but no other browsers), Facebook doesn't change the hash anymore and in pre-Firefox 3.6 there is no onhashchange.
I thought about using DOMNodeInserted, but would that really slow down the page? (I really can't have any slowdowns in this script.)
you might want to monitor the windows.history object, see the following answer, on how facebook uses it to update pages:
"Redirect" page without refresh (Facebook photos style)
For lightweight pages it generally doesn't have noticable effect. However, on bulky pages (I tried this on gmail) it makes that really really slow that I cannot even compose a message smoothly. And that event was added to a very simple span element which just had a single link in that. The events like DOMNodeInserted and DOMSubTreeModified are real show stoppers.
UPDATE: For all those trying to find an answer to this, note that these methods DOMNodeInserted (or DOMSubtreeModified) really had performance problems, so according to new ECMA specs it is a much faster listener : MutationObserver for doing the same thing (and more).
https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/