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.
Related
I am the developer of Boxy, a famous native wrapper around Inbox by Gmail, and wanted to ask if anyone is able to help with something I have been struggling with since day one of development.
Here is the problem: links on inbox.google.com and gmail.com work differently than on other sites: clicking on them does not trigger a navigation action on my webview (I am using a WKWebView specifically, but the problem is also present using the old WebView). So I am having a difficult time opening links in an external browser when appropriate.
Because of this, at the time of this writing, I am relying on a terrible hack in order to open links: intercepting clicks on the document.body with javascript (using an event listener) and then forcing them to open on the external browser by calling the native app.
My best guess is that the Gmail/Inbox apps perform some javascript magic in order to track clicks on all the links inside emails and that, somehow, this interfers with the standard behaviour.
Has anyone got any idea how I can solve this problem?
Things I already tried
Implementing the method -webView:createWebViewWithConfiguration:forNavigationAction:windowFeatures: of WKUIDelegate. Did not work: the method is called but the request associated with the navigation action is empty.
I found a solution. This issue is due to when clicking link, instead of opening using target=_blank, Gmail attempts to open an about:blank window and then run javascript to redirect the link.
You need to make sure that Gmail can correctly receive the handle of the created window.
- (WKWebView *)webView:(WebUI *)webView
createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration
forNavigationAction:(WKNavigationAction *)navigationAction
windowFeatures:(WKWindowFeatures *)windowFeatures
You need to make sure this delegate method correctly returns the newly created wkwebview.
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.
I came across this question:
How to find out which JavaScript events fired?
But, that method of using Firebug will help me only if I log the events of a particular element right?
Here's my situation:
I want to analyze a webpage. It displays a list of headlines, and after you scroll down at the bottom of the page, something happens and then it fetches the next 20 headlines from the server and adds it back to the page. I would like to know exactly which event is fired and which function is called as this happens. How do I do that?
Use Chrome or Firefox Developer Tools and check under the networks tab.
For Firebug check console or scripts.
It shows you all the external files that have been used in your page.
Don't forget about
console.log("event fired");
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 have been using Titanium for an Android application that does some microblogging through restful web services. Everything works fine, but I am using tabhost to store five windows at the same time and some of these windows use same event handlers to get same kind of data. So when you get some kind of data from server, events from multiple windows may start to work. And these events may fire other events and things got all messed up.
Is there a way to suppress other objects and just enable the object in focus? How can I prevent this situation?
One way that I managed things like that is to hook my actions to the focus event of the window the user is actually opens. Then use whatever I need to render that window. It might be that you're trying to update all windows before the user is actually opens them. That's not really necessary. Wait until they open the window and then update it. As long as you have the data set up, rendering the window is quick and you can do it realtime and without too much delay.
On a mobile, you really have to try to do things as late as possible.