Δημιουργία επεκτάσεων Google Chrome με τον στυλίστα υποτίτλων Netflix

Οι στόχοι μας:

• δημιουργία λογικής επέκτασης
• αποθήκευση των ρυθμίσεων στον τοπικό χώρο αποθήκευσης του προγράμματος περιήγησης
• αυτόματη εισαγωγή και ενεργοποίηση επεκτάσεων μόνο στη σελίδα του Netflix
• δημιουργία αναδυόμενου μενού
• δημιουργία φορμών με επιλογές υποτίτλων

Απαιτήσεις:

• βασικές γνώσεις HTML, CSS και JavaScript

Το Netflix μέσω του API του στέλνει κάθε πρόταση υποτίτλων ξεχωριστά. Χρησιμοποιεί στυλ CSS για τη διαμόρφωση των υποτίτλων. Με πρόσβαση στο DOM της σελίδας μπορούμε να χειριστούμε αυτά τα λαμβανόμενα στυλ με την επέκταση του Chrome.

Το μανιφέστο

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

Εδώ είναι μια πλήρης διακήρυξη.

 {
   "name": "Netflix subtitles styler": "Netflix subtitles styler",
   "version": "1.0",
   "description": "Netflix subtitles styler",
   "author": "twistezo",
   "permissions": ["tabs", "storage", "declarativeContent", "https://*.netflix.com/"],
   "background": {
     "scripts": ["background.js"],
     "persistent": false
   },
   "page_action": {
     "default_popup": "popup.html",
     "default_icon": "logo.png"
   },
   "manifest_version": 2
 }

Όπως βλέπετε, έχουμε κάποιες τυπικές πληροφορίες, όπως όνομα, έκδοση, περιγραφή, αρχική σελίδαurl και μανιφέστοέκδοση.

Ένα από τα σημαντικά μέρη του δηλωτικού είναι το τμήμα δικαιωμάτων. Πρόκειται για έναν πίνακα με στοιχεία στα οποία μπορεί να έχει πρόσβαση η επέκτασή μας.

Στην περίπτωσή μας, πρέπει να έχουμε πρόσβαση στις καρτέλες για να βρίσκουμε την ενεργή καρτέλα, να εκτελούμε σενάρια και να στέλνουμε μηνύματα μεταξύ του UI και της επέκτασης. Χρειαζόμαστε storage για την αποθήκευση των ρυθμίσεων της επέκτασης στο πρόγραμμα περιήγησης και declarativeContent για την ανάληψη δράσης ανάλογα με το περιεχόμενο της καρτέλας. Το τελευταίο στοιχείο https://*.netflix.com/ επιτρέπει την πρόσβαση της επέκτασης μόνο στον τομέα netflix.com.

Οι επεκτάσεις του Chrome έχουν ξεχωριστή λογική από το UI, οπότε χρειάζεται να έχουμε το background.scripts, το οποίο λέει στην επέκταση πού μπορεί να βρει τη λογική της. persistent: false σημαίνει ότι αυτό το script θα χρησιμοποιηθεί μόνο αν χρειαστεί. page_action είναι το τμήμα με το τμήμα UI. Έχουμε εδώ ένα απλό αρχείο HTML για ένα αναδυόμενο μενού και το λογότυπο PNG της επέκτασης.

Λογική επέκτασης

Πρώτα πρέπει να ρυθμίσουμε τις συμπεριφορές runtime.onInstalled, να αφαιρέσουμε τυχόν υπάρχοντες κανόνες (για παράδειγμα από παλαιότερες εκδόσεις) και να δηλώσουμε τη λειτουργία για την προσθήκη νέων κανόνων. Χρησιμοποιούμε Local Storage για τις ρυθμίσεις αποθήκευσης, ώστε να μπορούμε να διαθέσουμε τις προεπιλεγμένες ρυθμίσεις μετά την εγκατάσταση της επέκτασης.

Θα χρησιμοποιήσουμε τρεις παραμέτρους στυλ υποτίτλων:

• vPos - κατακόρυφη θέση από το κάτω μέρος [px]
• fSize - μέγεθος γραμματοσειράς [px]
• fColor - χρώμα γραμματοσειράς [HEX]

Δημιουργία background.js:

