Oct 27, 2023 06:00:00

I tried using ``OpenAPI DevTools'', an extension for Chrome that automatically generates OpenAPI specifications for any application or website.

Among the APIs used for communication on the web, ' OpenAPI DevTools ' is a tool that detects APIs written using

OpenAPI and automatically creates OpenAPI format specifications. It has been released as an extension for Chrome, and it is said to be easy to use, so I tried it out.

AndrewWalsh/openapi-devtools: Effortlessly discover API behavior with a Chrome extension that automatically generates OpenAPI specifications in real time for any app or website
https://github.com/AndrewWalsh/openapi-devtools

Access the GitHub repository and click 'Download and extract the zip'.

A zip format file called 'dist.zip' will be downloaded, so select it and click 'Extract all' in the Explorer menu.

The file has been extracted. A folder called 'dist' is created inside a folder called 'dist'. This time we will use the 'dist' folder in the back.

Start Google Chrome and click 'Manage extensions' under 'Extensions' in the top right menu.

Enable 'Developer Mode' in the top right corner and click 'Load unpackaged extensions'.

Select the 'dist' folder you prepared earlier and click 'Select Folder'.

If the following is displayed, the installation is successful.

To open OpenAPI DevTools, press 'Control + Shift + i' at the same time to open the developer tools and click 'OpenAPI' in the menu above.

This time, let's take a look at Wikipedia's API. Click 'Start Recording'.

If the screen shown below appears, you are ready to go.

When you hover your cursor over a link in Wikipedia, communication will occur in accordance with the OpenAPI specification. OpenAPI DevTools detects this and automatically generates the OpenAPI specification. Let's click 'Download'.

Automatically generated OpenAPI specification data can be downloaded in JSON format.

If you widen the width of the OpenAPI DevTools screen, a list of detected communications will be displayed on the left, and you can check the contents of each by clicking.

There are three buttons at the bottom of the OpenAPI DevTools screen. On the left is the 'Pause detection' button, the gear mark in the center is 'Settings', and on the far right is the 'Delete all data' button.

On the settings screen, it is possible to parameterize and summarize some of the detected APIs. For example, if you click on the 'Carthage' part in the image below, you can summarize all APIs in the format '/api/rest_v1/page/summary/~~'. However, it didn't seem to work well with URLs containing Japanese characters.

When I performed the same operation on the English version of Wikipedia, I was able to combine multiple APIs into one format as shown in the image below.