Picked colors

Clear All

JavaScript

const colorPickerBtn = document.querySelector(\\\"#color-picker\\\");const clearAll = document.querySelector(\\\".clear-all\\\");const colorList = document.querySelector(\\\".all-colors\\\");const pickedColors = JSON.parse(localStorage.getItem(\\\"picked-colors\\\") || \\\"[]\\\");const copyColor = (elem) => {    elem.innerText = \\\"Copied\\\";    navigator.clipboard.writeText(elem.dataset.color);    setTimeout(() => elem.innerText = elem.dataset.color, 1000);}const showColor = () => {    if (!pickedColors.length) return;    colorList.innerHTML = pickedColors.map(color => `        
  • ${color}
  • `).join(\\\"\\\"); document.querySelector(\\\".picked-colors\\\").classList.remove(\\\"hide\\\"); document.querySelectorAll(\\\".color\\\").forEach(li => { li.addEventListener(\\\"click\\\", e => copyColor(e.currentTarget.lastElementChild)); });}showColor();const activateEyeDropper = () => { document.body.style.display = \\\"none\\\"; setTimeout(async () => { try { const eyeDropper = new EyeDropper(); const { sRGBHex } = await eyeDropper.open(); navigator.clipboard.writeText(sRGBHex); if (!pickedColors.includes(sRGBHex)) { pickedColors.push(sRGBHex); localStorage.setItem(\\\"picked-colors\\\", JSON.stringify(pickedColors)); showColor(); } } catch (error) { alert(\\\"Failed to copy the color code!\\\"); } document.body.style.display = \\\"block\\\"; }, 10);}const clearAllColors = () => { pickedColors.length = 0; localStorage.setItem(\\\"picked-colors\\\", JSON.stringify(pickedColors)); document.querySelector(\\\".picked-colors\\\").classList.add(\\\"hide\\\");}clearAll.addEventListener(\\\"click\\\", clearAllColors);colorPickerBtn.addEventListener(\\\"click\\\", activateEyeDropper);

    CSS

    @import url(\\'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap\\');* {  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: \\\"Poppins\\\", sans-serif;}.popup {  width: 350px;  background: #fff;}.popup :where(.picker, header, .all-colors) {  display: flex;  align-items: center;}.popup .picker {  padding: 30px 0;  background: #E3F2FD;  justify-content: center;}.picker #color-picker {  border: none;  outline: none;  color: #fff;  font-size: 1rem;  cursor: pointer;  padding: 10px 20px;  border-radius: 5px;  background: #5372F0;  transition: 0.3s ease;}#color-picker:hover {  background: #2c52ed;}.picked-colors {  margin: 10px 15px;}.picked-colors header {  justify-content: space-between;}header .title {  font-size: 1rem;}header .clear-all {  cursor: pointer;  font-size: 0.9rem;  color: #5372F0;}header .clear-all:hover {  color: #143feb;}.picked-colors.hide {  display: none;}.picked-colors .all-colors {  flex-wrap: wrap;  list-style: none;  margin: 10px 0 15px;}.all-colors .color {  display: flex;  cursor: pointer;  margin-bottom: 10px;  width: calc(100% / 3);}.all-colors .rect {  height: 21px;  width: 21px;  display: block;  margin-right: 8px;  border-radius: 5px;}.all-colors .color span {  font-size: 0.96rem;  font-weight: 500;  text-transform: uppercase;  font-family: \\\"Open sans\\\";}

    ライブデモ

    上記のインストール手順に従って、拡張機能をローカルでテストできます。インストールすると、拡張機能のポップアップで色を選択し、色の履歴を管理できるようになります。

    結論

    この Color Picker 拡張機能は、EyeDropper API をブラウザ拡張機能に統合し、色の選択と管理のための便利なツールをユーザーに提供する方法を示します。あなたがデザイナーであっても、単に色を扱うのが好きな人であっても、この拡張機能はワークフローを強化します。

    クレジット

    著者

    Abhishek Gurjar は、実用的で機能的な Web アプリケーションの作成に情熱を注ぐ専任の Web 開発者です。 GitHub で彼のプロジェクトをさらにチェックしてください。

    ","image":"http://www.luping.net/uploads/20240916/172648405066e80e527c1e7.jpg","datePublished":"2024-11-01T06:40:36+08:00","dateModified":"2024-11-01T06:40:36+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
    「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
    表紙 > プログラミング > カラーピッカー拡張機能の構築

    カラーピッカー拡張機能の構築

    2024 年 11 月 1 日に公開
    ブラウズ:125

    Building a Color Picker Extension

    導入

    このブログ投稿では、シンプルかつ強力なカラー ピッカー ブラウザ拡張機能の作成方法を検討します。この拡張機能を使用すると、ユーザーは簡単な操作で画面から色を簡単に選択し、選択した色の履歴を表示し、カラー パレットを管理できます。

    プロジェクト概要

    カラーピッカー拡張機能は、次のユーザーフレンドリーなインターフェイスを提供します:

    • EyeDropper API を使用して画面から色を選択します。
    • 選択した色の履歴を表示します。
    • カラーコードをクリップボードにコピーします。
    • 選択した色をすべてクリアします。

    特徴

    • 色の選択: EyeDropper API を使用して、画面の任意の部分から色を選択します。
    • カラー履歴: 選択した色のリストを簡単にアクセスできるように管理します。
    • クリップボードのコピー: カラーコードをクリップボードにすばやくコピーします。
    • すべてクリア: ワンクリックで履歴からすべての色を削除します。

    使用されている技術

    • HTML: 拡張機能のポップアップのマークアップ。
    • CSS: ポップアップとその要素のスタイル。
    • JavaScript: カラーの選択、カラー履歴の表示、およびクリップボード操作の管理を処理します。
    • EyeDropper API: 画面から色を選択できるようにします。
    • localStorage: セッション間で選択した色を保存します。

    プロジェクトの構造

    1. HTML (index.html): カラー ピッカー インターフェイスの構造が含まれています。
    2. CSS (style.css): ポップアップとその要素のスタイルを設定します。
    3. JavaScript (script.js): 色の選択、表示、ローカル ストレージとの対話などの機能を管理します。
    4. マニフェスト (manifest.json): 拡張機能のメタデータと構成を定義します。

    インストール

    拡張機能をローカルでテストするには:

    1. ファイルをディレクトリに保存します。
    2. Chrome を開き、chrome://extensions/.
    3. に移動します。
    4. 「開発者モード」を有効にします (右上のトグル)。
    5. 「解凍してロード」をクリックし、プロジェクト ディレクトリを選択します。

    使用法

    1. 拡張機能ポップアップの [カラーを選択] ボタンをクリックして、カラー ピッカーをアクティブにします。
    2. 画面上の任意の場所から色を選択します。
    3. ポップアップで選択した色を表示し、任意の色をクリックしてコードをクリップボードにコピーします。
    4. 履歴からすべての色を削除するには、[すべてクリア] をクリックします。

    コードの説明

    HTML

    
    
        
        
    
    
        
    
    
    

    JavaScript

    const colorPickerBtn = document.querySelector("#color-picker");
    const clearAll = document.querySelector(".clear-all");
    const colorList = document.querySelector(".all-colors");
    const pickedColors = JSON.parse(localStorage.getItem("picked-colors") || "[]");
    
    const copyColor = (elem) => {
        elem.innerText = "Copied";
        navigator.clipboard.writeText(elem.dataset.color);
        setTimeout(() => elem.innerText = elem.dataset.color, 1000);
    }
    
    const showColor = () => {
        if (!pickedColors.length) return;
        colorList.innerHTML = pickedColors.map(color => `
            
  • ${color}
  • `).join(""); document.querySelector(".picked-colors").classList.remove("hide"); document.querySelectorAll(".color").forEach(li => { li.addEventListener("click", e => copyColor(e.currentTarget.lastElementChild)); }); } showColor(); const activateEyeDropper = () => { document.body.style.display = "none"; setTimeout(async () => { try { const eyeDropper = new EyeDropper(); const { sRGBHex } = await eyeDropper.open(); navigator.clipboard.writeText(sRGBHex); if (!pickedColors.includes(sRGBHex)) { pickedColors.push(sRGBHex); localStorage.setItem("picked-colors", JSON.stringify(pickedColors)); showColor(); } } catch (error) { alert("Failed to copy the color code!"); } document.body.style.display = "block"; }, 10); } const clearAllColors = () => { pickedColors.length = 0; localStorage.setItem("picked-colors", JSON.stringify(pickedColors)); document.querySelector(".picked-colors").classList.add("hide"); } clearAll.addEventListener("click", clearAllColors); colorPickerBtn.addEventListener("click", activateEyeDropper);

    CSS

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Poppins", sans-serif;
    }
    .popup {
      width: 350px;
      background: #fff;
    }
    .popup :where(.picker, header, .all-colors) {
      display: flex;
      align-items: center;
    }
    .popup .picker {
      padding: 30px 0;
      background: #E3F2FD;
      justify-content: center;
    }
    .picker #color-picker {
      border: none;
      outline: none;
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
      padding: 10px 20px;
      border-radius: 5px;
      background: #5372F0;
      transition: 0.3s ease;
    }
    #color-picker:hover {
      background: #2c52ed;
    }
    .picked-colors {
      margin: 10px 15px;
    }
    .picked-colors header {
      justify-content: space-between;
    }
    header .title {
      font-size: 1rem;
    }
    header .clear-all {
      cursor: pointer;
      font-size: 0.9rem;
      color: #5372F0;
    }
    header .clear-all:hover {
      color: #143feb;
    }
    .picked-colors.hide {
      display: none;
    }
    .picked-colors .all-colors {
      flex-wrap: wrap;
      list-style: none;
      margin: 10px 0 15px;
    }
    .all-colors .color {
      display: flex;
      cursor: pointer;
      margin-bottom: 10px;
      width: calc(100% / 3);
    }
    .all-colors .rect {
      height: 21px;
      width: 21px;
      display: block;
      margin-right: 8px;
      border-radius: 5px;
    }
    .all-colors .color span {
      font-size: 0.96rem;
      font-weight: 500;
      text-transform: uppercase;
      font-family: "Open sans";
    }
    

    ライブデモ

    上記のインストール手順に従って、拡張機能をローカルでテストできます。インストールすると、拡張機能のポップアップで色を選択し、色の履歴を管理できるようになります。

    結論

    この Color Picker 拡張機能は、EyeDropper API をブラウザ拡張機能に統合し、色の選択と管理のための便利なツールをユーザーに提供する方法を示します。あなたがデザイナーであっても、単に色を扱うのが好きな人であっても、この拡張機能はワークフローを強化します。

    クレジット

    • EyeDropper API: 画面から色を選択する機能を提供します。
    • ポピンズ フォント: ポップアップ内のテキストのスタイルを設定するために使用されます。

    著者

    Abhishek Gurjar は、実用的で機能的な Web アプリケーションの作成に情熱を注ぐ専任の Web 開発者です。 GitHub で彼のプロジェクトをさらにチェックしてください。

    リリースステートメント この記事は、https://dev.to/abhishekgurjar/building-a-color-picker-extension-20i9?vuildingが侵害がある場合は、deleteを削除するために[email protected]に連絡してください。
    最新のチュートリアル もっと>

    免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

    Copyright© 2022 湘ICP备2022001581号-3