Aqui você aprenderá como monetizar sua extensão de navegador Plasmo integrando Mellowtel. Tempo estimado para conclusão: 5-15 minutos.

Instalação Manual

Se você já tem um projeto Plasmo, siga estes passos para adicionar a integração Mellowtel.

Instalar Dependências

Primeiro, adicione o pacote Mellowtel ao seu projeto:

pnpm add mellowtel

Configurar package.json

Atualize seu package.json para incluir as permissões necessárias:

{
  "manifest": {
    "permissions": [
      "storage",
      "declarativeNetRequest"
    ],
    "host_permissions": ["<all_urls>"]
  }
}

Definir Variáveis de Ambiente

Crie ou atualize seu arquivo .env:

PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here

Certifique-se de substituir your_mellowtel_api_key_here pela sua chave de API Mellowtel real do painel de controle.

Implementação

Configuração do Script de Fundo

Crie ou modifique seu script de fundo (background.ts):

import Mellowtel from "mellowtel"

let mellowtel;

(async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  await mellowtel.initBackground()
})()

// Lidar com instalação e atualizações
chrome.runtime.onInstalled.addListener(async function (details) {
  console.log("Extensão Instalada ou Atualizada", details)
  await mellowtel.generateAndOpenOptInLink()
})

Configuração do Script de Conteúdo

Crie ou modifique seu script de conteúdo (content.ts):

import Mellowtel from "mellowtel"
import type { PlasmoCSConfig } from "plasmo"

let mellowtel;

// Configurar comportamento do script de conteúdo
export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  all_frames: true,
  run_at: "document_start"
}

const start = async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  const resp = await mellowtel.initContentScript()
}

start()

Crie ou modifique seu componente de popup (popup.tsx):

import Mellowtel from "mellowtel"

const Popup: React.FC = () => {
  const handleMellowtelSettings = async () => {
    const mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
    const link = await mellowtel.generateSettingsLink()
    chrome.tabs.create({ url: link })
  }

  return (
    <div>
      <button onClick={handleMellowtelSettings}>
        Alterar Configurações do Mellowtel
      </button>
    </div>
  )
}

export default Popup

Comandos de Desenvolvimento

Use estes comandos durante o desenvolvimento:

# Iniciar servidor de desenvolvimento
pnpm dev

# Construir para produção
pnpm build

# Empacotar a extensão
pnpm package

Melhores Práticas de Desenvolvimento

Sempre teste sua extensão minuciosamente em ambientes de desenvolvimento e produção
Monitore o console para quaisquer avisos ou erros relacionados ao Mellowtel
Teste o fluxo de opt-in do ponto de vista do usuário
Verifique se o link de configurações funciona corretamente
Certifique-se de que todas as permissões estão configuradas corretamente

Teste

Antes de enviar sua extensão:

Teste o fluxo de instalação
Verifique se o processo de opt-in funciona
Confira se a página de configurações é acessível
Confirme se todas as permissões estão funcionando corretamente
Teste em diferentes navegadores se estiver direcionando para múltiplas plataformas

Para informações adicionais sobre os recursos e API do Mellowtel, visite o Quickstart.

Precisa de ajuda? Junte-se à nossa comunidade no Discord para suporte.

​Instalação Manual

​Instalar Dependências

​Configurar package.json

​Definir Variáveis de Ambiente

​Implementação

​Configuração do Script de Fundo

​Configuração do Script de Conteúdo

​Implementação do Popup

​Comandos de Desenvolvimento

​Teste

Instalação Manual

Instalar Dependências

Configurar package.json

Definir Variáveis de Ambiente

Implementação

Configuração do Script de Fundo

Configuração do Script de Conteúdo

Implementação do Popup

Comandos de Desenvolvimento

Teste