Ανάπτυξη Επεκτάσεων Περιηγητή: Manifest V3 και JavaScript APIs

Οι επεκτάσεις περιηγητή είναι μικρά προγράμματα λογισμικού που προσαρμόζουν την εμπειρία περιήγησης. Μπορούν να προσθέσουν νέες λειτουργίες, να τροποποιήσουν το περιεχόμενο ιστοσελίδων, να μπλοκάρουν διαφημίσεις και πολλά άλλα. Με την έλευση του Manifest V3, ο τρόπος κατασκευής και λειτουργίας των επεκτάσεων έχει υποστεί σημαντικές αλλαγές. Αυτός ο ολοκληρωμένος οδηγός θα εξερευνήσει την ανάπτυξη επεκτάσεων περιηγητή χρησιμοποιώντας το Manifest V3 και τα JavaScript APIs, παρέχοντάς σας τη γνώση για να δημιουργήσετε ισχυρές και ασφαλείς επεκτάσεις για τους σύγχρονους περιηγητές.

Τι είναι οι Επεκτάσεις Περιηγητή;

Οι επεκτάσεις περιηγητή είναι ουσιαστικά μίνι-εφαρμογές που εκτελούνται μέσα σε έναν περιηγητή ιστού. Επεκτείνουν τη λειτουργικότητα του περιηγητή και ενσωματώνονται απρόσκοπτα με τις ιστοσελίδες. Οι επεκτάσεις γράφονται χρησιμοποιώντας τυπικές τεχνολογίες ιστού όπως HTML, CSS και JavaScript, καθιστώντας τις σχετικά προσιτές στους προγραμματιστές ιστού.

Παραδείγματα δημοφιλών επεκτάσεων περιηγητή περιλαμβάνουν:

• Προγράμματα αποκλεισμού διαφημίσεων: Μπλοκάρουν τις διαφημίσεις στις ιστοσελίδες, βελτιώνοντας την ταχύτητα περιήγησης και μειώνοντας τους περισπασμούς.
• Διαχειριστές κωδικών πρόσβασης: Αποθηκεύουν και διαχειρίζονται με ασφάλεια τους κωδικούς πρόσβασης, συμπληρώνοντάς τους αυτόματα σε ιστοσελίδες.
• Επεκτάσεις λήψης σημειώσεων: Επιτρέπουν στους χρήστες να κρατούν σημειώσεις και να τις αποθηκεύουν απευθείας από τις ιστοσελίδες.
• Εργαλεία παραγωγικότητας: Ενισχύουν την παραγωγικότητα παρέχοντας λειτουργίες όπως διαχείριση εργασιών, παρακολούθηση χρόνου και λειτουργίες εστίασης.
• Εργαλεία μετάφρασης γλώσσας: Μεταφράζουν ιστοσελίδες σε διαφορετικές γλώσσες με ένα μόνο κλικ. Παράδειγμα: η επέκταση Google Translate.
• Επεκτάσεις VPN: Δρομολογούν την κίνηση στο διαδίκτυο μέσω proxy για να παρακάμψουν γεωγραφικούς περιορισμούς και να ενισχύσουν την ιδιωτικότητα.

Η Σημασία του Manifest V3

Το Manifest V3 είναι η τελευταία έκδοση του αρχείου manifest, το οποίο είναι ένα αρχείο JSON που περιγράφει την επέκταση στον περιηγητή. Περιγράφει το όνομα, την έκδοση, τα δικαιώματα, τα scripts υποβάθρου της επέκτασης και άλλα απαραίτητα μεταδεδομένα. Το Manifest V3 εισάγει αρκετές βασικές αλλαγές σε σύγκριση με τον προκάτοχό του, το Manifest V2, εστιάζοντας κυρίως στην ασφάλεια και την απόδοση.

Βασικές αλλαγές στο Manifest V3:

