Git Product home page Git Product logo

andrewwalsh / openapi-devtools Goto Github PK

View Code? Open in Web Editor NEW
3.9K 22.0 67.0 47.75 MB

Browser extension that generates API specs for any app or website

Home Page: https://chrome.google.com/webstore/detail/openapi-devtools/jelghndoknklgabjgaeppjhommkkmdii

License: MIT License

HTML 0.71% TypeScript 98.29% JavaScript 0.08% CSS 0.91%
api devtools generator openapi specification openapi31 chrome-extension openapi3

openapi-devtools's Introduction

MIT License Download in the Chrome Web Store Download in the Firefox Add-on Store


Open API dev tools

Effortlessly discover API behaviour with a browser extension that automatically generates OpenAPI specifications in real time for any app or website.

Read More · Report Bug · Give Feedback

About The Project

OpenAPI DevTools is a browser extension that generates OpenAPI specifications in real time from network requests. Once installed it adds a new tab to DevTools called OpenAPI. While the tool is open it automatically converts network requests into a specification.

Features:

  • Instantly generate an OpenAPI 3.1 specification for any website or application just by using it
  • Automatically merges new request & response headers, bodies, and query parameters per endpoint
  • Click on a path parameter and the app will automatically merge existing and future matching requests
  • View the specification inside the tool using Redoc and download with a click
  • Export and save a session at any time, or share it with others

(back to top)

Installation

Download the extension in the Chrome Web Store.

Download the extension in the Firefox Add-on Store.

Otherwise, to install manually:

  • Download and extract the dist.zip file in the latest release
  • In Chrome, navigate to chrome://extensions
  • In the top right enable the Developer mode toggle
  • In the top left click Load unpacked and select the extracted dist directory
  • Open a new tab and then select OpenAPI in the developer tools (open with cmd+i or ctrl+i)
  • Firefox is more challenging. Please use the add-on store.

(back to top)

Usage

The specification will automatically populate based on JSON requests that fire as you browse the web. In the settings menu you can filter hosts and parameterise paths in URLs. Once you do so all matching existing and future requests to that endpoint will be merged. This process is irreversible, but you can clear the specification and restart at any time.

When the same endpoint responds with different data, such as a value that is sometimes a string and sometimes null, the specification for that value will be either string or null. All information is accounted for in the final specification. If you see something missing from a request, trigger a request that contains the missing information.

The settings menu contains several options. Here you can enable real examples in the specification. You can also export the current state of the app as a string, share or store it, and import it later.

(back to top)

What is OpenAPI?

An OpenAPI specification is a description of what an API expects to receive and what it will respond with. It is governed by the OpenAPI Initiative and the Linux Foundation. OpenAPI specifications are the modern standard for RESTful APIs, and systems that have them are far easier to work with.

(back to top)

Contributing

To develop the project:

  • npm install
  • npm run dev

(back to top)

openapi-devtools's People

Contributors

andrewwalsh avatar debakarr avatar madeindjs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

openapi-devtools's Issues

Record auth headers

Awesome work! I have one feature request though - could it record auth headers/tokens? This would be super useful for logging which requests require authorization and how to send an authorized request

Structural error at [property] should be equal to one of the allowed values allowedValues: array, boolean, integer, number, object, string

Hello, I was navigating through dndbeyond.com to record API requests and there are many structural errors when importing the resulting JSON into Swagger Editor similar to below:

Structural error at paths./font_picker.post.requestBody.content.application/json.schema.properties.organization_id.type
should be equal to one of the allowed values
allowedValues: array, boolean, integer, number, object, string

This particular request looks like:

curl 'https://echidna.wirewax.com/font_picker' \
  -H 'accept: */*' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'cache-control: no-cache' \
  -H 'content-type: application/json' \
  -H 'origin: https://player.vimeo.com' \
  -H 'pragma: no-cache' \
  -H 'referer: https://player.vimeo.com/' \
  -H 'sec-ch-ua: "Google Chrome";v="123", "Not:A-Brand";v="8", "Chromium";v="123"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36' \
  --data-raw '{"environment":"player","organization_id":null}'

The resulting OpenAPI request body looks like:

requestBody:
       content:
         application/json:
           schema:
             type: object
             properties:
               environment:
                 type: string
               organization_id:
                 type: 'null'
             required:
               - environment
               - organization_id

As you can see null is not the same as 'null'. When submitting a value of null it's probably not possible to determine what the type signature should be. But rather than a string of 'null' it should probably just be an empty string to or one of the other allowed values to adhere to the spec.

Click on a path parameter merge broken?

Hey hey. Thanks for this amazing extension! On first sight it works very well. Only when I click on a path parameter it merges too much of path into one. Example:

/api/v2/faq_entries/340/feedback
/api/v2/faq_entries/340/recommended_faqs
/api/v2/faq_entries/340/related_faqs

clicking on 340 results in:

/api/v2/faq_entries/:param3/feedback

Although I'd expect:

/api/v2/faq_entries/:param3/feedback
/api/v2/faq_entries/:param3/recommended_faqs
/api/v2/faq_entries/:param3/related_faqs

Any idea what's the issue here? Thanks a lot!

btw. why param3 and not starting at least at param1? :)

No preferences tab in firefox

Hi,
Really cool idea! Hope I can make it working :)

On Firefox 115.11.0esr, the tool shows "can't read and change data on this site".
Clicking the cog gear takes me to the addons dialog, but I there's no preferences tab to enable it for my site.

Feature Request: Session Continuation and OpenAPI Specification Import

Currently, closing the browser results in a loss of the generated OpenAPI specification data. To enhance usability and continuity, could we consider the following features?

  1. Implementing a session save feature that allows users to pause and resume their recording sessions at a later time.

  2. Providing an option to upload a JSON file of a previously downloaded OpenAPI specification, enabling users to continue recording from where they left off.

Feature ideas/requests

I left ideas in HN comments but leaving them here for posterity:

  1. Ability to filter response properties.
  2. Ability to work with non-JSON (web scraping) by defining a mapping of CSS selectors to response properties.
  3. Cross-reference host names of captured requests with publicly documented APIs.
  4. If auth headers are found, prompt the user for credentials that can then be stored locally.
  5. "Repeater" functionality similar to the feature found in Burp Suite.
  6. Generate clients on the fly based on the generated OpenAPI spec.
  7. Train a machine learning model to recognize and extract tabular and repeated data based on training data.
  8. Optionally publish generated OpenAPI specs to a central site or open PR to a GH repo, "awesome-openapi-devtools"?
  9. Look for embedded data similar to what https://github.com/BishopFox/jsluice extracts and offer it as endpoints.

For some of these features, it may make sense to incorporate a server-side component. For example, sending captured data to be trained (7) or cross-referencing with existing documented APIs based on the host names (3).

Running on the background

Excellent tool, congrats for hn # 1!

Would it be possible to opt-in always running the extension on the background, so that you don't need to worry about profiling a specific website, and just passively collect all API's you've accessed?

Might be relevant when you've lost access to a front (or if the front gets taken down) and you'd like to directly communicate with the API.

Bug: OpenAPI tab not showing in google chrome.

On Windows 11 running Chrome Version 119.0.6045.106 (Official Build) (64-bit)

This could be a misunderstanding on my part but my assumption is that post install, it would show either in this list.

image

or in this list

image

If there is something more to do in order to get it to show up it might be worth putting in the readme.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.