Créez des extensions Chrome en moins de 15 minutes sans aucune connaissance en codage à l'aide de ChatGPT | Octets groupés

- mai 09, 2024

Créez des extensions Chrome en moins de 15 minutes sans aucune connaissance en codage à l'aide de ChatGPT | Octets groupés

Créez des extensions Chrome en moins de 15 minutes sans aucune connaissance en codage à l'aide de ChatGPT

31 mars 2023 • 4 min de lecture • Rohan

Table des matières

Nous utiliserons ChatGPT pour créer une extension simple, QuikNote, qui prend des notes quotidiennes rapides directement depuis le navigateur.

Voici la démonstration de l'extension QuikNote que nous construisons ->

Voici le didacticiel complet étape par étape avec des invites.

Préparez d’abord la scène

L'objectif principal de votre invite est de faire en sorte que ChatGPT FAIT des choses plutôt que de le faire réfléchir .

Il se trompe sérieusement lorsqu’il doit comprendre la plupart des choses par lui-même.

N’avoir aucune ambiguïté est la clé d’invites impressionnantes.

scène

Des exigences EXTRÊMEMENT PRÉCISES

Expliquez les exigences en détail. Soyez très précis sur ce que vous voulez qu'il fasse.

Des exigences de haut niveau obligeront ChatGPT à prendre de nombreuses décisions par lui-même et croyez-moi, vous ne voulez pas de cela.

Vous voulez que ChatGPT pense toujours moins et FAIRE plus.

exigences

Remarquez ici comment j'ai exposé chaque exigence de manière très détaillée. Essayez d'être très précis et précis.

Demandez des éclaircissements à ChatGPT

Demandez à ChatGPT de VOUS poser des questions de clarification.

C’est un excellent moyen de lever toute sorte d’ambiguïté. Si ChatGPT n'est pas sûr de quelque chose, il supposera des choses artistiques et sera plus susceptible de commettre des erreurs.

précisions

Voir ci-dessus, comment j'ai demandé à ChatGPT de demander des éclaircissements supplémentaires.

Ensuite, une question valable a été posée qui aurait pu créer une ambiguïté.

Codage de l'extension

Après avoir clarifié les exigences, j'ai demandé à ChatGPT de générer tous les codes nécessaires à la création de cette extension.

Il a généré 4 fichiers. Voici le contenu de ces fichiers générés par ChatGPT.

`manifest.json`

Il contient des métadonnées sur l'extension.

{
  "name": "Quiknote",
  "version": "1.0",
  "description": "A simple note-taking extension for Chrome",
  "permissions": [
    "storage"
  ],
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16.png",
      "48": "icons/48.png",
      "128": "icons/128.png"
    }
  }
}

`popup.html`

Pour créer l’interface utilisateur de l’extension.

<!DOCTYPE html>
<html>
  <head>
    <title>QuikNote</title>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <div class="container">
      <h1>QuikNote</h1>
      <textarea id="note"></textarea>
      <br>
      <label for="date">Date:</label>
      <input type="date" id="date">
      <br>
      <button id="save">Save</button>
      <div id="notes"></div>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

`popup.js`

Contient la logique de l'extension.

// Get the UI elements
const noteTextbox = document.getElementById('note');
const datePicker = document.getElementById('date');
const saveButton = document.getElementById('save');

// Set default date to today
var now = new Date();

var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);

var today = now.getFullYear()+"-"+(month)+"-"+(day) ;

datePicker.value = today;

// Load the note for the currently selected date
loadNote();

// Set up event listeners
datePicker.addEventListener('input', loadNote);
saveButton.addEventListener('click', saveNote);

function loadNote() {
  const date = datePicker.value;
  const note = localStorage.getItem(`quicknote-${date}`) || '';
  noteTextbox.value = note;
}

function saveNote() {
  const date = datePicker.value;
  const note = noteTextbox.value;
  localStorage.setItem(`quicknote-${date}`, note);
  alert('Note saved!');
}

`popup.css`

Pour styliser l'extension

body {
  margin: 0;
  padding: 0;
  background-color: #1d1d1d;
  color: #fff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 400px;
}

.container {
  padding: 20px;
}

h1 {
  margin-top: 0;
}

label {
  display: block;
  margin-top: 10px;
}

input[type="date"] {
  border: none;
  padding: 5px;
  background-color: #3f3f3f;
  color: #fff;
  border-radius: 5px;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 5px;
  border: none;
  background-color: #3f3f3f;
  color: #fff;
  border-radius: 5px;
  resize: none;
}

button {
  margin-top: 10px;
  padding: 5px 10px;
  border: none;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

#notes {
  margin-top: 20px;
}

.date-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.note {
  margin-bottom: 10px;
}

Installer l'extension

Ensuite, ChatGPT m'a expliqué comment structurer ces fichiers dans le répertoire d'extension. Voici la structure des dossiers suggérée. dossier

Il m'a également donné des instructions étape par étape sur la façon d'installer QuikNote.

Quelques pièges

ChatGPT a définitivement fait un excellent travail en codant l’extension.

Mais il a commis des erreurs stupides que j'ai dû déboguer et corriger manuellement.

Ce sont les erreurs qu'il a commises 👇

Dans getElementById(), il a utilisé le mauvais identifiant HTML
Il a oublié d'ajouter storageune autorisation surmanifest.json
Il a ajouté le script JS à l'intérieur <head>de la balise HTML au lieu de l'ajouter juste avant la fin de <body>la balise.

Je tweete régulièrement sur ces sujets et sur tout ce que j'explore. Suis moi sur Twitter

Rechercher dans ce blog

2👌21/2/3/4/5