feat: profile picture plugin #256

src/plugins/core/manager.ts

@@ -7,6 +7,7 @@ import type {
   StringSetting,
   ButtonSetting,
   HotkeySetting,
+  ComponentSetting,
 } from "./types";
 import { createPluginAPI } from "./createAPI";
 import browser from "webextension-polyfill";
@@ -195,7 +196,8 @@ export class PluginManager {
             options: Array<{ value: string; label: string }>;
           })
         | (Omit<ButtonSetting, "type"> & { type: "button"; id: string; trigger?: () => void | Promise<void> })
-        | (Omit<HotkeySetting, "type"> & { type: "hotkey"; id: string });
+        | (Omit<HotkeySetting, "type"> & { type: "hotkey"; id: string })
+        | (Omit<ComponentSetting, "type"> & { type: "component"; id: string; component: any });
     };
   }> {
     return Array.from(this.plugins.entries()).map(([id, plugin]) => {
@@ -203,8 +205,8 @@ export class PluginManager {
         ([key, setting]) => {
           const settingObj = setting as any;
           let result: any;
-          if (settingObj.type === "button") {
-            // For button, keep the trigger function
+          if (settingObj.type === "button" || settingObj.type === "component") {
+            // For button or component, keep the functions
             result = { ...settingObj };
           } else {
             // For others, strip functions

src/plugins/core/settingsHelpers.ts

@@ -5,6 +5,7 @@ import type {
   SelectSetting,
   StringSetting,
   HotkeySetting,
+  ComponentSetting,
 } from "./types";
 
 export function numberSetting(
@@ -52,6 +53,15 @@ export function buttonSetting(
   };
 }
 
+export function componentSetting(
+  options: Omit<ComponentSetting, "type">,
+): ComponentSetting {
+  return {
+    type: "component",
+    ...options,
+  };
+}
+
 export function hotkeySetting(
   options: Omit<HotkeySetting, "type">,
 ): HotkeySetting {

src/plugins/core/types.ts

@@ -48,13 +48,21 @@ export interface HotkeySetting {
   description?: string;
 }
 
+export interface ComponentSetting {
+  type: "component";
+  title: string;
+  description?: string;
+  component: any;
+}
+
 export type PluginSetting =
   | BooleanSetting
   | StringSetting
   | NumberSetting
   | SelectSetting<string>
   | ButtonSetting
-  | HotkeySetting;
+  | HotkeySetting
+  | ComponentSetting;
 
 export type PluginSettings = {
   [key: string]: PluginSetting;
@@ -71,7 +79,9 @@ export type SettingValue<T extends PluginSetting> = T extends BooleanSetting
         ? O
         : T extends HotkeySetting
           ? string
-          : never;
+          : T extends ComponentSetting
+            ? never
+            : never;
 
 export type SettingsAPI<T extends PluginSettings> = {
   [K in keyof T]: SettingValue<T[K]>;