I'm in need for help with being able to access and manipulate DOM using CEF. I've been researching and have found that CEF only provides readability of the DOM with methods such as CefDOMDocument, ViewDOM, etc. These are to be called only on the render process main thread, however, I'm not well versed in threading and am not sure where to implement methods within the CEF code (which .cpp file and under which class, etc.). From there, I know CEF doesn't support manipulating the DOM directly but allows this ability through the use of JavaScript.
So my question...
Can someone please provide the information (an example would be extremely helpful) on where/how to access the DOM using CEF? I have been attempting under this piece of code within cefclient_win.cpp...
CefBrowserHost::CreateBrowser(info, g_handler.get(),
g_handler->GetStartupURL(), settings, NULL);
But I believe this is part of the browser process and not the render process...
If you were to also know how to then manipulate the DOM with JavaScript (I have found methods such as ExecuteJavaScript() but am facing the same problem with this as I am with viewing the DOM) that would be helpful too, but just an example on helping a beginner like me view the DOM through CEF would help tremendously.
You'll find all you need to build your solution with this:
dom_test.cpp
In this file, have a look to:
line 84: Class which implement CefDOMVisitor (implement the Visit method)
line 111: Visit the DOM
In order to visit the DOM here is the API documentation of the CefDOMVisitor.
In the Visit method you can access to the CefDOMDocument and you can start visiting the DOM.
There is also this C# tutorial you should have a look in order to understand how does it work.
Hope that helps.
Related
Using javascript in the browser's console (firefox), I can do:
document.activeElement.placeholder
If the mouse cursor is in the StackOverflow search bar, the code above returns:
"Search…"
I can achieve the same using Parenscript with:
(ps:chain document active-element placeholder)
Is it possible to achieve the same output using CL Plump (manual) and/or Clss (manual) instead of Parenscript?
If so, how to do it?
I have tried finding this on the documentation references above but I could not find it. I am new to CL, though. Maybe I missed something.
Thanks.
When using Parenscript you are using the browser engine through JavaScript. The browser has a concept of user interaction, such as focus, on top of the model representing the document itself.
Plump and CLSS are not browser engines. They only have an object model of the HTML document they have parsed. They do not model anything like user interaction, so they also do not have something like the »active element«.
I found this free PWA https://www.the-qrcode-generator.com and now wonder how I could do one such myself.
Since I couldn't find any access to its source code I wondered if it'd be difficult to reverse engineer.
I'm interested in building a PWA with QRCode functionality.
This one was created with AngularJS v1.3.20. You can find the source in your console windows under Sources tab. You can easily beautify the code inside the window to make it readable.
If you want to know how they organized their rest API, the browser network tab will help a lot, just filter by XHR and examine all the call from the front end to be.
The front end is very hard to revers engineer, because most sites are served as minified bundles, so you can't see the original code.
You can however find some other information about what they used to build it, for example in the html source you can see some ng-* tags, which indicates that this is angular, you can also see that body has attribute data-ng-app meaning this is angularjs and so on.
For the QR logic you can see that there are no back end calls, meaning that it is written entirely in the client. I would search for already available solutions for that.
So I am trying to inject some javascript into a website to scrape some information. However, if I could get a reference to the react component my life would be made a lot easier. I have looked at several questions on Stackoverflow but nothing useful turned up:
Reactjs - Get a component from anywhere in the app
React - get React component from a child DOM element?
I realize that react is basically just rendering the DOM by using its internal state and so reversing the DOM is not an option. Moreover, since the javascript on the website isn't mine I can't exactly have a global reference to the React component when its created. What I would really like is to have the '$r' that the react chrome devtools provides when you choose a DOM element but without having to rely on the chrome extension. I guess my question really boils down to how can I get the same representation that the chrome dev tools does so that I can reference a react component without actually creating a global variable. Also note I don't really care about efficiency or best practices I just want the reference to the component the same way that the devtools does it.
We are develpoing a web-based automation solution for a web application that is built using ExtJs.
Currently i am testing various different object identification techniques that identify web elements in the best way.
We'd like to use the IE developer tools (F12) to highlight and select DOM objects on the page, and (somehow) get their corresponding ExtJs component (along with its corresponding properties, such as itemId).
Is this possible to do through code or through some other technique?
I am unfamiliar with IE Dev tools for such things, however I can attempt to answer targeting specific components and their elements.
You can target Ext components via several ways:
Ext.ComponentQuery.query(CQselector) method (see docs for examples)
Ext.getCmp(componentID) if you know component ID
up() and down() methods from any container/component. these also take CQselector expressions
Any of these methods are accessible from the page since Ext library is loaded. In browsers like FF and Chrome you can execute these methods directly from the console. I am guessing similarly they should be available in IE Dev tools.
Once you have reference to the Ext component you can get HTML elements through .dom or .el or similar properties. Or you could use Dom query directly.
I believe that if you set the id property rather than the itemId, you can achieve the desired result as this is passed through as the html id property of the top level container for the component (I think!). It's a little complicated to get that to work with accuracy though given the amount of nested divs/tables that are used in most of the extjs components. Good luck!
Hard to tell what you're looking for, but if you're trying to get a reference to an Ext.Component that is rendered, you can look for the wrapper node for your component in the HTML structure. The HTML id is the same as the component id. If you run var comp = Ext.getCmp('some-id-12345') and if that returns something, you've found the wrapper for an Ext.Component.
You could then use
comp.itemId
To retrieve the itemId
You should look into http://www.illuminations-for-developers.com/ A plugin for firebug that shows Ext.Components.
You can also use the Sencha Page Analyzer to see the entire component tree
I searched high and low and cannot a button tag in any of the javaScript that is generated that referred to step 7 of the tutorial. I must be looking in the wrong places, or I'm generating the code incorrectly. I generated the code in the three different levels of detail. Can anyone point me in the right direction who's completed the tutorial or is more experience with the GWT? Looked in every file inside of the war directory. Of course I could have missed one! :-/ Would definitely like to be able to find this stuff on my own when I begin development.
Here's the link:
http://code.google.com/webtoolkit/doc/latest/tutorial/style.html
Look under 3. Associating style rules with GWT-generated HTML elements. What I'm specifically trying to find is the tag.
<button class="gwt-Button" tabindex="0" type="button">Add</button>
Of course you don't have to do the tutorial any project you've worked on should have similiar tags to be found I just can't find the file containing them...
I did find some stuff containing gwt-Button class name on line 3078 of one of those "unique" file names, but the way the author stated it made me think this process would be "easier". This was generated using the pretty compile.
function $Button(this$static, html){
$ButtonBase(this$static, ($clinit_21() , $doc).createElement("<BUTTON type='button'><\/BUTTON>"));
this$static.element['className'] = 'gwt-Button';
this$static.element.innerHTML = html || '';
return this$static;
}
This looks like it could be used to generate the tag. Is this a combination of some javaScript and some javaScript library code like JQuery or Prototype?
Thanks
The best way I know to see the javascript generated by GWT is to use the Brain.jar DOM Viewer http://www.brainjar.com/dhtml/domviewer/
It's not the most user friendly, but if you click around, you can generally find the InnerHTML of some element that corresponds to the whole web page, and then search for "button" or the relevant keyword.