• Service Workers: Το Manifest V3 αντικαθιστά τις σελίδες υποβάθρου (background pages) με service workers. Οι service workers είναι scripts που καθοδηγούνται από συμβάντα (event-driven) και εκτελούνται στο παρασκήνιο χωρίς να απαιτούν μια μόνιμη σελίδα. Είναι πιο αποδοτικοί και απαιτούν λιγότερους πόρους από τις σελίδες υποβάθρου.
• Declarative Net Request API: Αυτό το API επιτρέπει στις επεκτάσεις να τροποποιούν τα αιτήματα δικτύου χωρίς να τα παρεμποδίζουν άμεσα. Ενισχύει την ασφάλεια και την απόδοση μεταφέροντας τη λογική φιλτραρίσματος στον ίδιο τον περιηγητή.
• Αυστηρότερη Πολιτική Ασφάλειας Περιεχομένου (CSP): Το Manifest V3 επιβάλλει αυστηρότερους κανόνες CSP για να αποτρέψει την εκτέλεση αυθαίρετου κώδικα, ενισχύοντας περαιτέρω την ασφάλεια.
• APIs βασισμένα σε Promises: Πολλά APIs βασίζονται πλέον σε promises, καθιστώντας τις ασύγχρονες λειτουργίες ευκολότερες στη διαχείριση.

Γιατί η μετάβαση στο Manifest V3;

• Ενισχυμένη Ασφάλεια: Το Manifest V3 έχει σχεδιαστεί για να βελτιώσει την ασφάλεια των επεκτάσεων περιηγητή και να προστατεύσει τους χρήστες από κακόβουλο κώδικα.
• Βελτιωμένη Απόδοση: Οι service workers και το Declarative Net Request API συμβάλλουν σε καλύτερη απόδοση και μειωμένη κατανάλωση πόρων.
• Μεγαλύτερη Ιδιωτικότητα: Το Manifest V3 στοχεύει να δώσει στους χρήστες περισσότερο έλεγχο στα δεδομένα και την ιδιωτικότητά τους.

Ρύθμιση του Περιβάλλοντος Ανάπτυξης

Πριν ξεκινήσετε την ανάπτυξη επεκτάσεων περιηγητή, πρέπει να ρυθμίσετε το περιβάλλον ανάπτυξής σας. Αυτό περιλαμβάνει την εγκατάσταση ενός επεξεργαστή κώδικα, την επιλογή ενός περιηγητή για δοκιμές και την κατανόηση της βασικής δομής αρχείων μιας επέκτασης.

1. Επεξεργαστής Κώδικα

Επιλέξτε έναν επεξεργαστή κώδικα με τον οποίο αισθάνεστε άνετα. Δημοφιλείς επιλογές περιλαμβάνουν:

• Visual Studio Code (VS Code): Ένας δωρεάν και ισχυρός επεξεργαστής κώδικα με εξαιρετική υποστήριξη για JavaScript και άλλες τεχνολογίες ιστού.
• Sublime Text: Ένας γρήγορος και προσαρμόσιμος επεξεργαστής κώδικα με ένα ευρύ φάσμα προσθέτων.
• Atom: Ένας δωρεάν και ανοιχτού κώδικα επεξεργαστής κώδικα που αναπτύχθηκε από το GitHub.

2. Περιηγητής για Δοκιμές

Επιλέξτε έναν περιηγητή για να δοκιμάζετε τις επεκτάσεις σας. Ο Chrome και ο Firefox είναι οι πιο δημοφιλείς επιλογές, καθώς προσφέρουν στιβαρά εργαλεία για προγραμματιστές και υποστήριξη για την ανάπτυξη επεκτάσεων.

3. Βασική Δομή Αρχείων

Μια επέκταση περιηγητή συνήθως αποτελείται από τα ακόλουθα αρχεία:

• manifest.json: Αυτό το αρχείο περιέχει τα μεταδεδομένα της επέκτασης, όπως το όνομα, την έκδοση, τα δικαιώματα και τα scripts υποβάθρου.
• background.js (ή script service worker): Αυτό το script εκτελείται στο παρασκήνιο και χειρίζεται συμβάντα όπως ενέργειες του περιηγητή και κλικ σε μενού περιβάλλοντος.
• content.js: Αυτό το script εκτελείται στο πλαίσιο των ιστοσελίδων και μπορεί να τροποποιήσει το περιεχόμενό τους.
• popup.html: Αυτό το αρχείο ορίζει το περιβάλλον χρήστη του αναδυόμενου παραθύρου (popup) της επέκτασης.
• popup.js: Αυτό το script χειρίζεται τη λογική του popup της επέκτασης.
• options.html: Αυτό το αρχείο ορίζει το περιβάλλον χρήστη της σελίδας επιλογών της επέκτασης.
• options.js: Αυτό το script χειρίζεται τη λογική της σελίδας επιλογών της επέκτασης.
• icons: Αυτά είναι τα εικονίδια που χρησιμοποιούνται για την αναπαράσταση της επέκτασης στη γραμμή εργαλείων του περιηγητή και στη σελίδα διαχείρισης επεκτάσεων.

