Is there any way to access meta information provided by Chrome developer tools in JavaScript on a page? For example the bounding rectangle of an element, if element under cursor etc.
Thx for answers
No, this information is not available directly through JS. However you can use the remote debugging (and the Debugger API is available as a transport in your extensions) to get that info.
Related
I'm working for a project which run by chrome headless driver puppeteer, And i recently found a website (https://chrome.browserless.io/) could show puppeteer process in browser. This website appended an chrome devtoll which looks like magic.
i try to figure out how did work, and i found that this website inject a chrome devtool iframe, and the url usually like below:
https://chrome-devtools-frontend.appspot.com/serve_file/#7f3cdc3f76faecc6425814688e3b2b71bf1630a4/inspector.html?wss=chrome.browserless.io/devtools/page/(4BDC5841A823B95BF9B6107801819A31)&remoteFrontend=true
i think the version after inspector.html refer for the puppeteer code, but i don't know how this work.
i think this is some method imply over DevTools Protocol. I search the document but found nothing about how to put chrome devtool iframe in browser.
Does anyone know how to do this? or any document about this?
The Browserless Chrome Debugger you mentioned in your question has an instance of CodeMirror text editor embedded in the left hand section.
In the right hand section, an iframe element exists to display the result of the code you executed.
Simply put, you can simulate this type of behavior and allow users to execute Puppeteer code directly from your website by following a series of steps:
Sandbox a section of your system with a system container manager, such as LXD.
Install Node.js, NPM, and Puppeteer.
Install a web-based code editor, like CodeMirror, and embed it into a web page.
Validate and send an AJAX request with the code from the text editor to your sandbox server.
Sanitize the code, and then pass the code to Puppeteer.
Return the result to your callback function in your AJAX request on the client-side.
Format and sanitize the result before displaying it in an iframe.
Note: This is a naive implantation of this concept intended to explain the bare necessities of what would be required to obtain the goal in the question.
Make sure that you follow all generally recommended security practices.
So like they title says, is it possible to check for the location and line of where an api is exactly being calling in the XHR Networks tab in Chrome Dev Tools? If so how?
Thank you.
That is possible, by going into the network panel tab. Check the 'Initiator' column.
Usually the xhr call in itself is done by a library, e.g. jquery. It might be useful to mouse over the column value to get the stack trace of the call. From there you should be able to jump to the high-level xhr call that interests you. See capture:
How to search through all the ajax responses in network tab in Chrome?
I want to do this is because it is difficult for a JavaScript developer to get to know which information is coming from which service call, especially if you are new to the project and business logic is not clear. Also, opening each service in a network tab and searching in responses of so many service calls is difficult and time consuming.
This has now been implemented on the Network tab. Whenever a search criteria is added, Chrome will offer searching through all headers and bodies.
More from offical doc,
Open the Network panel then press Command+F (Mac) or Control+F (Windows, Linux, Chrome OS) to open the new Network Search pane.
This is similar to another question this morning to search json responses. The solution is the same, star this issue this issue. Starring is triggered via the star icon in the far left area of the blue title are just under search.
Starring issues let's the developers know what people need. The more stars something has, the more likely it is to get worked on sooner.
Currently this functionality is not provided and extensions are unable to add this type of functionality since the network panel isn't extensible in this way.
In Firefox you can save all the responses as a HAR file and then search through the file in a text editor (Chrome truncates the responses).
Inspector of Microsoft Edge browser offer such feature. Useful when you need to search through traffic made by an HTTPS web site that Fiddler cannot inspect (like Facebook web site).
There doesn't seem to be a way to do this in Chrome or Firefox. My solution has been to use Fiddler, which does support it.
Edit: I believe this was working for all resources at the time of writing, but please see comments because people say it is not/no-longer working as expected.
As of Chrome version 91, if you want to search through all resources (not just AJAX/fetched resources), then you need to open DevTools and then press Ctrl+Shift+F to open a search box. If you just type into the "filter" text input then it only searches through the URLs, rather than also searching the contents.
I have a working Browser Helper Object (BHO) which is essentially an ATL based COM component. When the component is registered as a BHO in the Registry, the internet explorer calls the SetSite() method passing an object with an interface of IWebBrowser and it also exposes a set of events that can subscribed to - such as OnDocumentComplete, which gives us access to the InnerHTML.
I'm looking for something in the same lines for non IE browsers Firefox, Chrome and Safari. I know firefox extensions is where I should start
Is it possible to achieve the same using a cross browser SDK like NPAPI ? (Because each browser has its own SDK and extension development platform like cocoa, Pepper API etc. and in addtion most of them support NPAPI.)
How can I subscribe for events so that a SetSite() sort of function could be called by the browser when the user navigates to a different site ?
The answer to your first question is simple: no, it is not possible to do this with npapi. See http://npapi.com/extensions for more information about the difference between a Plugin (NPAPI) and an Extension. If there are things you can't do with the extension that you need to do (for example, that require C++ code to work) you could put those things in a NPAPI plugin and use it from your extension. If you decide to go that route I recommend looking at FireBreath.
As to the second, it will differ based on which browser you're writing the extension for; yes, it will need to be different for each browser. A quick google search for "firefox extension event page load" yielded a useful-looking doc.
I have a plug-in that handles its own url schema (something like mystuf:// ). If a user clicks on such a link when the plug-in isn't installed (s)he gets an ugly error. So I extended my installer to write into the Registry (for Internet Explorer) and the user.js (for Firefox) to ADD a custom string to the user agent string. These additions survive a browser upgrade nicely (Microsoft uses this technique to indicate the presence of the dotNet Framework).
Now I need to extend this to Apple Safari and Google Chrome on all supported platforms.
To be clear: I'm not looking how to REPLACE the user agent string, but how to amend it with additional information.
Any hint?
I faced a similar problem and I implemented this in the same way as apple do for iTunes as described in this SO question. Finding information on how to create the Firefox plugin was more tricky, but the answer to my question was a great help. The Firefox (or mozilla) plugin will be used by all mozilla based browsers (Firefox, Chrome, Safari) and you will therefore be able to use the same javascript to detect the firefox plugin in all of these browsers and therefore determine whether your plugin/custom protocol/application is installed.
As Google Chrome supports the Netscape Plugin API ( http://en.wikipedia.org/wiki/NPAPI ), the Firefox way might be a good starting point also there.