驱动背景：最近C知一直有各种做题，而由于做题有准确率要求，经常做个题就是半小时，非常耗时且难顶。
目标：记录答题的选项和问题，在重新做题的时候，快速匹配，自动做题
🤌 涉及内容
- js、html、css相关知识
- firebase接入、webpack打包
- chrome插件开发
📝 Chrome插件开发流程
- 创建代码文件夹
- 创建manifest.json：声明文件
- 按规范开发popup.html和脚本执行内容
manifest声明
- 这个manifest和Android里的manifest文件作用类似，用来定义权限、入口、脚本、图标、插件名等信息。
- 官方说明：
- 这里提供我自己插件的manifest.json的内容供参考：
- 插件的入口是popup.html：这里可以写插件界面相关的布局
- 插件js脚本content.js：脚本文件
popup.html页面开发
这里可以进行页面布局，如
事件监听、传递
在popup.html中绑定的popup.js中，编写脚本内容
popup.js主要写页面相关的脚本，具体的业务逻辑，是写在其他content.js文件中，但是由于Chrome插件限制，不能直接调用其他文件中的方法。需要用消息发送、监听的方式，触发函数调用。这里举个例子：
- popup.js：
- content.js：
到这里，基本已经是基本的插件开发流程了，身下的就是常规的js代码开发。可以根据需要，编写执行对应的代码即可。
🙋♂️ 接入Firestore Database作为云端存储
由于有云端存储的需求，也没必要实现一个独立的后端来存储这些题目，所以经过简单调研后，直接接入Google Firebase Storage来存储题库即可。
接入Firestore Database步骤
- 注册Google账号
创建项目
输入项目名，跟随指引一步步创建项目即可
使用Firestore Database
项目信息获取
依赖及打包
- 安装webpack、firebase：
- 根目录创建webpack配置文件：
- 打包文件：
👹 注意事项
- manifest V3不再支持远程依赖，解决方法有：
- 方法一：把远程js代码，下载到本地进行依赖
- 方法二：编写代码时，依然远程依赖，借助打包工具打包出最终脚本文件即可
- 使用webpack打包代码，每次修改对应的js代码，都需要重新打包代码
- 修改代码后，需要reload插件，如果在特定页面中执行，还需要重新刷新页面
- 发布时，需要把node_modules删除，避免最终插件太大
- 插件的事件传递，有其特定的流程，大概类似于管道的概念，在一端发送，另一端接收
🤗 最后
- Chrome插件没有想象中的难开发，只要梳理清其开发流程，就与常规的前端、工具开发类似
- 开发过程中，网上的资料可能过时、不适用等，最好还是查阅Google官方文档
- 另外对于新领域的内容，GPT可以快速入门和梳理流程
📎 参考文章
- Author:CoderWdd
- URL:https://www.wuinsights.top//article/13aff6cf-5837-4e23-9dab-7beaf40b1a48
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!