Δημιουργία της Πρώτης σας Επέκτασης: "Hello, World!"

Ας δημιουργήσουμε μια απλή επέκταση "Hello, World!" για να επιδείξουμε τις βασικές αρχές της ανάπτυξης επεκτάσεων περιηγητή.

1. Δημιουργία Αρχείου Manifest (manifest.json)

Δημιουργήστε ένα αρχείο με το όνομα `manifest.json` σε έναν νέο κατάλογο και προσθέστε τον ακόλουθο κώδικα:

{
  "manifest_version": 3,
  "name": "Hello, World!",
  "version": "1.0",
  "description": "Μια απλή επέκταση Hello, World!",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Επεξήγηση:

• `manifest_version`: Καθορίζει την έκδοση του αρχείου manifest (3 για το Manifest V3).
• `name`: Το όνομα της επέκτασης.
• `version`: Ο αριθμός έκδοσης της επέκτασης.
• `description`: Μια σύντομη περιγραφή της επέκτασης.
• `permissions`: Ένας πίνακας με τα δικαιώματα που απαιτεί η επέκταση (π.χ., "storage").
• `action`: Ορίζει τις ιδιότητες του popup της επέκτασης, συμπεριλαμβανομένου του προεπιλεγμένου αρχείου popup και των εικονιδίων.
• `icons`: Καθορίζει τις διαδρομές προς τα εικονίδια της επέκτασης.

2. Δημιουργία Αρχείου Popup (popup.html)

Δημιουργήστε ένα αρχείο με το όνομα `popup.html` στον ίδιο κατάλογο και προσθέστε τον ακόλουθο κώδικα:

<!DOCTYPE html>
<html>
<head>
  <title>Hello, World!</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Αυτή είναι μια απλή επέκταση περιηγητή.</p>
</body>
</html>

Αυτό το αρχείο ορίζει το περιβάλλον χρήστη του popup της επέκτασης, το οποίο θα εμφανίσει το μήνυμα "Hello, World!".

3. Δημιουργία Εικόνων Εικονιδίων

Δημιουργήστε τρεις εικόνες εικονιδίων με τα ακόλουθα μεγέθη: 16x16, 48x48, και 128x128 pixels. Αποθηκεύστε τις ως `icon16.png`, `icon48.png`, και `icon128.png` σε έναν κατάλογο `images` μέσα στον κατάλογο της επέκτασής σας.

4. Φόρτωση της Επέκτασης στον Περιηγητή σας

Chrome:

1. Ανοίξτε τον Chrome και μεταβείτε στο `chrome://extensions`.
2. Ενεργοποιήστε τη "Λειτουργία προγραμματιστή" στην επάνω δεξιά γωνία.
3. Κάντε κλικ στο "Φόρτωση αποσυμπιεσμένης" και επιλέξτε τον κατάλογο που περιέχει τα αρχεία της επέκτασής σας.

Firefox:

1. Ανοίξτε τον Firefox και μεταβείτε στο `about:debugging#/runtime/this-firefox`.
2. Κάντε κλικ στο "Φόρτωση προσωρινού πρόσθετου..." και επιλέξτε το αρχείο `manifest.json`.

Η επέκτασή σας "Hello, World!" θα πρέπει τώρα να είναι εγκατεστημένη και ορατή στη γραμμή εργαλείων του περιηγητή. Κάντε κλικ στο εικονίδιο της επέκτασης για να ανοίξετε το popup και να δείτε το μήνυμα "Hello, World!".

Εργασία με JavaScript APIs

Οι επεκτάσεις περιηγητή μπορούν να αλληλεπιδρούν με τον περιηγητή και τις ιστοσελίδες χρησιμοποιώντας JavaScript APIs. Αυτά τα APIs παρέχουν πρόσβαση σε διάφορες λειτουργίες, όπως:

• Tabs API: Σας επιτρέπει να διαχειρίζεστε τις καρτέλες του περιηγητή, συμπεριλαμβανομένης της δημιουργίας, ενημέρωσης και αναζήτησης καρτελών.
• Storage API: Παρέχει έναν τρόπο για την αποθήκευση και ανάκτηση δεδομένων μόνιμα εντός της επέκτασης.
• Alarms API: Σας επιτρέπει να προγραμματίζετε εργασίες για να εκτελεστούν σε συγκεκριμένες χρονικές στιγμές.
• Notifications API: Σας δίνει τη δυνατότητα να εμφανίζετε ειδοποιήσεις στον χρήστη.
• Context Menus API: Σας επιτρέπει να προσθέτετε προσαρμοσμένα στοιχεία στο μενού περιβάλλοντος του περιηγητή (μενού δεξιού κλικ).
• Web Request API (Declarative Net Request στο Manifest V3): Σας δίνει τη δυνατότητα να παρεμποδίζετε και να τροποποιείτε τα αιτήματα δικτύου.
• Scripting API: Επιτρέπει την εισαγωγή scripts σε ιστοσελίδες.

Παράδειγμα: Χρήση του Storage API

Ας δημιουργήσουμε μια επέκταση που αποθηκεύει και ανακτά το όνομα ενός χρήστη χρησιμοποιώντας το Storage API.

1. Ενημέρωση του Αρχείου Manifest (manifest.json)

Βεβαιωθείτε ότι ο πίνακας `permissions` στο `manifest.json` σας περιλαμβάνει το `"storage"`:

{
  "manifest_version": 3,
  "name": "Παράδειγμα Storage",
  "version": "1.0",
  "description": "Μια επέκταση που χρησιμοποιεί το Storage API",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Δημιουργία Αρχείου Popup (popup.html)

Δημιουργήστε ή ενημερώστε το `popup.html` σας με το ακόλουθο περιεχόμενο:

<!DOCTYPE html>
<html>
<head>
  <title>Παράδειγμα Storage</title>
  <style>
    body {
      width: 250px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Παράδειγμα Storage</h1>
  <label for="name">Εισαγάγετε το όνομά σας:</label>
  <input type="text" id="name">
  <button id="save">Αποθήκευση</button>
  <p id="greeting"></p>
  <script src="popup.js"></script>
</body>
</html>

3. Δημιουργία Script Popup (popup.js)

Δημιουργήστε ένα αρχείο με το όνομα `popup.js` και προσθέστε τον ακόλουθο κώδικα:

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // Φόρτωση του αποθηκευμένου ονόματος από τον αποθηκευτικό χώρο
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `Γεια σου, ${data.name}!`;
    }
  });

  // Αποθήκευση του ονόματος στον αποθηκευτικό χώρο όταν γίνεται κλικ στο κουμπί
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `Γεια σου, ${name}!`;
    });
  });
});

Επεξήγηση:

• Το script παρακολουθεί το συμβάν `DOMContentLoaded` για να βεβαιωθεί ότι το DOM έχει φορτωθεί πλήρως πριν εκτελέσει τον κώδικα.
• Ανακτά αναφορές στο πεδίο εισαγωγής, το κουμπί αποθήκευσης και την παράγραφο χαιρετισμού.
• Φορτώνει το αποθηκευμένο όνομα από τον αποθηκευτικό χώρο χρησιμοποιώντας το `chrome.storage.sync.get()`.
• Αποθηκεύει το όνομα στον αποθηκευτικό χώρο όταν γίνεται κλικ στο κουμπί αποθήκευσης χρησιμοποιώντας το `chrome.storage.sync.set()`.
• Ενημερώνει την παράγραφο χαιρετισμού με το αποθηκευμένο ή το εισαχθέν όνομα.

Επαναφορτώστε την επέκταση στον περιηγητή σας. Τώρα, όταν ανοίγετε το popup, μπορείτε να εισαγάγετε το όνομά σας, να το αποθηκεύσετε και να δείτε το μήνυμα χαιρετισμού. Το όνομα θα αποθηκευτεί στον αποθηκευτικό χώρο της επέκτασης και θα φορτωθεί την επόμενη φορά που θα ανοίξετε το popup.

