【SSD系列】五分钟，不，三分钟，实现一个颜色拾取器chrome插件

前言

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

答案就是： 分分钟搞定。

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

插件效果

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

动手， 三分钟足以。

选择项目模板

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

• chrome-extension-boilerplate-react
• chrome-extension-typescript-starter
• chrome-extension-boilerplate-react-vite

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

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

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

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

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

实现

更改 src\pages\popup\Popup.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>);

本地部署

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

小结

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

写在最后

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

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

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

引用

chrome-extensions-samples

原文链接：https://juejin.cn/post/7348289379055665191 作者：云端看世界