Conecte os usuários de uma extensão do Chrome

Queremos criar uma extensão que funcione em um sistema pop-up. Para criar o último, só precisamos criar uma página clássica HTML. Conforme configurado no arquivo manifesto.Json vamos usar um arquivo pop -up.html

Tutorial do Google Chrome: Crie uma extensão

Convido você a descobrir como criar uma extensão para o navegador do Google Chrome. Criar uma extensão pode parecer complexa, mas não fique assustado ! De fato, as extensões do Google Chrome podem ser criadas com idiomas que conhecemos bem: JS, HTML e CSS.

O pequeno pré -requisito

Primeiro você precisa ativar o Modo de desenvolvedor em configurações do Chrome para poder carregar sua extensão. Para fazer isso, você vai para suas configurações> Mais ferramentas> Extensões e verifique a caixa Modo de desenvolvedor. Você deve ver então três novos botões parecem carregar extensões.

Configure sua extensão

O ponto de partida para criar uma extensão é a criação de um arquivo de manifesto.Json na raiz do seu arquivo. Ele conterá todas as informações sobre a configuração da extensão, como o nome, a descrição, os scripts a serem carregados.

< "manifest_version": 2, // Indique la version du manifest (toujours 2) "name": "Tutoriel créer une extension", // Le nom de votre extension "description": "Chaine YT Plati'Script", // La description "version": "1.0", // La version en en l'occurrence la première donc 1.0 "permissions": [ // Les permissions, on y reviendra plus bas "http://*/*", "https://*/*", ], "browser_action": < // Les paramètres "default_icon" : "img/icon.png", // L'icône qui s'affiche en haut à droite de votre navigateur "default_popup": "popup.html" // Le popup qui s'affichera quand vous cliquez sur l'îcone >, "Ícones": < // L'îcone qui s'affichera lorse que vous êtes sur la page extensions des paramètre "128" : "img/icon_128.png" // 128 = 128x128 la taille de votre image >>

Todos os parâmetros disponíveis para este arquivo são descritos na documentação.

Permissões

Por padrão, sua extensão estará em uma espécie de caixa de areia e não terá acesso a nada. Em alguns casos, queremos criar extensões capazes de se comunicar com páginas da web ou com certas APIs do navegador. Será necessário especificar em nossa configuração quais permissões que desejamos obter (essas permissões serão solicitadas durante a instalação da extensão). Essas permissões podem assumir dois formulários:

• Uma sequência de caracteres representando um tipo específico de permissão, por exemplo, acesso às guias das guias (lista de permissões)
• Um motivo que representa um formato de URL ao qual acessaremos (padrões de correspondência)

