自定义NotionAI浏览器扩展插件

type

status

date

slug

summary

前言

原开源项目：https://github.com/vaayne/NotionAI-Plus

目前项目还在初期发展阶段，很多功能不够完善。感觉是个前景不错的产品，值得跟踪研究。

国内类似项目：https://github.com/anc95/writely

虽然汉化了，很友好，但是项目架构不适合扩展，底部是基于openai扩展应用，尝试了扩展，但是对支持多个厂商的不够友好，需要重构代码。所以还是选notion ai。

轻松体验

构建项目环境

1.安装依赖

可选

npm install -g pnpm

pnpm install

2.本地开发测试

查看package.json,开发命令是dev

3.导入chrome进实时调测

打开浏览器扩展插件，导入包

至此，环境基本上没什么问题。

附4个命令解释：

这里的 "scripts" 包含了四个 npm 脚本命令，每个命令都对应于一个特定的操作。这些命令通常是用于开发、构建、打包以及进行代码格式化等任务。以下是这四个命令的解释：

“dev”: “plasmo dev”

意义：这个命令用于启动开发服务器，通常用于在开发环境中实时预览应用程序。plasmo dev 可能是一个自定义的开发服务器命令，它负责启动一个本地开发服务器，并监听文件变化，实时更新。

“build”: “plasmo build”

意义：这个命令用于构建项目，通常在生产环境中使用。plasmo build 可能是一个自定义的构建命令，它负责将项目编译、优化，并生成用于部署的生产代码。

“package”: “plasmo package”

意义：这个命令可能是用于打包应用程序或者创建可分发版本的命令。plasmo package 可能会执行一系列步骤，将构建后的代码打包成可发布的格式，例如生成压缩的归档文件或其他分发形式。

“static”: “npx prettier . –write”

意义：这个命令使用 Prettier 工具来格式化项目中的代码。npx prettier . --write 的作用是遍历项目中的所有文件并对其进行格式化，确保它们符合 Prettier 的代码风格规范。

这些脚本通常用于简化开发流程，使得执行常见任务变得更加方便。您可以通过在命令行中运行 npm run dev、npm run build、npm run package、npm run static 来触发这些脚本。

4.环境构建遇到的问题：

#安装卡住，网络问题，设置淘宝镜像,还是卡很久，

后来上科学，并查看是否设置成功

node版本不匹配,查看目前可以安装的版本，以及要求的版本

比如报错提示

安装低版本18.17.0,并确认版本

eslint报错少插件（配置文件如果没有，有的话npm install 时就会安装）

eslint no use报红，可以不处理，如果不想报红线，可以在对应的eslint config中配置

ts也有never read 的报红，也可以设置

自定义设置界面的UI

options settings的界面UI，可以修改options，我这里主要增加了一个功能和修改界面的渲染。

1.增加的功能getIconForEngine

2.界面渲染效果展示

修改前的：

修改后：

3.源码分析

Options是一个React组件，主要是一个设置页面的实现。我将代码分成几个函数和组件进行分析：

1. 引入的模块和库

这部分是引入所需的外部模块、组件以及图标等。

2. 函数 `getIconForEngine`

该函数接受引擎ID和尺寸参数，根据引擎ID返回相应的图标组件。在代码中，包含了四种引擎（NotionAI、ChatGPT、OpenAIAPI、GoogleAI）的图标。

3. 函数 `settingNameToIdComponent`

该函数生成包含引擎ID和相应图标的文本组件。这个文本组件用于选择引擎的RadioGroup。

4. 函数 `engineDescriptionComponent`

该函数生成引擎的描述信息文本组件，显示用户必须保持登录到相应引擎账户的信息。

5. 函数 `Options`

该函数是主要的React组件，包含了整个设置页面的逻辑。它使用了一些外部库（如jotai、antd）以及之前定义的函数和组件。整体结构包括不同引擎的设置、一些通用设置和联系方式等。

总结

该代码实现了一个Chrome浏览器扩展的设置页面，用户可以选择不同的AI引擎，并设置相应的参数。每个引擎有自己的设置项，包括API地址、密钥等。页面还包含了联系方式和一些图标的展示。整体使用React构建，通过jotai库管理状态。

汉化

界面是英文的，可能对国内的受众群体不友好。

以下就是menu的汉化，修改enums.ts

自定义prompt

可以直接在插件里面写，有需要再增加该导入功能。

前言