arx-8 / swagger-viewer

Chrome Extension for Swagger-UI

⚠️Sorry! No longer supported.⚠️

Dear Community,

Due to time constraints, I'm archiving the swagger-viewer repository and ending support. Grateful for all contributions, please feel free to fork and continue the project. Thank you for your understanding.

---

swagger-viewer

Overview

This is Chrome Extension.
https://chrome.google.com/webstore/detail/swagger-viewer/nfmkaonpdmaglhjjlggfhlndofdldfag

Shows swagger yaml/json rendered by Swagger-UI.
This extension replace swagger code into preview html in GitHub.
Works completely offline.

Demo

Easy to convert

Easy to expand / collapse

Spec.

• Supported sites.
  • GitHub
• Supported OpenAPI ver.
  • 2.0
  • 3.0
• Supported file ext.
  • yaml
  • yml
  • json

Usage

1. Install from Chrome Web Store
2. Open swagger page in GitHub.
   • Try: https://github.com/OAI/OpenAPI-Specification/blob/main/examples/v3.0/petstore.yaml
3. Click this app icon.
4. Have a good development!

For developer

See

swagger-viewer's Issues

シークレットモードでアイコンが見づらい

透過png + 暗い文字色のため、アイコンの視認性が悪い

Unexpected DOM. Probably GitHub has been updated. Please contact the developer or wait until the extension is fixed. selector: "#repo-content-pjax-container div.Box > div.Box-body > table"

@arx-8
This is a report of an error that seems to be caused by a DOM change on GitHub.
GitHubのDOM変更が原因でエラー発生するようになったようなので報告です。

swagger-viewer version
2.0.2

buildしたzip内にtsファイルまで出力されている

$ npm run build chrome

...

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  scripts/contentscript.js (1.24 MiB)
  ..\..\packages\swagger-viewer.v0.0.3.chrome.zip (421 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  scripts/contentscript (1.24 MiB)
      scripts/contentscript.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Swagger-viewer not working with new GitHub Code View beta

I am testing out the new Code View on GitHub, which recently became public beta.
However, I noticed that swagger-viewer is not working with the new Code View.

Both the new Code View and swagger-viewer are useful, so I would like to be able to use them simultaneously.

yaml -> Objectの変換に失敗するyamlがある

https://github.com/OAI/OpenAPI-Specification/blob/master/examples/v3.0/api-with-examples.yaml

0.0.3では動作する。
下記issueの対応が原因で壊れたと思われる。
#1

Allow opening local files

Often, swagger files are not hosted on github. Would be nice to just enable the viewer for other locations like local disc.

Cause error

I am trying to display swagger by extension in yml on github, and now I get the following error message.

How can I configure it to fix the problem?

Error: Unexpected DOM. Probably GitHub has been updated. Please contact the developer or wait until the extension is fixed. selector1: "#repo-content-turbo-frame div.Box-body table", selector2: "#repo-content-pjax-container div.Box-body table"

An error has occurred Package is invalid. Details: 'Could not load background script 'webextension-toolbox/client.js'.'.

Licenseの確認

Authorなど書くべき内容がないかとか

不正なsyntaxのyaml/jsonを読み込んだ時の挙動を確認・定義してない

swagger-viewer/swagger-viewer/app/scripts/contentscript.ts

Lines 27 to 28 in af20bb8

	const srcCode = extractSrc()
	const swaggerJson: MaybeSwaggerJson = jsYaml.safeLoad(srcCode)

Make the DOM selector configurable

• It took a very long time for the Chrome WebStore to review my application.
  • ref. #46
• Allow users to take emergency measures themselves in case of GitHub's DOM changed.

Error in event handler: Error: Unexpected DOM. selector: "div.repository-content > div.Box > div.Box-body > table

@arx-8
いつもありがたく使わせて頂いています。
以下のエラーが発生しましたので、報告させていただきます。
（issueが日本語だったので、日本語で失礼します。）

本日、Github上で利用したところ以下のエラーが発生してViewの生成に失敗しました。
おそらく、GithubのDOMに変更があったのだと思いますが、対応よろしくお願いします。

Version

1.2.1

Error message

Error in event handler: Error: Unexpected DOM. selector: "div.repository-content > div.Box > div.Box-body > table"

How to build on local machine?

Thank you for creating an awesome tool!

I tried to use the swagger-viewer on my private repository. but I got an error.

I'd like to debug about this error on my local machine.
I already succeed to run $ npm install. but I don't know how to build?

just run tsc?

ESLint + Prettier

# ESLint
npm i -DE eslint @typescript-eslint/eslint-plugin eslint-plugin-jest
npx eslint --init

# Prettier
npm i -DE prettier eslint-config-prettier eslint-plugin-prettier

Some pages cannot be converted correctly.

https://github.com/OAI/OpenAPI-Specification/blob/main/examples/v3.0/uspto.yaml

ビルドしたzipをChrome webstoreにアップロードするとエラーになる

再現方法

• npm run build chrome
• 生成されたzipをデベロッパー ダッシュボードでアップロード
  • もしくはzip解凍、「パッケージ化されていない拡張機能」として読み込む
• エラーメッセージ「パッケージが無効です。詳細: コンテンツ スクリプトのファイル「scripts/contentscript.js」を読み込むことができませんでした。UTF-8 でエンコードされていません。」が出る

参考

• エラーメッセージをググる用に、英文メッセージ
  • https://chromium.googlesource.com/chromium/src/+/refs/heads/lkgr/extensions/strings/extensions_strings_en-GB.xtb#16
• 類似現象
  • pouchdb/pouchdb#5798
  • プロダクションビルドでChrome ext.が処理できない制御文字が混じってしまうせい？

暫定回避

• npm run dev chrome
• dist/chromeフォルダをzip圧縮
• ↑をデベロッパー ダッシュボードでアップロード

中途半端に expand/close してると、expand all/close all が正しくできない

e2e test

https://playwright.dev/docs/intro#installation

UTがない

jest

OAuth2

Was trying to use the rendered swagger in GitHub to call the API. It seems the authorization via Oauth2 passes a redirect URL of

https://github.com/oauth2-redirect.html

Can you provide some guidance on how to get the token back into this view so I can call APIs directly from the chrome extension view.

toggle by icon click

styled-componentsの設定向上

• https://www.styled-components.com/docs/tooling#babel-plugin
  • babel-plugin-styled-components
    • https://github.com/arx-8/react-exercises/blob/master/config-overrides.js
  • stylelint-processor-styled-components

未対応のSwaggerがある

https://github.com/OAI/OpenAPI-Specification/blob/master/examples/v3.0/api-with-examples.yaml

yaml -> json のライブラリで Error が throw されてる

全展開ボタンがほしい

初期表示が縮小表示で手間

console.log("手間")

GitHubのDOM変更の検知

• GitHubのDOMに強く依存した拡張機能である
• 機能が壊れたことに気づけない