| 1 | /** |
| 2 | * @packageDocumentation |
| 3 | * |
| 4 | * A [DevTools](https://developer.chrome.com/docs/devtools) plugin that adds a "libp2p" tab to your developer tools that contacts a libp2p node running on the current page. |
| 5 | * |
| 6 | * Works with [@ipshipyard/libp2p-inspector-metrics](https://www.npmjs.com/package/@ipshipyard/libp2p-inspector-metrics) which supplies metrics and allows us to interact with the running node. |
| 7 | * |
| 8 | *  |
| 9 | * |
| 10 | * ## Installation instructions |
| 11 | * |
| 12 | * ### 1. Browser installation |
| 13 | * |
| 14 | * Until this plugin is published on the relevant browser plugin stores, please run this locally. |
| 15 | * |
| 16 | * 1. Clone this repo |
| 17 | * 2. Run `npm i && npm run build` |
| 18 | * 3. Install as an unpacked/temporary add on for your browser: |
| 19 | * - Chrome: [How to load an unpacked extension](https://knowledge.workspace.google.com/kb/load-unpacked-extensions-000005962) |
| 20 | * - Firefox: [How to install temporary add-ons](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension#installing) |
| 21 | * |
| 22 | * ### 2. App installation |
| 23 | * |
| 24 | * Configure `@ipshipyard/libp2p-inspector-metrics` as your metrics implementation: |
| 25 | * |
| 26 | * ```ts |
| 27 | * import { createLibp2p } from 'libp2p' |
| 28 | * import { inspectorMetrics } from '@ipshipyard/libp2p-inspector-metrics' |
| 29 | * |
| 30 | * const node = await createLibp2p({ |
| 31 | * metrics: inspectorMetrics(), |
| 32 | * //... other options her |
| 33 | * }) |
| 34 | * ``` |
| 35 | * |
| 36 | * ### 3. Permissions |
| 37 | * |
| 38 | * With the move to Manifest v3, users must now [opt in](https://blog.mozilla.org/addons/2022/11/17/unified-extensions-button-and-how-to-handle-permissions-in-manifest-v3/) to running content scripts on a page. |
| 39 | * |
| 40 | * #### Chrome |
| 41 | * |
| 42 | * Please click the extensions button, then grant the extension permission to run: |
| 43 | * |
| 44 | *  |
| 45 | * |
| 46 | * #### Firefox |
| 47 | * |
| 48 | * Please click the extensions button, then grant the extension permission to run: |
| 49 | * |
| 50 | *  |
| 51 | * |
| 52 | * ### 4. Go! |
| 53 | * |
| 54 | * Browse to your webapp and open the DevTools, you should see a "libp2p" tab towards the right hand side of the toolbar. Click it to see stats about the running node. |
| 55 | * |
| 56 | * ## What's next? |
| 57 | * |
| 58 | * 1. Tests |
| 59 | * - There aren't a lot of tests here yet |
| 60 | * 2. Better UI |
| 61 | * - It's quite rough |
| 62 | * 3. Graphs |
| 63 | * - We don't do much with the collected metrics yet. It would be nice to use Chart.js or similar to show some useful graphs |
| 64 | * - Bonus points for letting the user define their own graphs a la Grafana/Prometheus |
| 65 | * - More bonus points for being able to export/import graph configs |
| 66 | * 4. Dynamic panels |
| 67 | * - We should be able to inspect the libp2p node's configured services (or protocols?) and, for example, only show a DHT tab if the DHT is configured |
| 68 | * 5. Light theme support |
| 69 | * - There are partial overrides for light theme font/background/border colors but we need better detection of when it's enabled |
| 70 | * 6. ??? more features here |
| 71 | */ |
| 72 | export {} |