【谷歌插件/开源】分享开发“聚光灯”插件的流程与心得

这篇文章我将分享自己开发谷歌插件"聚光灯"的整个流程，并提供开源代码和一些心得体会。此外，我还会介绍我个人上手开发谷歌插件的方法，希望能对大家有所帮助。

前言

就想学一下谷歌插件的开发，顺便写一个好玩的东西，这样可以带着兴趣地学习。

这节👇可以看作是竞品分析，哈哈哈

确定目标后，我在谷歌商城转了一圈，进行了调研以寻找灵感。发现一个名为"关灯看视频"的插件非常有趣。它在用户观看视频时自动调暗页面背景，让用户仿佛置身电影院，从而提供更舒适的观看体验。

在B站上打开视频，按下开关后的效果如下：会把光聚在视频上。

然而，我也发现了它的一些局限性：

因此，我获得了灵感，为了解决上述用户需求，我设计了一个核心功能如下的插件：

让用户能手动选择任意元素，使该元素形成聚光区域，背景则自动调暗。

打开、选择、关闭聚光灯

调节popup的暗度、模糊度

为了看懂下面的设计方案，这里先定义或描述一些名词：

定义	描述	图片
聚光（灯）区域	聚光灯照射的区域（元素）
背景	聚光区域外的背景，也可以说是遮罩层
聚光灯	将光聚焦在某个元素上，使其成为视觉的中心，背景则自动调暗，营造出显著的视觉对比效果。
switch按钮	打开/关闭聚光灯的按钮
icon	浏览器工具栏的扩展插件图标

我找了下各种方案，最后选择了mask来镂空，大家可以看我的这篇文章了解一下我写的镂空效果。

作为第一次开发谷歌插件的我，想分享一下我的上手过程：

入门时，可以直接看看谷歌插件官网教程的前几节，你能够快速了解谷歌插件的核心概念。每一节都有对应的案例，操作简便。国际化、存储状态、注入脚本、通信方式等都可以在谷歌插件官网教程中找到详细说明。
- 我是只学了在我的插件用得上的知识点，未涉及的部分如录音、屏幕截图和控制网络请求则略过，因为觉得可能用不到，看了也会忘。
background、content、popup之间的通信是必不可少的知识点，这篇文章清晰地列举了三者的通信方式，推荐大家阅读。入门系列3 - background、content、popup的通信 - 掘金

三个组件，就是指background、content、popup。我理解也可以叫做模块，但还是按照官网的定义来称呼它们吧。

组件	作用
Popup	点击浏览器左上方icon后弹出的页面，它在插件中的功能是接受用户的输入和展示信息。

content	处理现有浏览器页面上的数据。在此插件中我就获取并修改了当前浏览器 tab 页面 dom，产生了聚光灯效果。
background	官网就说它就是一个Service Worker。而Service Worker是一种在浏览器后台运行的脚本，独立于网页，在后台处理任务，而且长期运行。

看起来只有三个主要功能，但交互细节可多了⬇️

这里的交互细节同时也是我开发完后的测试用例

注意单向数据流。虽然这里组件之间没有父子关系，但是各个组件之间的数据流动也要注意单向。
- 比如popup上的switch按钮的checked状态的修改操作，既可以来自content（content的页面刷新、点击背景），也可以是来自popup（点击switch按钮）。
  1. 如果在content监听，会造成"双向数据流"，造成死循环：关闭switch按钮 -> content监听switch按钮的checked变化 -> 重置content内容 -> 关闭switch按钮 -> ...
  2. 我的解决方式是用"监听状态改变的事件 "来代替" 直接监听状态改变"，将"content监听switch按钮的checked变化"换成"content监听switch按钮的点击事件"。

注意隔离组件之间的setState，虽然保存在storage的可以在到处访问并修改，但还是建议每个组件的状态组件内改，这样清晰的知道这些状态在哪里被修改了，才不会出现难以排查且意外的bug。
项目相对小而且简单，所以我觉得没必要用到打包工具和ui库了。我是觉得排除这些东西，可以方便掘友们学习阅读。防止把项目搞复杂了。如果真的有需要，我后续也可以再重构。

如何开发：打开谷歌浏览器扩展程序，直接把src的内容作为"已解压的扩展程序"加载。

如何安装：

方法一：打开谷歌浏览器扩展程序，直接把src的内容作为"已解压的扩展程序"加载。

方法二：在谷歌应用程序中直接搜"聚光灯"后安装，也可以直接点击打开这个链接。