docs: mert changes for adding extension

packages/noco-docs/docs/160.developer-resources/030.extensions/010.developing-extensions.md

@@ -0,0 +1,102 @@
+---
+title: 'Developing Extensions'
+description: 'Learn how to build extensions for NocoDB.'
+tags: ['Extension', 'Developer']
+keywords: ['NocoDB extension', 'create extension', 'build extension']
+---
+
+## NocoDB Extensions
+
+NocoDB extensions allow users to customize and expand the platform to meet specific needs, enabling seamless integration with third-party services and the addition of custom functionalities. Extensions can be built using JavaScript & Vue.js, providing a flexible way to add new features to your NocoDB instance.
+
+## Getting Started
+
+To start building extensions for NocoDB, you need to set up a local development environment. Follow the [Development Setup](/engineering/development-setup) guide to get everything configured. Once your environment is ready, you can begin creating your first extension.
+
+## Creating a New Extension
+
+Extensions are frontend components loaded into NocoDB. You can create a new extension by following these steps:
+
+### 1. Create the Extension Directory
+
+Create a new folder inside the `packages/nc-gui/extensions` directory. This folder will host all the files related to your extension.
+
+### 2. Define the Manifest File
+
+In your new folder, create a `manifest.json` file that describes the extension and stores all the metadata about it. Here's a sample `manifest.json` file:
+
+```json
+{
+"id": "nc-json-exporter",
+"title": "JSON Exporter",
+"description": "This is a sample NocoDB extension that exports data in JSON format. \nIt is used to demonstrate how to create a NocoDB extension.\n\nThis extension is disabled by default. To access it you need to first change the disabled property in the manifest file to false.",
+"entry": "json-exporter",
+"version": "0.1",
+"iconUrl": "json-exporter/icon.png",
+"publisherName": "NocoDB",
+"publisherEmail": "contact@nocodb.com",
+"publisherUrl": "https://www.nocodb.com"
+}
+```
+
+#### Manifest File Properties
+
+`id`: A unique identifier for the extension.
+`title`: The title of the extension as it will appear in NocoDB.
+`description`: A brief description of the extension’s functionality.
+`entry`: The entry point for the extension, typically the name of the folder you created.
+`version`: The version number of the extension.
+`iconUrl`: The path to the icon image for the extension.
+`publisherName`: The name of the extension's publisher.
+`publisherEmail`: The email address of the publisher.
+`publisherUrl`: The website of the publisher.
+
+### 3. Create the Component File
+
+Inside your extension folder, create an `index.vue` file. This file contains the Vue component that defines the UI and functionality of your extension.
+
+The `index.vue` file should include the standard sections for a Vue component: <template>, <script>, and <style>. Here’s a basic example to get you started:
+
+```vue
+<script setup lang="ts">
+const { extension } = useExtensionHelperOrThrow()
+</script>
+
+<template>
+  <div>
+    <h1>{{ extension.title }}</h1>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
+```
+
+### 4. Use the Helper State
+
+NocoDB provides a helper state that you can use to interact with the NocoDB API, manage the extension state, and access various helper functions. To use the helper state in your extension, you can import it as shown in the example above.
+
+#### Available Properties in the Helper State
+
+`fullscreen`: Boolean value indicating if the extension is in fullscreen mode.
+`collapsed`: Boolean value indicating if the extension is collapsed.
+`extension`: The extension object containing metadata.
+`tables`: An array of table objects in the active base.
+`getViewsForTable(tableId)`: Returns an array of views for a given table.
+`getData(params)`: Fetches all data for a table or a view.
+`getTableMeta(tableId)`: Returns the metadata for a table.
+`$api`: An instance of the NocoDB API client for interacting with the API.
+`insertData(params)`: Inserts data into a table.
+`updateData(params)`: Updates data in a table.
+`upsertData(params)`: Upserts data into a table.
+`reloadData()`: Triggers a reload of the active view data.
+`reloadMeta()`: Triggers a reload of the active view metadata.
+You can find a sample extension in the `packages/nc-gui/extensions/json-exporter` directory to use as a reference when building your own extensions.
+
+## Testing the Extension
+
+After building your extension, test it by running NocoDB. It will automatically load the extension, and you’ll see it in the Extensions panel. Add the extension to your base and interact with it to ensure all functionality works as expected.
+
+## Publishing the Extension
+
+Once your extension is built and tested, you can publish it to the NocoDB extension store. To do this, create a pull request in the NocoDB repository with your extension code. Ensure your code follows NocoDB’s contribution guidelines, includes proper documentation, and is ready for other users to install.
+

packages/noco-docs/docs/160.developer-resources/030.extensions/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Extensions",
+  "collapsible": true,
+  "collapsed": true,
+  "link": {
+    "type": "generated-index"
+  }
+}