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

云的世界！

于 2024-03-23 23:43:37 发布

阅读量898

点赞数 15

分类专栏： Web API chrome 文章标签： chrome 前端 javascript html5 css ecmascript

本文链接：https://blog.csdn.net/u012397879/article/details/136978021

版权

chrome 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Web API

4 篇文章 0 订阅

订阅专栏

前言

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

答案就是：分分钟搞定。

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

插件效果

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

在这里插入图片描述

动手，三分钟足以。

选择项目模板

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

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

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

截图_20243915113931.png

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

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

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

截图_20241615041651.png

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

截图_20244115114145.png

实现

更改 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>);