suporte a extensões 2004 Versão 10 começa a suportar extensões 2009 Versão 10 começa a suportar extensões 2010 Versão 5 começa a suportar extensões 2010 Edge lança alguns extensões fechadas 2016 Suporte a extensões.
pode executar dentro do seu navegador com uma interface de usuário dedicada. As extensões também oferecem funcionalidade, mas ao contrário dos aplicativos, há pouco ou nenhum componente de interface do usuário.
Microsoft Edge developer.microsoft.com/en- us/microsoft-edge/extensions/ Browsers com suporte a extensões. Precisa fazer parte do "Apple Developer Program “ com custo de 99 dólares por ano para publicar extensões 5 dólares para poder publicar extensões na Chrome Store Gratuito para publicar Gratuito para publicar Possui somente uma lista limitada de extensões e até o momento não é possível publicar extensões Chrome, Firefox e Opera: Os três browsers possuem funcionalidades similares com pequenas mudanças na implementação
em Python Babel Ext babelext.com Gratuito Mais voltado para desenvolvedores que desejam simples injeção de CSS e javascript em uma ou mais páginas Oferece somente funcionalidades que se repetem entre os browsers (Chrome, Safari, Opera, Safari) Cross-browser Extension Frameworks. Pontos negativos: No framework Kango, o desenvolvedor não trabalha diretamente com a API dos browsers, mas sim com o jeito do framework de fazer as coisas. O Babel Ext é limitado nas coisas que se pode fazer cross-browser.
extensão fica sempre habilitado para usuário interagir. O valor dos badges podem ser atualizados dinamicamente no script de background A propriedade default_icon que define qual será o ícone do canto superior direito da extensão page_action Ícone da extensão pode ficar habilitado ou desabilitado de acordo com a lógica do código. A propriedade default_icon que define qual será o ícone do canto superior direito da extensão Possui métodos que não existem no browser_action: chrome.pageAction.show(tabId) chrome.pageAction.hide(tabId) page_action e browser_action "page_action": { "default_icon": "assets/images/pudim.png", "default_title": "Pudim é mais que bom!", "default_popup": "popup/popup.html" } "browser_action": { "default_icon": "assets/images/pudim.png", "default_title": "Pudim é mais que bom!", "default_popup": "popup/popup.html" }
quais abas são selecionadas, se o browser está armazenando dados, e identificar outros estados. Colocando persistent: false o script não precisa ficar rodando o tempo inteiro e libera memória, mas o script de background aind aé ativado através de eventos. content_scripts Roda no contexto da página em que está. Consegue ler o DOM e manipulá-lo, setar eventos, estilizar, e inserir novos elementos. background e content_scripts "content_scripts": [{ "matches": ["http://pudim.com.br/*"], "js": [ "assets/js/vendor/jquery.js", "assets/js/main.js" ], "css": ["assets/css/main.css"] }], "background": { "scripts": [“assets/js/background.js”], "persistent": false }
sua extensão, você pode fornecer uma página de opções. Sempre use a API storage.sync para lembrar as opções escolhidas pelo usuário. Isso os tornará acessíveis a partir do script dentro de sua extensão, em todos os dispositivos do usuário. Exemplo de parte do manifest.json no Chrome "options_ui": { "page": "options-ui/index.html", "chrome_style": true }
fica dentro do pacote da extensão para ser utilizado precisa ser declarado nesa propriedade chrome_url_overrides • Com a propriedade newtab, é possível criar uma página customizada toda vez que uma nova aba é criada no Chrome. É possível também ‘sobrescrever' a página de history e bookmarks do Browser. Exemplo do manifest.json no Chrome { "manifest_version": 2, "version": "0.1", "name": "Super pudim", "description": "Extensão do pudim", "permissions": [ "activeTab" ], "icons": { "16": "assets/images/icon16.png", "48": "assets/images/icon48.png", "128": "assets/images/icon128.png" }, "browser_action": { "default_icon": "assets/images/pudim.png", "default_title": "Pudim é mais que bom!", "default_popup": "popup/popup.html" }, "background": { "scripts": ["assets/js/vendor/background.js"] }, "content_scripts": [{ "matches": ["http://pudim.com.br/*"], "js": [ "assets/js/vendor/jquery.js", "assets/js/main.js" ], "css": ["assets/css/main.css"] }], "web_accessible_resources": [ "assets/images/*.png" ], "chrome_url_overrides": { "newtab": "index-newtab.html" } } "web_accessible_resources": [ "assets/images/*.png" ], "chrome_url_overrides": { "newtab": "index-newtab.html" }
antes pedir permissão para usar. Pode-se escolher entre permissões opcionais (optional_permissions), que não afetam a funcionalidade básica da extensão, e permissões obrigatórias (permissions). Existem também permissões externas, que evitam problemas de cross-origin. Se você quiser permissão para ler e escrever dados da conta do Google do usuário por exemplo: Permissões nativas disponíveis no Chrome activeTab alarms background bookmarks browsingData certificateProvider clipboardRead clipboardWrite contentSettings contextMenus cookies debugger declarativeContent declarativeWebRequest desktopCapture displaySource dns documentScan downloads enterprise.deviceAttributes enterprise.platformKeys experimental fileBrowserHandler fileSystemProvider fontSettings gcm geolocation history identity idle idltest management nativeMessaging networking.config notificationProvider notifications pageCapture platformKeys power printerProvider privacy processes proxy sessions signedInDevices storage system.cpu system.display system.memory system.storage tabCapture tabs topSites tts ttsEngine unlimitedStorage vpnProvider wallpaper webNavigation webRequest webRequestBlocking "permissions": [ "http://*.google.com/" ]
barra de endereço Context Menu • Cria itens adicionais no menu que surge ao clicar com o botão direito no Browser Devtools Page • Possibilita inserir abas novas no Dev Tools e modifica as já existentes Exemplo de parte do manifest.json no Chrome { "permissions": [ "contextMenus" ], "icons": { "16": "assets/images/icon16.png", "48": "assets/images/icon48.png", "128": "assets/images/icon128.png" }, "devtools_page": "devtools/index.html", "omnibox": { "keyword" : "pudim" } } chrome.contextMenus.create({ "title": "Search for pudim", "id": "menu-pudim", "contexts": [ "page", "selection", "image", "link"] });
possível criar, reordenar e editar bookmarks. Os bookmarks são organizados numa árvore, sendo possível manipulá-los. Exemplo de parte do manifest.json no Chrome { "permissions": [ "bookmarks" ] } chrome.bookmarks.create({ 'parentId': extensionsFolderId, 'title': 'Extensions doc', 'url': 'http://code.google.com' });
e pesquisar downloads. Com essa API é possível criar extensões como os vários Download Managers que são encontrados na webstore. Exemplo de parte do manifest.json no Chrome { "permissions": [ "downloads" ] } chrome.downloads.resume(downloadId, callback); chrome.downloads.cancel(downloadId, callback); chrome.downloads.open(downloadId, callback); chrome.downloads.show(downloadId, callback); Alguns exemplos de métodos da API
registro do navegador das páginas visitadas. Você pode adicionar, remover e consultar URLs no histórico do navegador. Exemplo de parte do manifest.json no Chrome { "permissions": [ "history" ] } chrome.history.search(query, callback); chrome.history.getVisits(details, callback); chrome.history.deleteUrl(details, callback); chrome.history.deleteRange(range, callback); Alguns exemplos de métodos da API
usando templates pré-definidos, e mostrar essas notificações aos usuários dentro do SO. Exemplo de parte do manifest.json no Chrome { "permissions": [ "notifications" ] } Alguns exemplos de métodos da API chrome.notifications.create(id, options, callback) chrome.notifications.update(id, options, callback) chrome.notifications.clear(id, callback) chrome.notifications.getPermissionLevel(callback)
Armazena escolhas de configurações do usuário para uma determinada extensão. É possível no Storage API mas não no localStorage: • Armazenar objetos ao invés de strings • Pode ser syncado entre diferentes PCs • Assíncrono { "permissions": [ "storage" ] } Exemplo de parte do manifest.json no Chrome Alguns exemplos de métodos da API chrome.history.search(query, callback); chrome.history.getVisits(details, callback); chrome.history.deleteUrl(details, callback); chrome.history.deleteRange(range, callback);
sistema de abas do browser. Você pode usar esta API para criar, modificar e reorganizar guias no navegador. A maioria da API chrome.tabs pode ser usada sem declarar qualquer permissão. No entanto, a permissão "tabs" é necessária para preencher as propriedades como url, title e favIconUrl de Tab. Send message envia mensagens para os scrips definidos em “content_scripts”. { "permissions": [ "tabs" ] } Exemplo de parte do manifest.json no Chrome Alguns exemplos de métodos da API chrome.tabs.get(tabId, callback) chrome.tabs.getCurrent(callback) chrome.tabs.sendMessage( tabId, message, options, responseCallback ) chrome.tabs.create(createProperties, callback)
• Acessar a URL chrome://extensions • Clicar no botão “Load unpacked extensions” • Escolha a pasta da sua extensão • Para atualizar a aplicação localmente toda vez que se faz alterações dê refresh na página chrome://extensions Publicando uma extensão • Acesse chrome.google.com/webstore/developer/dashboard • Faça um ZIP da pasta de sua extensão, clique em “Add new item” e suba
site) Card Color Title for Trello (Exibe o texto da label dentro das labels coloridas) Zenhub (Adiciona funcionalidades no Github que melhoram o gerenciamento dos projetos) Panda (Exibe um dashboard de notícias em novas abas criadas)
Extension in 15 seconds) Extensions Reloader (Recarrega todas extensões em que se está desenvolvendo, para não precisar dar reload na aba de extensões toda hora que se muda algo durante o desenvolvimento) MDN Web Extensions Examples (Extensões variadas utilizando diferentes APIs) Chrome Extensions Samples (Exemplos de extensões com código fonte)
camiha
iktakahiro
pfn
shumei_ito
kentapapa
keeg
teamlab
prog893
terapyon
ishikawa_satoru
willnet
genda
lara
uxyall
helmedeiros
joshbly
tammyeverts
bkeepers
palkan
codingconduct
chrislema
addyosmani
tamaranovitovic
davidcarrasco
