I'm working a lot with the chrome developer tools to develop web applications. Currenty in one big project we have an application which features its own JSON-format for requests to the server. The JSON objects sent contain various information about the type of the request and its data and so on.
Is there an opportunity to extend chromes developer tools (especially the network view) with a special view which displays the data from the request in a way that makes it more readable for developers working with the project?
I tried to find out about extending the tools but i don't know really where to start. I found some information how i can add tabs and pages to the developer tools but nothing about how i can get the request / response information to display them.
There is no standard API to extend the network view of the developer tools. If you're happy with using a custom devtools tab, use the chrome.devtools.network API to filter and format responses, and render it in your tab.
If you're adventurous, you can use the next approach to directly modify the content of the network view.
First, you need to know how to debug the devtools.
Open the developer tools (F12).
If it's docked, undock it.
Press F12 to open the devtools of the devtools.
Then, you need to use your debugging/coding skills to find out which methods are responsible for rendering the network panel (tip: use DOM breakpoints to quickly discover where to start).
Write code which transforms the network tab to the desired format (either by monkey-patching, or by hooking up on the event you've found at the previous step).
At this point, you know how to change the lay-out of the network tab. Now, you need to permanently activate the code for your developer tools. I've explained two of such methods at How to inject javascript into Chrome DevTools itself.
You could download a copy of Google Chrome's source code and play with it; it's written in C++.
/trunk/src/chrome/browser/devtools looks to be the correct dir to look at.
You can make use of chrome.devtools.network.onRequestFinished. For more control and advanced information you can use chrome.webRequest api.
Related
I'm interested in creating a Chrome Extension which lists all the elements on the webpage that have an 'id' attribute in a menu. Then, when the user clicks on the element in the menu, the corresponding element on the webpage is highlighted.
I saw Chrome devtools highlights an element when you right click and inspect on it. I'm curious if there is some highlighting API accessible from DevTools? If not, how does one highlight elements similar to how devtools does it?
You can use the exact API that Chrome DevTools are using. You will need to call highlightQuad or highlightNode via debugger API. You can even specify the color and you can be certain that the highlight will render correctly and not interfere with the website (injecting an 'overlay' node, as Xan suggested, doesn't guarantee that). On the other hand, it will be much trickier to get right and user won't be able to use both your extension and DevTools at the same time (there can be only one debugger API connection). This code should get you started.
Chrome API does not provide access to such highlighting; you'll need to implement it yourself with an overlay.
Chrome API does provide access to the same functionality as DevTools if you use the debugger API. See this answer for details.
Before Chrome 63 (2017-12-06), writing a DevTools extension (i.e. using devtools.* APIs to display UI in DevTools) and using debugger at the same time would've been impossible, as only one instance of a debugger protocol client was allowed at once. This has changed, so now it's a viable answer, even if the documentation for chrome.debugger API wasn't updated yet.
Even though it's now possible, be aware that debugger API is an API with heavy warnings (adding it after publication may auto-disable installed extensions - needs testing).
Below is the original answer:
You can implement the highlighting yourself with an overlay.
You can study how it's usually done by looking, for example, at the element picker of uBlock Origin.
In short, that method creates an SVG overlay using, among other things, getBoundingClientRect() of the elements selected.
I'm trying to make an extension that is able to find a specific resource loaded by the page, filtering by name and downloading it. The reason I want to do this is because I usually go to the network tab in the developer tools, filter the requests/responses, for example, looking for one with the word "foobar" in its name, and open the link in a new tab so I can download it (it's an xml file).
I was wondering if this could be automated with an extension, even if the word used to filter is hardcoded.
I don't have any experience with chrome extensions, so I wondered if this could be done or if it's just not possible with the devtools api. In case it could be done, if you could give me some guidelines on how to make it I would really appreciate it.
Thanks!
There are several ways to access the information you need in an extension.
You can write a Dev Tools extension. In that case, you have access to chrome.devtools.network API which will provide you that information.
This requires you to open Dev Tools and interact with your own UI there (such as an extra tab in Dev Tools).
You can go low-level and use chrome.debugger API to attach to a page like Dev Tools would. It's a complex topic, I'm just pointing you in that direction.
Since you rely only on filtering by name, not response itself, you can use chrome.webRequest API to intercept network requests and log those that interest you for processing. This is probably simplest to do.
I'm diving into the world of Chrome Extension development, primarily because there is a very small feature that is missing in Chrome that I miss dearly. The context-menu option to "Set as background/wallpaper" like that found in Firefox. Sounds trivial, but it's convenient.
I have most of the "basic" stuff worked out with the manifest file, am able to install it, even managed to get it to show up as a context menu item.
The problem obviously is that I am wanting to mess with a user's OS-level settings which is extremely difficult because of security issues (fully understand this).
I found an extension that allowed this in older versions of Chrome, and it looked like the developer used some type of .dll and C++ to accomplish this.
I'm not really sure how to make this work.
Since that Chrome doesn't allow these kind of manipulations (such as your PC's settings), you will need to create a native application that will run beside your extension. When the user chooses the image from your extension and selects "use as wallpaper", you will use the native messaging API to send a message to your desktop application, that will set the wallpaper (and do whatever else you can't do within a chrome extension) for you.
You can use the chrome.wallpaper app api to set the wallpaper after using the messaging api to send the image from your extension.
I'm looking to extend dev tools in chrome to support 'what-just-ran'. Something like this - you click a record button, do something on the web page, and stop recording. In dev tools, it should show what part of the code ran - like dynamic code coverage. From what I read on the docs, there isn't any direct way. I have been hacking around with dev-front-end (source for developer tools) by setting breakpoints on every line and finding what line executed, that's about how far I could go. Is this project possible with current chrome extension APIs or even dev front end changes?
JS heatmap profiler slash code coverage tool does that by preprocessing JavaScript.
(source: google.com)
Timeline has all of this plus rendering and loading information. Timeline data is exposed via Remote debugging API as well as any other data DevTools has.
Is there any good reason why I can't use two of them together?
browser_action
page_action
app
I can't think why single extension can't use browser and page specific actions together. Why should I have to write single extension for each action ...
For a browser that boasts about its simplicity I believe that is the clearest explanation. To prevent clutter.
Packaged Apps is the easiest to explain as they are basically an alternative to Hosted Apps for developers that don't wish to host a service or wish to make their app fully integrated in to Chrome and/or work offline. However, since packaged apps are bundled as extensions this prevents them from adding anything to the browser's chrome since hosted apps don't have this ability.
Regarding the action choice, I can only imagine this restriction is to help prevent extensions from overcrowding the address bar and the toolbar with duplication.
In a lot of cases using badges and the onClicked event correctly can replicate a lot of the functionality of page actions in browser actions while using a combination of content scripts and message passing to trigger changes.
The StumbleUpon extension rotates its browser action's behavior depending on whether or not its toolbar is currently displaying.