"Permissões": [// Permissões, voltaremos abaixo "http: //*/*", "https: //*/*", "Tabs" // Tabs é permissão para criar novas guias],

Para o “http: ///“E o” https: ///“, Dizemos a ele que a extensão pode funcionar em todas as páginas HTTP ou HTTPS.

Crie um pop-up

Queremos criar uma extensão que funcione em um sistema pop-up. Para criar o último, só precisamos criar uma página clássica HTML. Conforme configurado no arquivo manifesto.Json vamos usar um arquivo pop -up.html

 H1, p 
Bom dia
 
Olá, eu sou um pop -up simples
quem não ocupa muito espaço

É tudo o que precisamos fazer no momento, quando clicar no botão Chrome abrirá automaticamente o pop-up alterando a página que acabamos de escrever.

Teste sua extensão

Agora queremos testar nossa extensão, pois teremos que passar pelo painel de extensão e clicar no botão Tet Charge e selecione a pasta que contém sua extensão. Automaticamente, você deve ver o ícone da sua extensão aparecer.

Roteiro

Necessariamente uma extensão que exibe um pop-up, é relativamente limitado ! Felizmente, podemos usar JavaScript para adicionar comportamentos diferentes à nossa extensão. Existem várias maneiras de carregar JavaScript, dependendo do que você deseja realizar.

JavaScript em pop-up

É antes de tudo possível carregar JavaScript diretamente no pop-up. De fato, esta é uma página da web clássica na qual podemos carregar qualquer arquivo JavaScript com a tag .

 // Nós carregamos nosso script no conteúdo HTML H1, P 
Bom dia
 
Olá, eu sou um pop -up simples
quem não ocupa muito espaço

Dito isto, o arquivo JavaScript será carregado apenas na abertura do pop-up, de repente se o usuário nunca suportar o botão, seu javascript nunca será executado

JavaScript em “Antecedentes”

Também é possível executar o JavaScript em segundo plano para manter seu código ativo mesmo quando o pop-up não é implantado. Para fazer isso, eles terão que mudar o arquivo manifesto.JSON para incluir o caminho para o arquivo JavaScript que queremos carregar.

Os scripts de conteúdo

O Scripts felizes são arquivos JavaScript que serão executados no contexto da página da web e que podem interagir com ele usando o DOM. Ao contrário dos scripts lançados de fundo, esses scripts não têm acesso às APIs do Chrome.*. Além disso, eles operam relativamente isolados e não têm acesso a funções JavaScript que seriam definidas na página da web na qual são injetadas.

Esse tipo de carga será usado quando você deseja interagir diretamente com a página da web para alterar o tamanho da fonte ou manipular determinados itens.

Notificações do Chrome

Finalmente, pequeno bônus referente às notificações. No Google Chrome, é possível gerenciar um sistema de notificação que será exibido na área de trabalho do usuário. Se você quiser usar esta API, precisará pedir permissão com antecedência no arquivo de manifesto.JSON .

"Permissões": [// Permissões, voltaremos abaixo "http: //*/*", "https: //*/*", "Tabs", // Tabs é permissão para criar novas guias "Notificações" // ativa notificações],

Uma vez feito isso, podemos usar a classe permitindo gerenciar as notificações.

Var notificação = nova notificação ('título do notivo !', < icon: 'votreicon.jpg', body: "Votre petite description de la notification", >);

Esta aula não é exclusiva do Google Chrome, mas é uma nova API ou bloqueia em vários navegadores. Se você deseja ter mais informações sobre como funciona, eu convido você a assistir à documentação. A vantagem no caso de uma extensão é que o usuário já aceitou permissões que permitem que as notificações sejam iniciadas diretamente.

Conecte os usuários de uma extensão do Chrome

Este documento explica como usar a plataforma de identidade para conectar os usuários de uma extensão do Chrome.

Importante : A plataforma de identidade é compatível apenas com extensões que usam manifesto v2. Manifesto v3 não é compatível porque não fornece operações pop-up. Importante: O uso de um telefone ou uma autenticação multifator de uma extensão do Chrome não está disponível.

Antes que você comece

• Ative a plataforma de identidade e configure um provedor de identidade. Para descobrir como, consulte o início rápido -up.
• Adicione os seguintes URLs à lista de autorizações de content_security_policy da sua extensão:
  • https: // APIS.Google.com
  • https: // www.gstatic.com
  • https: // www.googleapis.com
  • https: // securetekeny.googleapis.com

  Para mais informações, consulte a documentação do CSP.

  Salve o ID da sua extensão

  Para conectar os usuários de uma extensão Chrome, você deve salvar o ID da extensão como um domínio autorizado:

  1. Acesse a página Configurações Plataforma de identidade no Google Cloud Console. Acesse a página de configurações
  2. Clique na guia Segurança.
  3. Na seção Domínios autorizados (Áreas autorizadas), clique em Adicionar domínio (Adicione um domínio).
  4. Digite o URI da sua extensão. Esta extensão normalmente se assemelha a isto: Chrome-Expension: // Chrome_extension_id .
  5. Clique em Adicionar.

  Prossiga para a conexão dos usuários

  A conexão do usuário de uma extensão do Chrome é semelhante a um aplicativo da Web, a algumas diferenças:

  • A autenticação por telefone e multifator não é suportada.
  • As extensões do Chrome não podem usar redirecionamentos HTTP. Portanto, você deve usar operações pop-up (SignInwithPopup () e LinkWithPopup ()) para conectar os usuários.
  • A chamada para métodos de autenticação de uma ação do navegador cancela a ação do navegador. Então você prefere chamá -los de um script em segundo plano.
  • Os métodos pop-up só podem ser usados ​​em extensões que usam manifesto v2.

  O exemplo a seguir ilustra a conexão de um usuário com o Google:

  JavaScript

  Aparecer.JS

  // Obtenha referência à página de segundo plano. Const bgage = Chrome.extensão.GetBackgroundPage (); // Faça login com pop -up, normalmente conectado ao botão Clique. BGPAGE.SigninWithpopup (); 

  fundo.JS

  Const app = Firebase.InitializeApp (config); Const auth = app.autor (); Const SigninWithPopup = () => < const provider = new firebase.auth.GoogleAuthProvider(); return auth.signInWithPopup(provider).catch((error) =>< console.log(error); >); >; 

  Seguintes passos

  • Conecte usuários com diferentes provedores de identidade.
  • Saiba mais sobre usuários da plataforma de identidade.

  Comente

  Salvo indicação em contrário, o conteúdo desta página é governado por uma licença Creative Commons Cesatibilidade 4.0, e amostras de código são regidas por uma licença Apache 2.0. Para mais informações, consulte as regras do site do Google Developers. Java é uma marca registrada da Oracle e/ou de suas empresas afiliadas.

  Última atualização em 2023/06/17 (UTC).

  RingCentral para extensão do Google Chrome

  Mantenha -se atualizado com os recursos mais recentes, melhorias e correções de insetos do RingCentral para o Google Chrome Extension.

  Versão 21.3.30 (RC)

  Data de lançamento : 29/09/2021

  • Possibilidade de ocultar o perfil do usuário no diretório da empresa

  Correções de pântanos

  • Exibição do logotipo RC em uma janela flutuante
  • Ícone não perturbe

  Data de lançamento : 28/07/2021

  • Possibilidade de adicionar os detalhes do vídeo RingCentral do conector da sala em seus convites a uma reunião

  Data de lançamento : 22/01/2021

  • Vídeo RingCentral:
    • Ativação da sala de espera
    • Números de acesso global
    • Composição automática da senha dos convites por e-mail
    • Aplicação automática de uma senha para reuniões não -PMI
    • Conformidade com os valores dos parâmetros de travamento do serviço da web
    • Vídeo RingCentral
      • Atualização do rótulo “Junte -se antes do host”, substituindo -o por “os participantes só podem se juntar à reunião depois de mim”
      • Melhoria da senha ux

      Data de lançamento : 23/09/2020

      • A página de detalhes de contato agora inclui um campo para o site
      • O número de extensão agora é exibido com códigos de site ativados
      • Possibilidade de procurar contato com o número de extensão curta
      • Composição de um número de extensão curto
      • Fusão de 3 opções de chamada de toque em uma única opção de toque

      Data de lançamento : 31/07/2020

      • Possibilidade de autorizar apenas usuários autenticados a ingressar nas reuniões
      • Opção de compartilhamento de tela reservada apenas para host e moderadores
      • Categoria de opções de segurança adicionais
      • Recepção de notificações para alterações de extensão no fornecedor de vídeo
      • Uso do aplicativo RingCentral como terminação de chamada

      Correções de pântanos

      • Incapaz de fazer chamadas de emergência

      Data de lançamento : 18/05/2020

      • Definição de Ringout do ID do chamador da Web como o ID de ID padrão

      Correções de pântanos

      • Exibição de números transferidos para a lista de chamadas de chamadas

      Data de lançamento : 22/04/2020

      • Adicionando uma senha de reunião para reuniões planejadas
      • Desativação da funcionalidade “Junte -se antes do host”

      Data de lançamento : 04/09/2020

      Correções de pântanos

      • Corrigido opções de reunião dupla no menu Drop -Robown da conferência na Agenda do Google.

      Data de lançamento : 02/04/2020

      Correções de pântanos

      • Resolução do problema de expiração das reuniões após 24 horas.
      • Correção do número do número para compor reuniões do RingCentral

      Data de lançamento : 28/10/2019

      • Opção para ocultar a divulgação de conformidade por uso limitado para aderir à política do Google
      • Excluindo a guia Gmail em atividades recentes (para verificar com êxito o Google, não ligue para a API do Gmail)
      • Adicionando a divulgação de conformidade para uso limitado para aderir à política do Google
      • Gerenciamento de lista preta C2D/SMS
      • Movimento do Adicionar uma opção de reunião na lista de queda de conferência “Adicionar conferência”
      • A extensão da agenda do Google é uma prioridade se o RingCentral para o Google também for instalado.
      • A injeção de C2D interfere com os editores de HTML/Text, em particular com Radederor
      • Exibição incorreta do ícone de clique para ligar na agenda do Google
      • Modificação da API de contato do Google para a nova autorização de extensão
      • Melhoria do monitor de chamada remota na página todas as chamadas
      • Opção para mascarar a reunião se o usuário não estiver conectado
      • Exclusão do número da versão na página de notícias

      Correções de pântanos

      • A pesquisa na página de contato às vezes pode causar a aplicação do aplicativo
      • Incapaz de combinar o contato do Google
      • Desativando o botão para enviar para a página de conversa após a falha em enviar a mensagem
      • Incapaz de atualizar o status de presença corretamente
      • Atrasos e saltos do cursor no final do texto ao inserir mensagens
      • A colagem de números de telefone em um campo de conteúdo modificável pode desencadear uma injeção C2D
      • Logipo RingCentral antigo em novas páginas
      • Opção de reunião do RingCentral ausente na lista de queda de “Adicionando conferências” na página do Google Agenda
      • Exibição das informações mais recentes sobre a conferência após a atualização/modificação
      • Adição da página inicial para novos produtos
      • A injeção clique para ligar/enviar um SMS às vezes não aparece na posição certa.
      • Opções Clique para ligar e clique para enviar um SMS básico em qualquer página da web
      • Todos os controles de chamada (exceto ligar para chamadas e chamadas)
      • Acesso à extensão RingCentral em qualquer página da Web do Chrome
      • Nova interface do usuário
      • SMS profissional e SMS interno
      • Sincronização de diretórios do Google e RingCentral
      • Acesso ao diretório do SMS
      • Acesso ao diretório da numeração
      • Ativação da funcionalidade de mensagens vocais/fax
      • Ativação da funcionalidade de teleconferência
      • Cartão de visita detalhado
      • Integração da agenda do Google
      • Possibilidade de colocar o protótipo funcional na lista preta/branca (para impedir que determinados sites exibam a interface RingCentral e C2D do usuário)
      • Enviando um apelo às mensagens vocais
      • Transferência de chamadas recebidas
      • Resposta do SMS a uma chamada recebida
      • Modificação do status de presença
      • RingCentral Reuniões Suporte de colaboração
      • Entre em contato conosco
      • Notícias
      • Apoio do RingCentral em
      • Google HO para conferências RingCentral
      • Badge de erro do WebRTC (exibição de uma notificação de erro no caso de um problema com a chamada WebRTC)
      • Notificação de chamada que entra no crachá RingCentral quando o aplicativo é reduzido (além da notificação do navegador)