From 0bcfdbf39c7b900988e8809672074df26813bf44 Mon Sep 17 00:00:00 2001
From: JellyBrick <shlee1503@naver.com>
Date: Sat, 7 Oct 2023 19:12:13 +0900
Subject: [PATCH] chore: update README

---
 readme.md | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/readme.md b/readme.md
index a5d6f1ad..1df1e068 100644
--- a/readme.md
+++ b/readme.md
@@ -184,23 +184,49 @@ Using plugins, you can:
 
 Create a folder in `plugins/YOUR-PLUGIN-NAME`:
 
-- if you need to manipulate the BrowserWindow, create a file `back.ts` with the following template:
+- if you need to manipulate the BrowserWindow, create a file with the following template:
 
 ```typescript
-export default (win: Electron.BrowserWindow) => {
+// file: back.ts
+export default (win: Electron.BrowserWindow, config: ConfigType<'YOUR-PLUGIN-NAME'>) => {
   // something
 };
 ```
 
-- if you need to change the front, create a file `front.ts` with the following template:
+then, register the plugin in `index.ts`:
 
 ```typescript
-export default () => {
+import yourPlugin from './plugins/YOUR-PLUGIN-NAME/back';
+
+// ...
+
+const mainPlugins = {
+  // ...
+  'YOUR-PLUGIN-NAME': yourPlugin,
+};
+```
+
+- if you need to change the front, create a file with the following template:
+
+```typescript
+// file: front.ts
+export default (config: ConfigType<'YOUR-PLUGIN-NAME'>) => {
   // This function will be called as a preload script
   // So you can use front features like `document.querySelector`
 };
 ```
 
+then, register the plugin in `preload.ts`:
+
+```typescript
+import yourPlugin from './plugins/YOUR-PLUGIN-NAME/front';
+
+const rendererPlugins: PluginMapper<'renderer'> = {
+  // ...
+  'YOUR-PLUGIN-NAME': yourPlugin,
+};
+```
+
 ### Common use cases
 
 - injecting custom CSS: create a `style.css` file in the same folder then: