Creare Estensioni Chrome

 

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

 

come creare estensioni chrome

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: &quot;consolas&quot; , &quot;bitstream vera sans mono&quot; , &quot;courier new&quot; , &quot;courier&quot; , monospace , &quot;important&quot;;"><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: &quot;consolas&quot; , &quot;bitstream vera sans mono&quot; , &quot;courier new&quot; , &quot;courier&quot; , monospace , &quot;important&quot;;"><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: &quot;consolas&quot; , &quot;bitstream vera sans mono&quot; , &quot;courier new&quot; , &quot;courier&quot; , monospace , &quot;important&quot;;"><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: &quot;consolas&quot; , &quot;bitstream vera sans mono&quot; , &quot;courier new&quot; , &quot;courier&quot; , monospace , &quot;important&quot;;"><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: &quot;consolas&quot; , &quot;bitstream vera sans mono&quot; , &quot;courier new&quot; , &quot;courier&quot; , monospace , &quot;important&quot;;"><span data-blogger-escaped-style="font-size: 19.2px; line-height: 28.8px;">  "permissions": ["downloads", "&lt;all_urls&gt;"],</span></span>

<span style="font-family: consolas, 'bitstream vera sans mono', 'courier new', courier, monospace, important;" data-blogger-escaped-style="font-family: &quot;consolas&quot; , &quot;bitstream vera sans mono&quot; , &quot;courier new&quot; , &quot;courier&quot; , monospace , &quot;important&quot;;"><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: &quot;consolas&quot; , &quot;bitstream vera sans mono&quot; , &quot;courier new&quot; , &quot;courier&quot; , monospace , &quot;important&quot;;"><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: &quot;consolas&quot; , &quot;bitstream vera sans mono&quot; , &quot;courier new&quot; , &quot;courier&quot; , monospace , &quot;important&quot;;"><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: &quot;consolas&quot; , &quot;bitstream vera sans mono&quot; , &quot;courier new&quot; , &quot;courier&quot; , monospace , &quot;important&quot;;"><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;">&lt;!DOCTYPE html&gt;</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;">&lt;head&gt;</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;">&lt;script src='popup.js'&gt;&lt;/script&gt;</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;">&lt;/head&gt;</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;">&lt;body&gt;</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;">&lt;label for=regex&gt;Regex&lt;/label&gt;&lt;br&gt;</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;">&lt;/body&gt;</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;">&lt;/html&gt;</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;"> 

Passaggio 2. Prova dell’app

  1. Apri Chrome e seleziona  > Strumenti > Estensioni.
  2. Fai clic su Modalità sviluppatore > Carica estensione non pacchettizzata.
  3. Sfoglia e Seleziona la cartella dove si trova il file manifest.json
  4. 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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *