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

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

前言

背景

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

调研

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

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

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

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

1. 它仅适用于几个主流视频网站，如YouTube和优酷，但在B站上适配度不佳。可以看到弹幕消失，一些按钮也因为高亮而显得不协调（如上图所示）。
   

2. “关灯效果”只能用于视频播放。如果我在看小说或新闻时也想要这种聚光效果，这个插件就无法满足需求。

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

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

预期效果

打开、选择、关闭聚光灯

调节popup的暗度、模糊度

视频演示：www.bilibili.com/video/BV1V1…

名词解释

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

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

方案设计

技术点

如何对背景进行镂空？

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

简单用css mask在遮罩层上镂空一个矩形 - 掘金

谷歌插件的开发

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

1. 入门时，可以直接看看谷歌插件官网教程的前几节，你能够快速了解谷歌插件的核心概念。每一节都有对应的案例，操作简便。国际化、存储状态、注入脚本、通信方式等都可以在谷歌插件官网教程中找到详细说明。

   • 我是只学了在我的插件用得上的知识点，未涉及的部分如录音、屏幕截图和控制网络请求则略过，因为觉得可能用不到，看了也会忘。

2. background、content、popup之间的通信是必不可少的知识点，这篇文章清晰地列举了三者的通信方式，推荐大家阅读。入门系列3 - background、content、popup的通信 - 掘金

三个组件在插件里的应用

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

组件	作用
Popup	点击浏览器左上方icon后弹出的页面，它在插件中的功能是接受用户的输入和展示信息。
content	处理现有浏览器页面上的数据。在此插件中我就获取并修改了当前浏览器 tab 页面 dom，产生了聚光灯效果。
background	官网就说它就是一个Service Worker。而Service Worker是一种在浏览器后台运行的脚本，独立于网页，在后台处理任务，而且长期运行。

主要功能

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

2. 可以调节背景的模糊度、暗度

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

交互细节（测试用例）

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

1. 点击icon，能打开popup。

2. 调节popup的暗度、模糊度，背景视图的暗度、模糊度跟着变化。

   1. 切换tab、刷新tab，不会重置暗度、模糊度。除非把插件卸载了。

3. 打开聚光灯相关流程：

   1. 点击switch按钮，就出现黑色模糊的背景。
   2. 鼠标移出pupop，自动关闭pupop。
   3. 鼠标在页面上移动，能切换聚光灯区域。
   4. 点击鼠标左键，确认聚光灯区域 -- 鼠标在页面移动不再切换区域。
      1. 当点击到页面内按钮、链接之类，跳过此次交互。
   5. 保持聚光灯效果相关流程：
      1. 滚动页面，聚光灯区域位置跟随dom元素位置移动。
         1. 滚动聚光灯区域于窗口外，看不到聚光灯区域。
      2. 打开新的tab，pupop的switch按钮重置为关闭。
      3. 切回原来的tab，如果此tab存在“聚光灯”，pupop的switch按钮设置为打开。
   6. 点击背景后，当前页面“聚光灯”效果取消，switch按钮重置为关闭。

4. 点击switch按钮后（出现背景后），不点击页面确定聚光灯区域，而是直接来回切换tab，发现原tab会取消“背景”并重置switch按钮为关闭。

5. 页面刷新（content重新加载），重置聚光灯与switch按钮。

6. 不支持安装插件的页面（比如谷歌搜索页面），是否出现“此页面插件无法工作的提示”。

7. 检查国际化: popup的内容、此页面插件无法工作的提示。

开发心得

1. 注意单向数据流。虽然这里组件之间没有父子关系，但是各个组件之间的数据流动也要注意单向。

   • 比如popup上的switch按钮的checked状态的修改操作，既可以来自content（content的页面刷新、点击背景），也可以是来自popup（点击switch按钮）。

     1. 如果在content监听，会造成“双向数据流”，造成死循环：关闭switch按钮 -> content监听switch按钮的checked变化 -> 重置content内容 -> 关闭switch按钮 -> ...
     2. 我的解决方式是用“监听状态改变的事件 ”来代替“ 直接监听状态改变”，将“content监听switch按钮的checked变化”换成“content监听switch按钮的点击事件”。

2. 注意隔离组件之间的setState，虽然保存在storage的可以在到处访问并修改，但还是建议每个组件的状态组件内改，这样清晰的知道这些状态在哪里被修改了，才不会出现难以排查且意外的bug。

3. 项目相对小而且简单，所以我觉得没必要用到打包工具和ui库了。我是觉得排除这些东西，可以方便掘友们学习阅读。防止把项目搞复杂了。如果真的有需要，我后续也可以再重构。

最后：开源地址、安装教程

开源地址：github.com/coder-xuwen…

视频演示地址：www.bilibili.com/video/BV1V1…

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

如何安装：
方法一：打开谷歌浏览器扩展程序，直接把src的内容作为“已解压的扩展程序”加载。
方法二：在谷歌应用程序中直接搜“聚光灯”后安装，也可以直接点击打开这个链接。