Conhecimento básico
1. Estrutura do arquivo plug-in
1.1. manifest.json
Cada extensão, WebApp instalável e Skin possui um arquivo de manifesto de formato JSON que armazena informações importantes relacionadas ao plug-in.
Um exemplo de configuração básica:
{"Nome": "Demonstração de ação do navegador", "versão": "1.0", "Permissões": ["guias", "http: //*/*", "https: //*/*/"], "BrowSer_action": {"default_title": "switch", "default_ic_icon "Popup.html"}, "Background": {"Page": "Background.html"}, "manifest_version": 2}1.2. Aparecer
A janela pop-up do plug-in, o default_popup no Browser_action na configuração acima é esta página.
1.3. Página de fundo
A maioria dos aplicativos inclui uma página de segundo plano para executar as principais funções do aplicativo.
1.4. Scripts de conteúdo
O script de conteúdo pode permitir a interação entre o aplicativo e a página da web, que se refere a scripts JavaScript que podem ser executados dentro das páginas que foram carregadas pelo navegador. Você pode pensar no script de conteúdo como parte de uma página da web, não parte do aplicativo em que está.
2. Interação entre os arquivos
A função na página de segundo plano pode ser chamada diretamente na janela pop -up.
O script de conteúdo pode ler e modificar a árvore Dom da página da web atual, mas não pode modificar a árvore Dom da página de segundo plano (plano de fundo) do aplicativo em que está localizado.
Interação entre script de conteúdo e aplicativo: você pode enviar mensagens um para o outro
3. Injete o arquivo JS (Scripts de Conteúdo) na página da Web:
Método 1: Configure no arquivo manifest.json:
"Content_scripts": [{"Matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jQuery.js", "myscript.js"]}],Método 2, via Executescript ():
Injete scripts JavaScript na página para executar.
Chrome.tabs.executescript (TABID INTEGER, Detalhes do objeto, retorno de chamada da função) Chrome.tabs.executesscript (tabid, {file: "func.js", allframes: true});Aparência da interface do usuário
1. Ação do navegador:
Adicione um ícone à direita da barra de endereço da barra de ferramentas Chrome principal.
Nota: os aplicativos embalados não podem usar ações do navegador
1.1. Configuração em manifest.json
Registre a ação do navegador:
{"name": "minha extensão", ... "navegador_action": {"default_icon": "imagens/icon19.png", // opcional "default_title": "google Mail", // opcional; mostrado na ferramenta "Default_popup": "popup.html" // opcional}, ...}1.2. Descrição do item de configuração
(1) default_icon
Icon 19 * 19px
Modifique o campo default_icon no manifesto do Browser_action ou ligue para o método seticon ().
Chrome.browseraction.seticon (detalhes do objeto)
Defina o ícone de ação do navegador. O ícone pode ser um caminho para uma imagem ou informações de pixel extraídas de um elemento de tela. Seja o caminho do ícone ou a imagem da tela, essa propriedade deve ser especificada.
(2) default_title
Modifique o campo default_title no manifesto Browser_action ou ligue para o método Settitle (). Você pode especificar uma string localizada para o campo default_title; Clique em Internacionalização para ver os detalhes.
Chrome.browseraction.setTitle (detalhes do objeto)
Defina o título da ação do navegador, isso será exibido na dica de ferramenta.
(3) crachá
As ações do navegador podem opcionalmente exibir um crachá - exibir algum texto no ícone. Os crachás podem simplesmente atualizar algumas informações promissoras de status de extensão de pequena extensão para ação do navegador.
Como o espaço do crachá é limitado, ele suporta apenas menos de 4 caracteres.
Para definir o texto e a cor do crachá, você pode usar o setBadgeText () e o setBadgeBackgroundColor (), respectivamente.
Chrome.browseraction.setBadGeText (Detalhes do objeto)
Defina o texto do crachá da ação do navegador, e o crachá é exibido no ícone.
setbadgebackgroundcolorchrome.browsseraction.setbadgebackgroundColor (detalhes do objeto)
Defina a cor de fundo do crachá.
(4) default_popup
Dicas de bolhas pop -up
Modifique o campo default_popup no manifesto do Browser_action para especificar o arquivo html ou ligue para o método setPopup ().
Chrome.browseraction.setPopup (detalhes do objeto)
Define um HTML exibido no pop -up ao clicar em ações do navegador.
1.3. Pontas
Para melhor exibição, siga os seguintes princípios:
Confirme que as ações do navegador são usadas apenas em cenários em que a maioria dos sites possui requisitos funcionais.
Confirme que as ações do navegador não são usadas em algumas páginas da web que possuem funções. Por favor, use as ações da página para esse cenário.
Verifique se o tamanho do seu ícone deve ocupar até 19x19 pixels. O ícone da ação do navegador deve parecer maior e mais pesado que o ícone da ação da página.
Não tente imitar os ícones da chave inglesa do Google Chrome, seu desempenho pode ser problemático sob diferentes temas, e a extensão deve ser mais atraente.
Tente usar o canal alfa e suavizar as bordas de seus ícones, porque muitos usuários usam temas, seus ícones devem ter um bom desempenho em várias origens.
Não continue piscando seu ícone, é muito ofensivo.
2. Menu do clique com o botão direito do mouse
Você pode optar por adicionar um item de menu com o botão direito do mouse para diferentes tipos de objetos (como imagens, links, páginas).
Você pode adicionar vários itens de menu com o botão direito do mouse, conforme necessário. Múltiplos itens do menu Clique com o botão direito do mouse adicionados em uma extensão serão combinados automaticamente pelo Chrome e colocados no menu secundário do nome de extensão correspondente.
O menu do clique com o botão direito do mouse pode aparecer em qualquer documento (ou quadros no documento) ou mesmo em um arquivo local (como arquivo: // ou Chrome: //). Se você deseja controlar a exibição do menu do clique com o botão direito do mouse em documentos diferentes, poderá especificar documentUlPatterns ao ligar para criar () e atualizar ().
2.1. Configuração em manifest.json
Declare a permissão "contentmenus" no manifesto. Ao mesmo tempo, você deve especificar um ícone de 16x16 para usar como o logotipo do menu do clique com o botão direito do mouse. Por exemplo:
{"Nome": "Minha extensão", ... "Permissões": ["contextmenus"], "ícones": {"16": "icon-bitty.png", "48": "icon-small.png", "128": "icon-large.png"}, ...}3. Notificações da área de trabalho
Notifique o usuário de que algo importante aconteceu. As notificações da área de trabalho serão exibidas fora da janela do navegador. A figura abaixo mostra o efeito das notificações. Em diferentes plataformas, o efeito de exibição das notificações será um pouco diferente.
Use diretamente um pequeno pedaço de código JavaScript para criar notificações e, é claro, também pode ser feito através de uma página HTML separada no pacote de extensão.
3.1. Configuração em manifest.json
{"Nome": "minha extensão", ... "Permissões": ["notificações", ...}3.2. Interaja com a página estendida:
Use getbackgroundpage () e getViews () para criar interações em notificações e páginas de extensão
// Ligue para o método da página estendido na notificação ... Chrome.Extension.getBackgroundPage ().
4. Omnibox
A interface do aplicativo Omnibox permite registrar uma palavra -chave na barra de endereços do Google Chrome, que também é chamada de Omnibox.
O campo da palavra -chave omnibox deve ser incluído no manifesto. Um ícone com pixels de 16x16 deve ser especificado para que seja exibido na barra de endereços quando o usuário inserir uma palavra -chave.
4.1. Configuração em manifest.json
{"Nome": "Extensão Omnibox de Aaron", "Versão": "1.0", "OmniBox": {"palavra-chave": "aaron"}, "ícones": {"16": "16-full-color.png"}, "Background_Page": "Bordado.html"}O Chrome cria automaticamente ícones com 16x16 pixels no modo de escala de cinza. Você deve fornecer uma versão colorida do ícone para que ele possa ser usado em outros cenários.
5. Página de opções
Para que os usuários configurem suas extensões, pode ser necessário fornecer uma página de opção. Se você fornecer uma página de opção, um link será fornecido na página de gerenciamento de extensão Chrome: // Extensões. Clique no link Opções para abrir sua página de opções.
5.1. Configuração em manifest.json
{"name": "minha extensão", ... "options_page": "options.html", ...}6. Substituir páginas específicas
Usando páginas alternativas, você pode substituir algumas páginas específicas no Chrome por padrão e usar as páginas fornecidas pela extensão.
6.1. Configuração em manifest.json
{"name": "minha extensão", ... "Chrome_url_overrides": {"pagetooverride": "mypage.html"}, ...}7. Ações da página
Use as ações da página para colocar o ícone na barra de endereços.
Se você deseja que o ícone de extensão seja sempre visível, use a ação do navegador.
Aplicativos embalados não podem usar ações da página.
7.1. Configuração em manifest.json
{"name": "minha extensão", ... "Page_action": {"default_icon": "icons/foo.png", // opcional "default_title": "do action", // opcional; mostrado na ferramenta "Default_popup": "popup.html" // opcional}, ...}7.2. Descrição do item de configuração
Como as ações do navegador, as ações da página podem ter ícones, mensagens rápidas e pop-ups. Mas não há crachá
Use os métodos mostram () e oculta () para mostrar e ocultar ações da página. Por padrão, a ação da página está oculta. Quando você deseja exibir, você precisa especificar a página da guia onde o ícone está localizado. O ícone permanecerá visível até que a página da guia feche ou comece a exibir um URL diferente (como: o usuário clica em uma conexão)
7.3. Pontas
Use a ação da página apenas para algumas páginas;
Não o use na maioria das páginas, use ações do navegador, em vez disso, se a funcionalidade exigir.
Nem sempre deixe os ícones aparecerem nas animações quando estiver tudo bem, será muito irritante.
8. Tópico
O tema é uma extensão especial que pode ser usada para alterar a aparência de todo o navegador. O tema é semelhante à extensão padrão, mas o tema não pode conter o código JavaScript ou HTML.
8.1. Configuração em manifest.json
{"versão": "2.6", "nome": "tema camuflado", "tema": {"imagens": {"theme_frame": "imagens/theme_frame_camo.png", "tem temas_frame_overlay": imagens/tema_frame_stripe.png "," tem tem tema_toolbar ":" tem temas/tema_frame_stripe.png "," tem tema_toolbar ":" tem temas/tem temas/theme_frame_stripe.png "," tem tema_frame_overlay ": imagens/tema_frame_stripe.png", "tema_toolbar": "tem temas/tem temas/theme_frame_stripe.png", "tem tema_toolbar": "tem temas/tem temas/tem temas/themo.png", "tem tema_frame_overlay". "theme_ntp_background": "Images/theme_ntp_background_norepeat.png", "theme_ntp_attribution": "Images/Attribution.png"}, "Colors": {"Frame": [71, 105, 91], "Ferramentas": [207, 261, 192], "nt," 91], "Ferramentas": [207, 221, 192]: : [36, 70, 0], "NTP_SECTION": [207, 221, 192], "Button_background": [255, 255, 255]}, "Tints": {"Butts": [0.33, 0.5, 0.47]}, "Propriedades": {"ntp_ground "_ligm":