Ohbug extension to collect view data

Usage no npm install needed!

<script type="module">
  import ohbugExtensionView from 'https://cdn.skypack.dev/@ohbug/extension-view';



An open source application information monitoring platform.

OhbugExtension starter

Use this template to create your own Ohbug extension.

English | 简体中文

Quick start

  1. Git clone the repo.
    git clone git@github.com:ohbug-org/ohbug-extension-starter.git
  2. Installation dependencies.
    cd ohbug-extension-starter/
  3. Start developing.
    yarn dev
  4. Build.
    yarn build

What's inside?

A quick look at the directory structure of Ohbug Extension project.

├── node_modules
├── src
├── ui
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── package.json
├── README.md
├── rollup.config.js
├── rollup.config.ui.js
└── tsconfig.json
  1. /node_modules: This directory contains all of the modules of code.

  2. /src: This directory will contain the code for collecting data by Ohbug Extension. src is a convention for “source code”.

  3. /ui: This directory will contain a React component, the function of this component is to visualize the data collected in the src directory.

  4. .editorconfig: This is a file format and collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.

  5. .eslintrc.js: This is a configuration file for Eslint. Eslint is a tool to find and fix problems in your JavaScript code.

  6. .gitignore: This file tells git which files it should not track / not maintain a version history for.

  7. .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

  8. LICENSE: This ohbug-extension-starter is licensed under the MIT license.

  9. package.json: This file is how npm knows which packages to install for your project. Ohbug will query the extension's name, key, ui-extension's name, cdn and other data from this file.

  10. README.md: A text file containing useful reference information about your project.

package.json ohbug field explanation

  "ohbug": {
    // The name of the extension
    "name": "OhbugExtensionStarter",
    // Unique identifying name of the extension
    "key": "starter",
    "ui": {
      // The name of the UI component corresponding to the extension
      "name": "OhbugExtensionUIStarter",
      // The cdn link of the corresponding UI component of the extension, the Ohbug online console will obtain the resource file according to the link provided here
      // Recommend to use jsdelivr or unpkg
      "cdn": "your_cdn"