<h2>Notre extension</h2>
<p>Notre extension consite &agrave; repertorier pleins de sites cools pour nous les devs sous forme de liste, les uns apr&egrave;s les autres.</p>
<p>&nbsp;</p>
<h2>&Ccedil;a va &ecirc;tre plus ou moins comme d'habitude</h2>
<p>Pour cr&eacute;er une extension, on va devoir cr&eacute;er une page html et un fichier css, comme on a l'habitude de faire. On va juste modifier certaines choses.</p>
<p>&nbsp;</p>
<h2>Pr&eacute;requis</h2>
<ul>
<li>Des connaissances en HTML</li>
<li>Des connaissances en CSS</li>
<li>Des bases avec JSON</li>
</ul>
<p>&nbsp;</p>
<p>Si vous avez besoin de petits rafraichissements ou d'apprendre le HTML ainsi que le CSS, suivez&nbsp;<a href="../course/creez-votre-premier-site-internet-avec-html5-et-css3">donc ce cours</a>&nbsp;puis revenez vers cet article.</p>
<p>&nbsp;</p>
<h3>Mise en place du projet</h3>
<p>Nous allons devoir cr&eacute;er un dossier dans lequel nous aurons&nbsp;<code>index.html</code>,&nbsp;<code>style.css</code> et <code>manifest.json.</code></p>
<p>Dans&nbsp;<code>index.html</code>, nous allons &eacute;crire le code de base d'une page html :</p>
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;link rel="stylesheet" href="./style.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;

  &lt;body&gt;
      &lt;h1&gt;Ma premi&egrave;re extension&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
<p>&nbsp;</p>
<p>Ajoutons nos premiers sites internet, un g&eacute;n&eacute;rateur de palettes, un comparateur de JSON et un g&eacute;n&eacute;rateur de vagues CSS :</p>
<pre class="language-markup"><code>  &lt;body&gt;
      &lt;h1&gt;Ma premi&egrave;re extension&lt;/h1&gt;

      &lt;a href="https://coolors.co/e6eed6-dde2c6-bbc5aa-a72608-090c02"&gt;G&eacute;n&eacute;rateur de palettes&lt;/a&gt;
      &lt;a href="https://getwaves.io/"&gt;G&eacute;n&eacute;rateur de vagues&lt;/a&gt;
      &lt;a href="https://jsoneditoronline.org/#left=local.wixiyo&amp;right=local.jozayo"&gt;Comparateur de JSON&lt;/a&gt;
  &lt;/body&gt;</code></pre>
<h3>&nbsp;</h3>
<h3>Attaquons le CSS</h3>
<p>Pour ce qui est du CSS, il faut simplement pr&eacute;ciser la taille de notre fen&ecirc;tre en modifiant la taille de&nbsp;<code>body&nbsp;</code>:</p>
<pre class="language-css"><code>body {
  width: 400px;
  height: 500px;
  font-family: Arial;
}</code></pre>
<p>&nbsp;</p>
<p>Ajoutons un style &agrave; nos liens:</p>
<pre class="language-css"><code>a {
  width: 90%;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  padding: 7px;
  gap: 5px;
  text-decoration: none;
  color: #fff;
  transition: 0.2s;
  background: #333333;
  align-items: center;
  margin-bottom: 10px;
}
a:hover {
  transform: scale(1.02);
  opacity: 0.8;
}</code></pre>
<h3>&nbsp;</h3>
<h3>Le manifest.json</h3>
<p>Dans&nbsp;<code>manifest.json</code>, nous allons pr&eacute;ciser tout un tas de choses :</p>
<pre class="language-javascript"><code>{
    "name": "Ma premi&egrave;re extension",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "La meilleure extension qui existe !",
    "icons": {
        "48": "icon.png"
    },
    "action": {
        "default_popup": "index.html"
    }
}</code></pre>
<p>&nbsp;</p>
<p>Dans ce cas, nous avons:</p>
<ul>
<li><code>name&nbsp;</code>: le nom de notre extension</li>
<li><code>manifest_version&nbsp;</code>: la version du manifest.json (veillez &agrave; ce qu'elle soit bien sur la version 3)</li>
<li><code>description&nbsp;</code>: la description de notre extension</li>
<li><code>icons&nbsp;</code>: le chemin de nos/notre icone(s) sous diff&eacute;rentes r&eacute;solutions</li>
<li><code>action =&gt; default_popup</code><span style="color: #b96ad9;">&nbsp;</span>: le chemin de notre page html</li>
</ul>
<p>&nbsp;</p>
<h3>Utiliser notre extension sur notre navigateur</h3>
<p>Pour utiliser notre extension sur notre navigateur, sur la plupart d'entre eux, il va falloir activer le mode d&eacute;veloppeur. Acc&eacute;dez &agrave; la page des extensions et cliquez sur le bouton "Developer mode" pour activer le mode d&eacute;veloppeur.</p>
<ul>
<li>gerer les extensions chrome :&nbsp;<a href="chrome://extensions" target="_blank" rel="noopener">chrome://extensions</a></li>
<li>gerer les extensions edge :&nbsp;<a href="edge://extensions" target="_blank" rel="noopener">edge://extensions</a></li>
</ul>
<p>&nbsp;</p>
<p>Ensuite, on cliquera sur "Load extension" et on selectionnera notre projet.</p>
<p>&nbsp;</p>
<h2>Publier mon extension</h2>
<p>Pour publier notre extension, ce n'est pas forc&eacute;ment le m&ecirc;me proc&eacute;d&eacute;. Tout va surtout se jouer sur le navigateur pour lequel vous souhaitez rendre disponible votre projet.</p>
<ul>
<li><a href="https://developer.chrome.com/docs/webstore/publish/" target="_blank" rel="noopener">Documentation Google Chrome</a></li>
<li><a href="https://learn.microsoft.com/en-us/microsoft-edge/extensions-chromium/publish/publish-extension" target="_blank" rel="noopener">Documentation Microsoft Edge</a></li>
<li><a href="https://extensionworkshop.com/documentation/publish/" target="_blank" rel="noopener">Documentation de Modzilla Firefox</a></li>
</ul>

CreaDev

Créer une extension pour son navigateur