chrome.runtime.onInstalled.addListener(() => {
chrome.storage.local.set({ vPos: 300, fSize: 24, fColor: "#FFFFFFFF" }),

chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([
// array with rules
]);
});
});
```

Ο στόχος μας είναι να απενεργοποιήσουμε το κουμπί επέκτασης σε όλους τους τομείς εκτός από τους netflix.com. Δημιουργούμε νέο κανόνα με PageStateMatcher όρους και να δηλώσει ShowPageAction όπου θα εκχωρηθεί ο νέος κανόνας.

 {
   conditions: [
     PageStateMatcher({
       pageUrl: { hostSuffix: "netflix.com" }
     })
   ],
   actions: [ShowPageAction()]
 }

Το επόμενο βήμα είναι να προσθέσουμε τον ακροατή tabs.onUpdated, ο οποίος θα εκτελεί το σενάριό μας κατά τη φόρτωση ή την ανανέωση της ενεργής καρτέλας.

 {
   conditions: [
     PageStateMatcher({
       pageUrl: { hostSuffix: "netflix.com" }
     })
   ],
   actions: [ShowPageAction()]
 }

Αρχικά ελέγχουμε ότι το changeInfo.status έχει την κατάσταση complete. Αυτό σημαίνει ότι ο ιστότοπος σε αυτή την καρτέλα έχει φορτωθεί. Στη συνέχεια παίρνουμε τις ρυθμίσεις από το Local Storage και δηλώνουμε ποια δέσμη ενεργειών πρέπει να εκτελεστεί στην τρέχουσα καρτέλα με tabId. Τέλος, στο callback στέλνουμε το μήνυμα με τις ρυθμίσεις από το UI στο script.

Επέκταση UI

Για να δημιουργήσουμε ένα αναδυόμενο μενού επέκτασης με φόρμα, δημιουργούμε τρία αρχεία: popup.html και popup.css με οπτικά επίπεδα και popup.js με λογική για την επικοινωνία μεταξύ του μενού και των απομονωμένων background.js σενάριο.

Ο στόχος του UI μας:

Εδώ έχουμε μια απλή φόρμα HTML με ενσωματωμένη επικύρωση: popup.html:

<code> <!DOCTYPE html>
 <html>
   <head>
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" />
     <link rel="stylesheet" href="popup.css" />
   </head>
   <body>
     <div class="container logo">
       NETFLIX ΥΠΟΤΊΤΛΩΝ STYLER
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Κατακόρυφη θέση από το κάτω μέρος [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Μέγεθος γραμματοσειράς [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Χρώμα γραμματοσειράς [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Αλλαγή</button>
     <input type="hidden" name="trp-form-language" value="el"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Η διαμόρφωση του αναδυόμενου μενού δεν είναι ο στόχος αυτού του άρθρου, γι' αυτό σας προτείνω να επισκεφθείτε την ιστοσελίδα https://github.com/twistezo/netflix-subtitles-styler και αντιγράψτε ολόκληρο το popup.css στο αρχείο σας έργο.

Λογική UI - popup.js:

const form = document.getElementById("popup-form"),
const inputElements = ["vPos", "fSize", "fColor"],

chrome.storage.local.get(inputElements, data => {
inputElements.forEach(el => {
document.getElementById(el).value = data[el],
});
});

form.addEventListener("submit", event => {
event.preventDefault(),
const [vPos, fSize, fColor] = [...inputElements.map(el => event.target[el].value)],

chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
chrome.storage.local.set({ vPos, fSize, fColor }),
chrome.tabs.executeScript(
tabs[0].id,
{
file: "script.js"
},
() => {
const error = chrome.runtime.lastError,
if (error) "Error. ID καρτέλας: " + tab.id + ": " + JSON.stringify(error),

    chrome.tabs.sendMessage(tabs[0].id, { vPos, fSize, fColor }),
  }
);

});
});
```

Στην παραπάνω δέσμη ενεργειών, φορτώνουμε ρυθμίσεις από το Local Storage και τις συνδέουμε με τις εισόδους της φόρμας. Στη συνέχεια, δημιουργούμε ακροατή στην υποβολή συμβάν με συναρτήσεις για την αποθήκευση των ρυθμίσεων στην τοπική αποθήκευση και την αποστολή τους με μήνυμα στο σενάριό μας. Όπως βλέπετε, χρησιμοποιούμε την Τοπική Αποθήκευση σε κάθε στοιχείο. Η επέκταση του Chrome δεν διαθέτει δικό της χώρο δεδομένων, οπότε η απλούστερη λύση είναι να χρησιμοποιήσουμε τον τοπικό χώρο του προγράμματος περιήγησης, όπως το Local Storage. Χρησιμοποιούμε επίσης συχνά το sendMessage λειτουργία. Προκαλείται από την αρχιτεκτονική των επεκτάσεων Chromme - έχουν ξεχωριστή λογική από το UI.

Το σενάριο

Τώρα ήρθε η ώρα να δημιουργήσετε script.js με λογική για το χειρισμό των στυλ υποτίτλων του Netflix.

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

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
   // function for manipulating styles
 });

Στη συνέχεια, στο ίδιο αρχείο δημιουργούμε τη συνάρτηση για την αλλαγή των κατάλληλων στυλ Netflix στα δικά μας στυλ σε πραγματικό χρόνο.

