Creare estensioni chrome significa creare delle cartelle cosi composte:
| File | Descrizione |
|---|---|
| manifest.json | File descrittore in cui vengono definite le caratteristiche dell’estensione |
| files.js | uno, o piu, file JavaScript con la logica operativa |
| files.css | (opzionale) uno, o piu, files CSS |
| files.png | (opzionale) una, o piu, file icona per la nostra estensione |
altra cosa fondamentale da sapere è la differenza tra browser_action e page_action:
- browser_action: viene visualizzata in modo permanente una icona della estensione a destra della barra degli indirizzi
- page_action: l’icona vicino alla barra degli indirizzi verrà visualizzata solo per determinate pagine
esempio di estensione che dopo aver cliccato su una icona salva un indirizzo predefinito
manifest.json
{</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "name": "Finders",</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "description": "Select links on a page and download them.",</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "version": "0.1",</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "minimum_chrome_version": "16.0.884",</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "permissions": ["downloads", "<all_urls>"],</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "browser_action": {"default_popup": "background.html"},</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "manifest_version": 2,</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "icons": { "48": "info-48.png" }</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;">}</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "name": "Finders",</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "description": "Select links on a page and download them.",</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "version": "0.1",</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "minimum_chrome_version": "16.0.884",</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "permissions": ["downloads", "<all_urls>"],</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "browser_action": {"default_popup": "background.html"},</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "manifest_version": 2,</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"> "icons": { "48": "info-48.png" }</span></span>
<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: "consolas" , "bitstream vera sans mono" , "courier new" , "courier" , monospace , "important";"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;">}</span></span>
permissions: definisce quali cose può fare l’estensione
default_pop: è la finestrella html che viene aperta quando si clicca sull’icona. Là dentro girerà lo script.
background.html
</span>
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"><!DOCTYPE html></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"><head></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"><script src='popup.js'></script></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"></head></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"><body></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;"></div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"><label for=regex>Regex</label><br></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;"></div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"></body></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"></html></span>
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"><!DOCTYPE html></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"><head></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"><script src='popup.js'></script></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"></head></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"><body></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;"></div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"><label for=regex>Regex</label><br></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;"></div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"></body></span>
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;"></html></span>
popup.js
</div>
<div data-blogger-escaped-style="background-color: white; color: #333333; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 15px;">
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
console.log('init');
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
var url = "http://www.google.it";
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
chrome.downloads.download({
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
url: url,
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
filename: "suggested/filename/with/relative.path" // Optional
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
});
</div>
</div>
</div>
<div data-blogger-escaped-style="background-color: white; color: #333333; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 15px; line-height: 1.5; margin-bottom: 10px; margin-right: 20px; margin-top: 10px;">
<div data-blogger-escaped-style="background-color: white; color: #333333; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 15px;">
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
console.log('init');
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
var url = "http://www.google.it";
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
chrome.downloads.download({
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
url: url,
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
filename: "suggested/filename/with/relative.path" // Optional
</div>
<div id="highlighter_595154" class="syntaxhighlighter nogutter js" data-blogger-escaped-style="background-color: rgb(240, 240, 240) !important; border: 1px solid rgb(204, 204, 204) !important; font-size: 1.2rem !important; margin: 2em 0px !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0.7em !important; position: relative !important; width: 566.094px;">
});
</div>
</div>
</div>
<div data-blogger-escaped-style="background-color: white; color: #333333; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 15px; line-height: 1.5; margin-bottom: 10px; margin-right: 20px; margin-top: 10px;">
Passaggio 2. Prova dell’app
- Apri Chrome e seleziona
> Strumenti > Estensioni.
- Fai clic su Modalità sviluppatore > Carica estensione non pacchettizzata.
- Sfoglia e Seleziona la cartella dove si trova il file manifest.json
- Apri una nuova scheda in Chrome per vedere se l’app viene caricata e se funziona correttamente. In caso contrario, modificala e provala fino a quando non funziona correttamente nel browser.
Qua si possono trovare ottimi esempi:
https://developer.chrome.com/extensions/samples