Creare un'estensione: la pagina html

Ora che abbiamo capito cosa sono le estensioni iniziamo a realizzarne una.

Partendo da questo articolo in inglese abbiamo deciso che, come primo esempio, la nostra estensione dovrà facilitarci l'inserimento, nei nostri documenti html, di un input text che cambi il colore di sfondo quando è selezionato.

es:

Potete scaricare l'esempio descritto fino all'articolo n.6 da qui.

Innanzitutto realizziamo il file html che rappresenterà il pannello di controllo della nostra estensione.

Il "title" che daremo al documento sarà quello visualizzato quando passeremo col mouse sopra l'iconcina della nostra estensione. Io nel "title" scrivo: "text select", voi potete scrivere quello che volete.

Quindi inseriamo un form che chiameremo, per esempio, FrmText, al cui interno andremo a creare una tabella di 3 righe e 2 colonne tipo questa:

<form name="FrmText" id="FrmText"> <table border="1"> <tr> <td>Nome campo </td> <td><input name="nome_testo" type="text" id="nome_testo"></td> </tr> <tr> <td>Colore over </td> <td><input name="colore_over" type="text" id="colore_over"></td> </tr> <tr> <td>Colore out </td> <td><input name="colore_out" type="text" id="colore_out"></td> </tr> </table> </form>

Nota: è importante assegnare anche dei nomi ai 3 campi di input per poterli richiamare in seguito dalla funzione javascript.