Introdução

Nesta postagem do blog, exploraremos como criar uma extensão de navegador simples, mas poderosa, para seletor de cores. Esta extensão permite que os usuários escolham facilmente cores em sua tela, visualizem um histórico de cores escolhidas e gerenciem sua paleta de cores com interações simples.

Visão geral do projeto

A extensão Color Picker fornece uma interface amigável para:

• Escolha as cores da tela usando a API EyeDropper.
• Veja um histórico de cores escolhidas.
• Copiar códigos de cores para a área de transferência.
• Limpa todas as cores escolhidas.

Características

• Seleção de cores: use a API EyeDropper para selecionar cores em qualquer parte da tela.
• Histórico de cores: mantenha uma lista de cores escolhidas com fácil acesso.
• Copiar área de transferência: copie rapidamente códigos de cores para a área de transferência.
• Limpar tudo: Remova todas as cores do histórico com um único clique.

Tecnologias Utilizadas

• HTML: Marcação para o pop-up da extensão.
• CSS: Estilo do pop-up e seus elementos.
• JavaScript: trata da seleção de cores, da exibição do histórico de cores e do gerenciamento de operações da área de transferência.
• API EyeDropper: Permite escolher cores na tela.
• localStorage: armazena cores escolhidas em todas as sessões.

Estrutura do Projeto

1. HTML (index.html): Contém a estrutura da interface do seletor de cores.
2. CSS (style.css): estiliza o pop-up e seus elementos.
3. JavaScript (script.js): gerencia funcionalidades como escolher cores, exibi-las e interagir com o armazenamento local.
4. Manifesto (manifest.json): Define os metadados e a configuração da extensão.

Instalação

Para testar a extensão localmente:

1. Salve os arquivos em um diretório.
2. Abra o Chrome e navegue até chrome://extensions/.
3. Ative o "modo de desenvolvedor" (alterne no canto superior direito).
4. Clique em "Carregar descompactado" e selecione o diretório do seu projeto.

Uso

1. Clique no botão “Escolher cor” no pop-up da extensão para ativar o seletor de cores.
2. Selecione uma cor em qualquer lugar da tela.
3. Veja as cores escolhidas no pop-up e clique em qualquer cor para copiar seu código para a área de transferência.
4. Clique em "Limpar tudo" para remover todas as cores do histórico.

Explicação do código

HTML

    
    


    

        

            Pick Color
        
        

            

                
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";
}

Demonstração ao vivo

Você pode testar a extensão localmente seguindo as instruções de instalação acima. Depois de instalada, o pop-up da extensão permitirá que você escolha cores e gerencie seu histórico de cores.

Conclusão

Esta extensão Color Picker demonstra como integrar a API EyeDropper em uma extensão de navegador, fornecendo aos usuários uma ferramenta útil para seleção e gerenciamento de cores. Quer você seja um designer ou apenas alguém que gosta de trabalhar com cores, esta extensão pode aprimorar seu fluxo de trabalho.

Créditos

• API EyeDropper: Fornece a funcionalidade para escolher cores na tela.
• Fonte Poppins: Usada para estilizar o texto no pop-up.

Autor

Abhishek Gurjar é um desenvolvedor web dedicado e apaixonado por criar aplicativos web práticos e funcionais. Confira mais de seus projetos no GitHub.