五分钟，不，三分钟，实现一个颜色拾取器chrome插件

前言

在之前不知道，但是可能超有用的 Web API^[1] 提到了 EyeDropper^[2] 拾色器，并提到 基于此做个取色插件，是不是分分钟就搞定呢？

答案就是：分分钟搞定。

此外，欢迎关注前端SSD系列^[3] 专栏。
一些有意思的前端内容，旨在3-10分钟里，有所获，又不为所累。

插件效果

直接先看效果。不仅仅可以取色浏览器本身，浏览器外也不在话下。

动手，三分钟足以。

选择项目模板

选择一个合适的模板，比如

chrome-extension-boilerplate-react^[4]
chrome-extension-typescript-starter^[5]
chrome-extension-boilerplate-react-vite^[6]

本文就以 chrome-extension-boilerplate-react-vite^[7] 为基础开发。

打开项目，主要需要改动的地方就是pages和配置 manifest.js, 既然说到这里了，就得简单了解一下这些pages下文件夹和 chrome插件功能的对应关系

名字	功能/作用范围
background	后台偷偷运行的代码
content	打开满足条件标签页页面的可运行的代码
devtools	打开开发者工具后的对应的tab
panel	打开开发者工具后的对应的tab下的内容
newtab	打开标签页
options	插件的配置
popup	点击插件后的弹框
sidepanel	侧边栏

每个块都还比较容易理解，今天的插件涉及的是 popup部分，简单介绍一下。

popup点击标注1 对应的插件图标后，标注2 就是 popup的区域。

sidepanel
这算是比较新的一个能力了，简单介绍一下。点击如下图的标注 1，在标注2处可以选择相应的功能。真个红色区域就是 side panel。

实现

更改 srcpagespopupPopup.tsx 代码如下：

import '@pages/popup/Popup.css';
import withErrorBoundary from '@src/shared/hoc/withErrorBoundary';
import withSuspense from '@src/shared/hoc/withSuspense';
import { useState } from 'react';

const Popup = () => {
  const [backgroundColor, setBackgroundColor] = useState('');

  const onToPickColor = () => {
    if (!('EyeDropper' in window)) {
      alert("你的浏览器不支持 EyeDropper API");
      return;
    }
    // @ts-ignore
    const eyeDropper = new EyeDropper();
    const abortController = new AbortController();

    eyeDropper
      .open({ signal: abortController.signal })
      .then((result) => {
        setBackgroundColor(result.sRGBHex);
      })
      .catch((err: Error) => {
        alert(`发生错误：${err && err.message || '未知错误'}`)
      });
  }

  return (
    <div className='App'>
      <button className="start-button" onClick={onToPickColor}>打开拾色器</button>
      <div>
        颜色是：<span id="result">{backgroundColor}</span>
      </div>
      <div className='color-rect' style={{
        backgroundColor
      }}></div>
    </div>
  );
};

export default withErrorBoundary(withSuspense(Popup, <div> Loading ... </div>), <div> Error Occur </div>);

本地部署

pnpm install
npm run build
chrome 浏览器输入 chrome://extensions/
加载已加压的扩展正序，选择项目里面的 dist 目录

小结

是不是很简单，一切都看起来没那么难，三分钟是不是都多了。

写在最后

不忘初衷，有所得，而不为所累，如果你觉得不错，你的一赞一评就是我前行的最大动力。

微信公众号：成长的程序世界，关注之后，海量电子书，打包拿走不送。

或者添加我的微信 dirge-cloud，一起学习。

引用

chrome-extensions-samples^[8]

参考资料

[1]

不知道，但是可能超有用的 Web API: https://juejin.cn/post/7345775192260755497#heading-7

[2]

https://developer.mozilla.org/zh-CN/docs/Web/API/EyeDropper: https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FEyeDropper

[3]

前端SSD系列: https://juejin.cn/column/6991252706941730852

[4]

chrome-extension-boilerplate-react: https://github.com/lxieyang/chrome-extension-boilerplate-react

[5]

chrome-extension-typescript-starter: https://github.com/chibat/chrome-extension-typescript-starter

[6]

chrome-extension-boilerplate-react-vite: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

[7]

chrome-extension-boilerplate-react-vite: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite

[8]

chrome-extensions-samples: https://github.com/GoogleChrome/chrome-extensions-samples