Παράδειγμα: Χρήση του Tabs API

Ας δημιουργήσουμε μια επέκταση που εμφανίζει τη διεύθυνση URL της τρέχουσας καρτέλας σε ένα popup.

1. Ενημέρωση του Αρχείου Manifest (manifest.json)

Προσθέστε το δικαίωμα `"tabs"` στον πίνακα `permissions` στο `manifest.json` σας:

{
  "manifest_version": 3,
  "name": "Παράδειγμα Tabs",
  "version": "1.0",
  "description": "Μια επέκταση που χρησιμοποιεί το Tabs API",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Δημιουργία Αρχείου Popup (popup.html)

Δημιουργήστε ή ενημερώστε το `popup.html` σας με το ακόλουθο περιεχόμενο:

<!DOCTYPE html>
<html>
<head>
  <title>Παράδειγμα Tabs</title>
  <style>
    body {
      width: 300px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Παράδειγμα Tabs</h1>
  <p>URL Τρέχουσας Καρτέλας:</p>
  <p id="url"></p>
  <script src="popup.js"></script>
</body>
</html>

3. Δημιουργία Script Popup (popup.js)

Δημιουργήστε ένα αρχείο με το όνομα `popup.js` και προσθέστε τον ακόλουθο κώδικα:

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // Λήψη της διεύθυνσης URL της τρέχουσας καρτέλας
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

Επεξήγηση:

• Το script παρακολουθεί το συμβάν `DOMContentLoaded`.
• Χρησιμοποιεί το `chrome.tabs.query()` για να λάβει την τρέχουσα ενεργή καρτέλα στο τρέχον παράθυρο.
• Ανακτά τη διεύθυνση URL της καρτέλας και την εμφανίζει στην παράγραφο `url`.

Επαναφορτώστε την επέκταση στον περιηγητή σας. Τώρα, όταν ανοίγετε το popup, θα εμφανίζει τη διεύθυνση URL της τρέχουσας καρτέλας.

Scripts Υποβάθρου και Service Workers

Στο Manifest V3, τα scripts υποβάθρου αντικαθίστανται από τους service workers. Οι service workers είναι scripts που καθοδηγούνται από συμβάντα και εκτελούνται στο παρασκήνιο χωρίς να απαιτούν μια μόνιμη σελίδα. Είναι πιο αποδοτικοί και απαιτούν λιγότερους πόρους από τις σελίδες υποβάθρου.

Βασικά Χαρακτηριστικά των Service Workers:

• Καθοδηγούμενοι από συμβάντα: Οι service workers ανταποκρίνονται σε συμβάντα όπως ενέργειες του περιηγητή, ειδοποιήσεις (alarms) και μηνύματα από content scripts.
• Ασύγχρονοι: Οι service workers χρησιμοποιούν ασύγχρονα APIs για να αποφύγουν το μπλοκάρισμα του κύριου νήματος.
• Τερματίζονται όταν είναι αδρανείς: Οι service workers τερματίζονται όταν δεν χειρίζονται ενεργά συμβάντα, εξοικονομώντας πόρους.

Παράδειγμα: Χρήση ενός Service Worker

Ας δημιουργήσουμε μια επέκταση που εμφανίζει μια ειδοποίηση όταν ξεκινά ο περιηγητής.

1. Ενημέρωση του Αρχείου Manifest (manifest.json)

Ενημερώστε το `manifest.json` σας με το ακόλουθο περιεχόμενο:

{
  "manifest_version": 3,
  "name": "Παράδειγμα Service Worker",
  "version": "1.0",
  "description": "Μια επέκταση που χρησιμοποιεί έναν service worker",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Επεξήγηση:

• Η ιδιότητα `"background"` καθορίζει τη διαδρομή προς το script του service worker (`background.js`).
• Ο πίνακας `"permissions"` περιλαμβάνει το `"notifications"`, το οποίο απαιτείται για την εμφάνιση ειδοποιήσεων.

2. Δημιουργία Script Service Worker (background.js)

Δημιουργήστε ένα αρχείο με το όνομα `background.js` και προσθέστε τον ακόλουθο κώδικα:

chrome.runtime.onStartup.addListener(() => {
  // Εμφάνιση ειδοποίησης όταν ξεκινά ο περιηγητής
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Ο Περιηγητής Ξεκίνησε',
    message: 'Ο περιηγητής έχει ξεκινήσει.',
  });
});

Επεξήγηση:

• Το script παρακολουθεί το συμβάν `chrome.runtime.onStartup`, το οποίο ενεργοποιείται όταν ξεκινά ο περιηγητής.
• Χρησιμοποιεί το `chrome.notifications.create()` για να εμφανίσει μια ειδοποίηση με τις καθορισμένες ιδιότητες.

Επαναφορτώστε την επέκταση στον περιηγητή σας. Τώρα, όταν επανεκκινήσετε τον περιηγητή σας, θα πρέπει να δείτε μια ειδοποίηση από την επέκταση.

Content Scripts

Τα content scripts είναι αρχεία JavaScript που εκτελούνται στο πλαίσιο των ιστοσελίδων. Μπορούν να έχουν πρόσβαση και να τροποποιούν το DOM των ιστοσελίδων, επιτρέποντάς σας να προσαρμόσετε τη συμπεριφορά και την εμφάνιση των ιστότοπων.

Βασικά Χαρακτηριστικά των Content Scripts:

• Πρόσβαση στο DOM: Τα content scripts μπορούν να έχουν πρόσβαση και να χειρίζονται το DOM των ιστοσελίδων.
• Απομόνωση από τα scripts της ιστοσελίδας: Τα content scripts εκτελούνται σε ένα απομονωμένο περιβάλλον, αποτρέποντας τις συγκρούσεις με τα scripts της ιστοσελίδας.
• Επικοινωνία με τα scripts υποβάθρου: Τα content scripts μπορούν να επικοινωνούν με τα scripts υποβάθρου χρησιμοποιώντας ανταλλαγή μηνυμάτων.

Παράδειγμα: Χρήση ενός Content Script

Ας δημιουργήσουμε μια επέκταση που αλλάζει το χρώμα φόντου των ιστοσελίδων σε γαλάζιο.

1. Ενημέρωση του Αρχείου Manifest (manifest.json)

Ενημερώστε το `manifest.json` σας με το ακόλουθο περιεχόμενο:

{
  "manifest_version": 3,
  "name": "Παράδειγμα Content Script",
  "version": "1.0",
  "description": "Μια επέκταση που χρησιμοποιεί ένα content script",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Επεξήγηση:

• Η ιδιότητα `"content_scripts"` καθορίζει έναν πίνακα με τα content scripts που θα εισαχθούν στις ιστοσελίδες.
• Το `"matches"` καθορίζει τις διευθύνσεις URL στις οποίες πρέπει να εισαχθεί το content script (`<all_urls>` ταιριάζει με όλες τις διευθύνσεις URL).
• Το `"js"` καθορίζει τη διαδρομή προς το content script (`content.js`).
• Ο πίνακας `"permissions"` περιλαμβάνει τα `"activeTab"` και `"scripting"`, τα οποία απαιτούνται για την εισαγωγή scripts.

2. Δημιουργία ενός Content Script (content.js)

Δημιουργήστε ένα αρχείο με το όνομα `content.js` και προσθέστε τον ακόλουθο κώδικα:

document.body.style.backgroundColor = 'lightblue';

3. Δημιουργία ενός Service Worker (background.js)

Δημιουργήστε ένα αρχείο με το όνομα `background.js` και προσθέστε τον ακόλουθο κώδικα:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

Επεξήγηση:

• Το content script απλά ορίζει το χρώμα φόντου του στοιχείου `body` σε γαλάζιο.
• Ο service worker παρακολουθεί το συμβάν κλικ και εκτελεί μια συνάρτηση μέσα στην τρέχουσα καρτέλα, η οποία αλλάζει το χρώμα του φόντου.

Επαναφορτώστε την επέκταση στον περιηγητή σας. Τώρα, όταν ανοίγετε οποιαδήποτε ιστοσελίδα, το χρώμα του φόντου θα είναι γαλάζιο.

Αποσφαλμάτωση Επεκτάσεων Περιηγητή

Η αποσφαλμάτωση των επεκτάσεων περιηγητή είναι ένα ουσιαστικό μέρος της διαδικασίας ανάπτυξης. Ο Chrome και ο Firefox παρέχουν εξαιρετικά εργαλεία για προγραμματιστές για την αποσφαλμάτωση επεκτάσεων.

Αποσφαλμάτωση στον Chrome:

1. Ανοίξτε τον Chrome και μεταβείτε στο `chrome://extensions`.
2. Ενεργοποιήστε τη "Λειτουργία προγραμματιστή" στην επάνω δεξιά γωνία.
3. Κάντε κλικ στο "Επιθεώρηση προβολών σελίδα υποβάθρου" για την επέκτασή σας. Αυτό θα ανοίξει τα Chrome DevTools για το script υποβάθρου.
4. Για να αποσφαλματώσετε τα content scripts, ανοίξτε την ιστοσελίδα όπου έχει εισαχθεί το content script και, στη συνέχεια, ανοίξτε τα Chrome DevTools για αυτή τη σελίδα. Θα πρέπει να δείτε το content script σας να αναφέρεται στον πίνακα "Πηγές".

Αποσφαλμάτωση στον Firefox:

1. Ανοίξτε τον Firefox και μεταβείτε στο `about:debugging#/runtime/this-firefox`.
2. Βρείτε την επέκτασή σας στη λίστα και κάντε κλικ στο "Επιθεώρηση". Αυτό θα ανοίξει τα Firefox Developer Tools για την επέκταση.
3. Για να αποσφαλματώσετε τα content scripts, ανοίξτε την ιστοσελίδα όπου έχει εισαχθεί το content script και, στη συνέχεια, ανοίξτε τα Firefox Developer Tools για αυτή τη σελίδα. Θα πρέπει να δείτε το content script σας να αναφέρεται στον πίνακα "Αποσφαλματωτής".

Κοινές Τεχνικές Αποσφαλμάτωσης:

• Καταγραφή στην κονσόλα: Χρησιμοποιήστε το `console.log()` για να εκτυπώσετε μηνύματα στην κονσόλα.
• Σημεία διακοπής (Breakpoints): Ορίστε σημεία διακοπής στον κώδικά σας για να παύσετε την εκτέλεση και να επιθεωρήσετε τις μεταβλητές.
• Source maps: Χρησιμοποιήστε source maps για να αποσφαλματώσετε τον κώδικά σας στην αρχική του μορφή, ακόμα κι αν έχει συμπιεστεί ή μεταγλωττιστεί.
• Διαχείριση σφαλμάτων: Εφαρμόστε διαχείριση σφαλμάτων για να εντοπίζετε και να καταγράφετε τα σφάλματα.

Δημοσίευση της Επέκτασής σας

Μόλις αναπτύξετε και δοκιμάσετε την επέκτασή σας, μπορείτε να τη δημοσιεύσετε στο Chrome Web Store ή στο Firefox Add-ons marketplace.

Δημοσίευση στο Chrome Web Store:

1. Δημιουργήστε έναν λογαριασμό προγραμματιστή στο Chrome Web Store.
2. Συσκευάστε την επέκτασή σας σε ένα αρχείο `.zip`.
3. Ανεβάστε το αρχείο `.zip` στο Chrome Web Store.
4. Παρέχετε τα απαιτούμενα μεταδεδομένα, όπως το όνομα, την περιγραφή και τα στιγμιότυπα οθόνης της επέκτασης.
5. Υποβάλετε την επέκτασή σας για έλεγχο.

Δημοσίευση στο Firefox Add-ons Marketplace:

1. Δημιουργήστε έναν λογαριασμό προγραμματιστή στο Firefox Add-ons marketplace.
2. Συσκευάστε την επέκτασή σας σε ένα αρχείο `.zip`.
3. Ανεβάστε το αρχείο `.zip` στο Firefox Add-ons marketplace.
4. Παρέχετε τα απαιτούμενα μεταδεδομένα, όπως το όνομα, την περιγραφή και τα στιγμιότυπα οθόνης της επέκτασης.
5. Υποβάλετε την επέκτασή σας για έλεγχο.

Βέλτιστες Πρακτικές για τη Δημοσίευση:

• Γράψτε μια σαφή και συνοπτική περιγραφή της επέκτασής σας.
• Παρέχετε υψηλής ποιότητας στιγμιότυπα οθόνης και βίντεο για να επιδείξετε τα χαρακτηριστικά της επέκτασής σας.
• Δοκιμάστε την επέκτασή σας διεξοδικά πριν την υποβάλετε.
• Απαντήστε άμεσα στις κριτικές και τα σχόλια των χρηστών.
• Διατηρήστε την επέκτασή σας ενημερωμένη με τις τελευταίες εκδόσεις του περιηγητή και τις ενημερώσεις ασφαλείας.

Ζητήματα Ασφαλείας

Η ασφάλεια είναι μια κρίσιμη πτυχή της ανάπτυξης επεκτάσεων περιηγητή. Οι επεκτάσεις μπορούν δυνητικά να έχουν πρόσβαση σε ευαίσθητα δεδομένα χρηστών και να τροποποιούν το περιεχόμενο ιστοσελίδων, επομένως είναι απαραίτητο να ακολουθείτε τις βέλτιστες πρακτικές ασφαλείας για την προστασία των χρηστών από κακόβουλο κώδικα.

Βασικά Ζητήματα Ασφαλείας:

• Ελαχιστοποίηση δικαιωμάτων: Ζητήστε μόνο τα δικαιώματα που πραγματικά χρειάζεται η επέκτασή σας.
• Επικύρωση εισόδου χρήστη: Εξυγιάνετε και επικυρώστε όλες τις εισόδους από τον χρήστη για να αποτρέψετε επιθέσεις cross-site scripting (XSS).
• Χρήση HTTPS: Χρησιμοποιείτε πάντα HTTPS για την επικοινωνία με απομακρυσμένους διακομιστές.
• Πολιτική Ασφάλειας Περιεχομένου (CSP): Επιβάλλετε μια αυστηρή CSP για να αποτρέψετε την εκτέλεση αυθαίρετου κώδικα.
• Τακτική ενημέρωση της επέκτασής σας: Διατηρήστε την επέκτασή σας ενημερωμένη με τις τελευταίες ενημερώσεις ασφαλείας.

Ακολουθώντας αυτές τις οδηγίες ασφαλείας, μπορείτε να βοηθήσετε να διασφαλίσετε ότι η επέκταση περιηγητή σας είναι ασφαλής για τους χρήστες.

Συμπέρασμα

Η ανάπτυξη επεκτάσεων περιηγητή με τη χρήση του Manifest V3 και των JavaScript APIs προσφέρει έναν ισχυρό τρόπο για την προσαρμογή της εμπειρίας περιήγησης και την προσθήκη νέων λειτουργιών στους περιηγητές ιστού. Κατανοώντας τις βασικές έννοιες, τα APIs και τις βέλτιστες πρακτικές που περιγράφονται σε αυτόν τον οδηγό, μπορείτε να δημιουργήσετε ισχυρές και ασφαλείς επεκτάσεις που ενισχύουν την παραγωγικότητα, βελτιώνουν την ασφάλεια και παρέχουν μια καλύτερη εμπειρία περιήγησης για τους χρήστες παγκοσμίως. Καθώς ο ιστός συνεχίζει να εξελίσσεται, οι επεκτάσεις περιηγητή θα διαδραματίζουν έναν ολοένα και πιο σημαντικό ρόλο στη διαμόρφωση του μέλλοντος των διαδικτυακών αλληλεπιδράσεων. Αξιοποιήστε τις ευκαιρίες που παρουσιάζονται από το Manifest V3 και τον πλούτο των JavaScript APIs για να δημιουργήσετε καινοτόμες και πολύτιμες επεκτάσεις.