Show HN: OpenAPI DevTools – Chrome extension that generates an API spec

I wish this would document the auth headers.<p>What would be particularly useful is if it saved token values and then (through search) joined them on the response of the auth call to get the initial token.<p>That way you could easily determine what auth call was needed to get you a token to use the endpoint.

This is super cool. Writing code to drop into the JavaScript console lets you do insane things. I’ve found great success using ChatGPT to help me write the code, which I then just cut and paste into the console. Asking it to “make it all run in parallel using async&#x2F;await” will massively speed up execution of serial tasks.<p>For instance, I had GPT help me write browser JS that groks literally thousands of IP addresses in an open security tool that shall not be named. I can vacuum much of their entire database in seconds by making hundreds of async calls. While they do have bot protection on the website, they appear to have no protection at all on their browser APIs once the user has been given a cookie… I suspect this is common.

Love it!<p>I used <a href="https:&#x2F;&#x2F;vite-plugin-web-extension.aklinker1.io&#x2F;guide&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;vite-plugin-web-extension.aklinker1.io&#x2F;guide&#x2F;</a> before to have cross browser extension support. If you don&#x27;t mind I could take a look to add firefox support (no guarantee)

My most common use case here is to then want to hit the API from python, and adjust the params &#x2F; url etc.<p>Would love a &quot;copy to python requests&quot; button that<p>grabs the headers<p>generates a boilerplate python snippet including the headers and the URL:<p><pre><code> import requests import json url = &#x27;&lt;endpoint&gt;&#x27; headers = { &#x27;User-Agent&#x27;: &#x27;Mozilla&#x2F;5.0 ...&#x27;, ... } data = { &quot;page&quot;: 5, &quot;size&quot;: 28 ... } response = requests.post(url, headers=headers, data=json.dumps(data)) if response.status_code == 200: print(response.json()) else: print(f&quot;Error {response.status_code}: {response.text}&quot;)</code></pre>

This reminds me a lot of:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;alufers&#x2F;mitmproxy2swagger">https:&#x2F;&#x2F;github.com&#x2F;alufers&#x2F;mitmproxy2swagger</a><p>However, having the capability delivered in a browser extension is extremely handy!

Nice this made me go back and check up on the Gorilla LLM project [1] to see whats they are doing with API and if they have applied their fine tuning to any of the newer foundation models but looks like things have slowed down since they launched (?) or maybe development is happening elsewhere on some invisible discord channel but I hope the intersection of API calling and LLM as a logic processing function keep getting focus it&#x27;s an important direction for interop across the web.<p>[1] <a href="https:&#x2F;&#x2F;github.com&#x2F;ShishirPatil&#x2F;gorilla">https:&#x2F;&#x2F;github.com&#x2F;ShishirPatil&#x2F;gorilla</a>

There&#x27;s a similar, more powerful tool if you&#x27;re into this<p><a href="https:&#x2F;&#x2F;www.akitasoftware.com&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.akitasoftware.com&#x2F;</a>

This is amazing! to figure out the website apis has always been a huge pita. With our dlt library project we can turn the openapi spec into pipelines and have the data pushed somewhere <a href="https:&#x2F;&#x2F;www.loom.com&#x2F;share&#x2F;2806b873ba1c4e0ea382eb3b4fbaf808?sid=3f294ea5-93b8-4b5e-a900-e3e2826bd275" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.loom.com&#x2F;share&#x2F;2806b873ba1c4e0ea382eb3b4fbaf808?...</a>

This is awesome!<p>I&#x27;ll second&#x2F;third the feature request for auto-including auth headers&#x2F;calls (as many of the sites I&#x27;m trying to understand&#x2F;use APIs from use persistent keys, and scraping these separately is just unnecessary extra time).<p>On that same note, I&#x27;d greatly appreciate keeping the initial request as a &quot;sample request&quot; within the spec.<p>I&#x27;d also greatly appreciate an option to attempt to automatically scrape for required fields (e.g. try removing each query variable one at a time, look for errors, document them).<p>Thanks for this :)

This is a first step into turning the entire web into an API albeit before we hit the login&#x2F;signup roadblocks (but then that&#x27;s where agents come in)

Great project! These features come to mind that would be great additions:<p>1. Ability to filter response properties.<p>2. Ability to work with non-JSON (web scraping) by defining a mapping of CSS selectors to response properties.<p>3. Cross-reference host names of captured requests with publicly documented APIs.<p>4. If auth headers are found, prompt user for credentials that can then be stored locally.<p>5. &quot;Repeater&quot; similarly found in Burp Suite.<p>6. Generate clients on the fly based on the generated OpenAPI spec.