changeSubtitlesStyle = (vPos, fSize, fColor) => {
console.log("%cnetflix-subtitles-styler : ο παρατηρητής λειτουργεί... ", "color: red;"),

callback = () => {
// .player-timedText
const subtitles = document.querySelector(".player-timedtext"),
if (subtitles) {
subtitles.style.bottom = vPos + "px",

  // .player-timedtext > .player-timedtext-container [0]
  const firstChildContainer = subtitles.firstChild,
  if (firstChildContainer) {
    // .player-timedtext > .player-timedtext-container [0] > div
    const firstChild = firstChildContainer.firstChild,
    if (firstChild) {
      firstChild.style.backgroundColor = "transparent",
    }

    // .player-timedtext > .player-timedtext-container [1]
    const secondChildContainer = firstChildContainer.nextSibling,
    if (secondChildContainer) {
      for (const span of secondChildContainer.childNodes) {
        // .player-timedtext > .player-timedtext-container [1] > span
        span.style.fontSize = fSize + "px",
        span.style.fontWeight = "normal",
        span.style.color = fColor,
      }
      secondChildContainer.style.left = "0",
      secondChildContainer.style.right = "0",
    }
  }
}

};

const observer = new MutationObserver(callback),
observer.observe(document.body, {
subtree: true,
attributes: false,
childList: true
});
};
```

Για το Netflix, κάθε φορά που λαμβάνει ολόκληρες προτάσεις υποτίτλων, αλλάζει μόνο το τμήμα των υποτίτλων του DOM της σελίδας. Έτσι πρέπει να χρησιμοποιήσουμε μια συνάρτηση παρατηρητή όπως MutationObserver, το οποίο θα ενεργοποιήσει το changeSubtitlesStyle κάθε φορά που το DOM της σελίδας έχει αλλάξει. Στο callback βλέπουμε απλό χειρισμό των στυλ. Οι σχολιασμένες γραμμές έχουν πληροφορίες σχετικά με το πού μπορείτε να βρείτε τα κατάλληλα στυλ.

Ώρα για τρέξιμο

Υποθέτω ότι δεν έχετε λογαριασμό προγραμματιστή στο Chrome Webstore. Έτσι, για να εκτελέσετε αυτή την επέκταση μεταβείτε στη διεύθυνση chrome://extensions/ στο Chrome σας, κάντε κλικ στο Φορτίο χωρίς συσκευασία, επιλέξτε το φάκελο με την επέκταση και αυτό είναι όλο! Στη συνέχεια, προφανώς πηγαίνετε στη σελίδα του Netflix για να το δοκιμάσετε.

Συμπεράσματα

Όπως βλέπετε, είναι εύκολο να αρχίσετε να δημιουργείτε κάποιες επεκτάσεις που διευκολύνουν τη ζωή σας. Το πιο σημαντικό μέρος είναι να κατανοήσετε την αρχιτεκτονική του Google Chrome Extension divided και την επικοινωνία μεταξύ των στοιχείων. Αυτός ο στυλίστας υποτίτλων είναι μόνο μια απλή επίδειξη του τι μπορείτε να κάνετε με το Chrome Extension API.

Όπως βλέπετε, είναι εύκολο να αρχίσετε να δημιουργείτε κάποιες επεκτάσεις που διευκολύνουν τη ζωή σας. Το πιο σημαντικό μέρος είναι να κατανοήσετε την αρχιτεκτονική του Google Chrome Extension divided και την επικοινωνία μεταξύ των στοιχείων. Αυτός ο στυλίστας υποτίτλων είναι μόνο μια απλή επίδειξη του τι μπορείτε να κάνετε με το API της επέκτασης Chrome.

Φανταστείτε να ενισχύετε την εμπειρία προβολής σε πλατφόρμες όπως το Netflix με τη δύναμη των επεκτάσεων. Για παράδειγμα, το δημοφιλές Πάρτι Netflix επιτρέπει στους χρήστες να παρακολουθούν περιεχόμενο μαζί με συγχρονισμό. Ένα εικονίδιο επέκτασης στη γραμμή εργαλείων σας μπορεί να σας παρέχει γρήγορη πρόσβαση σε λειτουργίες ελέγχου όταν ροή Netflix. Η ιδέα πίσω από εργαλεία όπως Netflix Extended είναι να προσθέσετε περισσότερη λειτουργικότητα απευθείας στο Εφαρμογή Netflix μέσω του Επέκταση Netflix ενσωματωμένο στο Chrome. Κατά την περιήγηση στο Ιστοσελίδα Netflix, τέτοιες επεκτάσεις μπορούν να βοηθήσουν τους χρήστες στην πλοήγηση μέσω Κατηγορίες Netflix αποτελεσματικότερα ή ακόμη και ανακαλύπτοντας κρυφές Περιεχόμενο Netflix που δεν θα συναντούσαν διαφορετικά.

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

Χρήσιμοι σύνδεσμοι:

• Αποθετήριο με αυτό το έργο https://github.com/twistezo/netflix-subtitles-styler
• Επίσημος οδηγός της Google https://developer.chrome.com/extensions/overview
• API επέκτασης Chrome https://developer.chrome.com/extensions/api_index