Very nice! Auto generating type information from looking at permutations of values is hard though. Q: Does this handle optional values? Also, being able to mark string field as &quot;enums&quot; and then collecting the possible values instead of just typing it as &quot;string&quot; would be mega handy.

Amazing. I’ve often wished this would exist. Thank you.<p>It was always my step 1 towards Xxx. Keen to know what directions you were thinking?<p>I’d love to see more remixing on top of API’s websites typically only expose for their own use.

Thanks for sharing Chrome extension @mrmagoo2.<p>It&#x27;s amazing to see a tool that simplifies the process of generating OpenAPI spec. this is the best showHN this year.

This looks very useful, but what do I do with the discovered data?<p>Suppose I have a site that runs a search that I want to be able to automate. However, instead of sending the search term in the URL, it updates live (presumably via some API call).<p>Now suppose I need a one-click solution to be able to open that page and run a specific search.<p>Is there another Chrome plugin that would allow me to use this API data to make that happen?

Had in mind to build something like this for quite some time to quickly explore undocumented APIs - looking forward to see your progress!

Okay, this is wonderful. Love it already!!<p>Sometimes I click on a path parameter and it doesn&#x27;t &quot;create&quot; it, even though there are several other examples in the list. Not sure if it&#x27;s a bug, or something I&#x27;m doing wrong.<p>Overall, this is an absolutely wonderful tool and I&#x27;ve wanted something like this for a long time. Incredibly useful, thank you!!

Damn I literally built a really similar tool myself using HAR files just a couple weeks ago! Yours is way more polished though, nice work.<p>I have a lot of ideas in this space (some PoCs), and I&#x27;ve been starting to scope out a company around them. Would love to chat to see if there&#x27;s any shared opportunity for both of us!

The problem with this type of tools is that they only produce specs based on infos they can get.<p>The spec produced will be incomplete (missing paths, methods, response variants, statuses). For that you should use a framework like Fastify, NestJS, tsoa, FastAPI, which have built-in OpenAPI support.<p>Can be very valuable for reverse-engineering though :)

Really cool, we&#x27;re using a similar technique at Kadoa to auto-generate scrapers for any website. Analyzing network calls to find the desired data in API responses is one of the frist things we do before starting to process the DOM.

Cool! Can you add autocomplete of paths to URLs based on the spec now?<p>so I can be typing in the URL bar for any website I have landed on in the past and tab through all the available routes?<p>e.g.<p>- news.ycombinator.com_<p>- news.ycombinator.com&#x2F;new<p>- news.ycombinator.com&#x2F;submit<p>- news.ycombinator.com&#x2F;show<p>etc.

A Firefox version of this would be super handy! Does that already exist?

The description doesn&#x27;t explain exactly what this extension does.<p>I assume it monitors all XHR requests as you browse a website, and if the request&#x2F;response matches [some criteria (e.g. is JSON?)] it will assume it&#x27;s an API request and log it?<p>Is that correct?<p>If so, it will only work on websites where the frontend is implemented like a PWA, with lots of AJAX calls to fetch data, etc. For sites whose pages are all generated server-side, the extension won&#x27;t generate any API schema, right?<p><i>Edit:</i> Also how does it differentiate &quot;API requests&quot; with regular AJAX content fetching? If a website fetches some arbitrary content via an AJAX request (e.g. some lazy-loaded HTML), that&#x27;s not an API request. That&#x27;s just part of a website&#x27;s layout.

We at Step CI have a similar tool, that acts as a proxy and can generate OpenAPI spec for the request&#x2F;response pairs.<p>(You can also use it to generate automated tests)<p>If you&#x27;re interested: mish@stepci.com

The documentation states &#x27;automatically populate based on JSON requests that fire as you browse the web&#x27; so does this mean that gRPC protobuf are not captured?

This looks super interesting. Works for anything? Damn.

Is there a way to filter out headers?<p>The result contains headers like content-length and similar.<p>Also it would be nice if it could factor out common schemas.

Awesome! Any chance of a Safari extension too?

Would be cool if this shared the user found specs to create a database of API specs for the web

this is very cool! I just tried using it, unfortunately, my NextJS app dir project makes most requests from the server side, so it was only capturing &quot;posts&quot; made from the client. Is there a way to run it from the server?

I&#x27;m sure many developers wished at some point such magic would exist

Would love this for apps.

This looks super useful, can’t wait to try it at work tomorrow!

This could be useful for learning from any site you admire.

looks really cool! congrats!