Luo Google Chrome -laajennuksia Netflix-tekstitystylerillä

Tavoitteemme:

• luoda laajennuksen logiikka
• tallentaa asetukset selaimen paikalliseen tallennustilaan
• automaattinen lataus ja laajennusten aktivointi vain Netflix-sivulla.
• luo ponnahdusvalikko
• luoda lomakkeita tekstitysvaihtoehdoilla

Vaatimukset:

• perustiedot HTML, CSS ja JavaScript

Netflix lähettää API:nsa avulla jokaisen tekstityslauseen erikseen. Se käyttää CSS-tyylejä tekstitysten muotoiluun. Kun meillä on pääsy sivun DOM:iin, voimme muokata näitä vastaanotettuja tyylejä Chrome-laajennuksen avulla.

Ilmiö

Ensin meidän on luotava manifestitiedosto nimeltä manifest.json. Se kertoo selaimelle laajennuksen asetuksista, kuten käyttöliittymätiedostoista, taustaskripteistä ja mahdollisista laajennuksen ominaisuuksista.

Tässä on täydellinen manifesti.

 {
   "name": "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
 }

Kuten näet, meillä on joitain vakiotietoja, kuten nimi, versio, kuvaus, kotisivu.url ja manifestiversio.

Yksi manifestin tärkeistä osista on käyttöoikeusosio. Tämä on joukko elementtejä, joita laajennuksemme voi käyttää.

Meidän tapauksessamme tarvitsemme pääsyn välilehtiin aktiivisen välilehden löytämiseksi, skriptien suorittamiseksi ja viestien lähettämiseksi käyttöliittymän ja laajennuksen välillä. Tarvitsemme tallennustilaa laajennuksen asetusten tallentamiseen selaimeen ja declarativeContentia välilehden sisällöstä riippuvien toimintojen suorittamiseen. Viimeinen elementti https://*.netflix.com/ sallii laajennuksen pääsyn vain netflix.com-verkkotunnukseen.

Chrome-laajennuksilla on käyttöliittymästä erillinen logiikka, joten tarvitaan background.scripts, joka kertoo laajennukselle, mistä se löytää logiikkansa. persistent: false tarkoittaa, että tätä skriptiä käytetään vain tarvittaessa. page_action on osio, jossa on käyttöliittymäosa. Meillä on tässä yksinkertainen HTML-tiedosto ponnahdusvalikkoa ja laajennuksen PNG-logoa varten.

Laajennuslogiikka

Ensin on määritettävä runtime.onInstalled -käyttäytymistavat, poistettava kaikki nykyiset säännöt (esimerkiksi vanhemmista versioista) ja määritettävä toiminto uusien sääntöjen lisäämiseksi. Käytämme tallennusasetusten tallentamiseen Local Storagea, jotta voimme varata oletusasetukset laajennuksen asennuksen jälkeen.

Käytämme kolmea tekstityylin parametria:

• vPos - pystysuora sijainti pohjasta [px]
• fSize - fonttikoko [px]
• fColor - fontin väri [HEX]

Luo 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, jossa on sääntöjä
]);
});
});
```

Sääntömme tavoitteena on poistaa laajennuspainike käytöstä kaikilla muilla verkkotunnuksilla kuin seuraavilla. netflix.com. Luomme uuden säännön PageStateMatcher edellytykset ja julistaa ShowPageAction jossa uusi sääntö määritetään.

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

Seuraavaksi lisätään tabs.onUpdated-kuuntelija, joka suorittaa skriptimme, kun aktiivinen välilehti ladataan tai päivitetään.

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

Ensin tarkistetaan, että changeInfo.status on tilassa complete. Tämä tarkoittaa, että tämän välilehden verkkosivusto on ladattu. Sitten haemme asetukset paikallisesta tallennustilasta ja ilmoitamme, mikä komentosarja on suoritettava nykyisellä välilehdellä tabId:llä. Lopuksi lähetämme callbackissa viestin asetuksineen käyttöliittymästä skriptille.

Laajennus UI

Luodaksemme ponnahdusvalikon laajennuksen ja lomakkeen, luomme kolme tiedostoa: popup.html ja popup.css visuaalisilla kerroksilla ja popup.js jossa on logiikka valikon ja eristetyn valikon välistä viestintää varten. background.js käsikirjoitus.

UI:n tavoite:

Tässä meillä on yksinkertainen HTML-lomake, jossa on sisäänrakennettu validointi: 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 TEKSTITYKSET STYLER
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Pystysuora sijainti pohjasta [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Kirjasinkoko [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Fontin väri [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Muuta</button>
     <input type="hidden" name="trp-form-language" value="fi"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Ponnahdusvalikon muotoilu ei ole tämän artikkelin tavoite, joten ehdotan, että käyt osoitteessa https://github.com/twistezo/netflix-subtitles-styler ja kopioi koko popup.css tiedostoon projekti.

UI-logiikka - 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) "Virhe. Välilehden ID: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

Yllä olevassa skriptissä lataamme asetukset paikallisesta tallennustilasta ja liitämme ne lomakkeen syötteisiin. Sitten luomme kuuntelijan lähetä tapahtuma, jossa on toimintoja asetusten tallentamiseksi paikalliseen tallennustilaan ja niiden lähettämiseksi viestillä skriptillemme. Kuten näet, käytämme Local Storagea jokaisessa komponentissa. Chrome-laajennuksella ei ole omaa datatilaa, joten yksinkertaisin ratkaisu on käyttää selaimen paikallista tilaa, kuten Local Storagea. Käytämme usein myös sendMessage toiminto. Se johtuu Chromme-laajennusten arkkitehtuurista - niissä on käyttöliittymästä erillinen logiikka.

Käsikirjoitus

Nyt on aika luoda script.js jossa on logiikka Netflix-tekstityylien manipuloimiseksi.

Ensin luodaan onMessage kuuntelija, joka vastaanottaa laajennuksen asetuksia sisältäviä viestejä.

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => { {
   // funktio tyylien käsittelyyn
 });

Sitten luomme samassa tiedostossa toiminnon, jolla oikeat Netflix-tyylit vaihdetaan reaaliaikaisesti meidän tyyliimme.

changeSubtitlesStyle = (vPos, fSize, fColor) => {
console.log("%cnetflix-subtitles-styler : tarkkailija toimii... ", "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
});
};
```

Netflixin kohdalla se vaihtaa joka kerta, kun se vastaanottaa kokonaisia tekstityslauseita, vain tekstitysosan sivun DOM-osasta. Meidän on siis käytettävä tarkkailufunktiota kuten MutationObserver, joka laukaisee meidän changeSubtitlesStyle funktio joka kerta, kun sivun DOM on muuttunut. Vuonna callback funktiossa näemme yksinkertaisen tyylien manipuloinnin. Kommentoiduilla riveillä on tietoa siitä, mistä löydät oikeat tyylit.

Aika juosta

Oletan, että sinulla ei ole kehittäjätiliä Chrome Webstoressa. Joten tämän laajennuksen suorittamiseksi siirry osoitteeseen chrome://extensions/ Chromessa, napsauta Kuormitus pakkaamattomana, valitse kansio, jossa on tiedostopääte, ja se on siinä! Sitten ilmeisesti mene Netflix-sivulle testaamaan sitä.

Päätelmät

Kuten huomaat, on helppo alkaa luoda laajennuksia, jotka helpottavat elämää. Tärkeintä on ymmärtää Google Chromen laajennusten jaettu arkkitehtuuri ja komponenttien välinen viestintä. Tämä tekstitysten tyylittelijä on vain yksinkertainen demo siitä, mitä voit tehdä Chrome Extension API:n avulla.

Kuten huomaat, on helppo alkaa luoda laajennuksia, jotka helpottavat elämää. Tärkeintä on ymmärtää Google Chromen laajennusten jaettu arkkitehtuuri ja komponenttien välinen viestintä. Tämä tekstitysten tyylittelijä on vain yksinkertainen demo siitä, mitä voit tehdä Chrome Extension API:n avulla.

Kuvittele parantaa sinun katselukokemus Netflixin kaltaisilla alustoilla laajennusten avulla. Esimerkiksi suosittu Netflix-juhlat avulla käyttäjät voivat katsoa sisältöä yhdessä synkronoidusti. Osoitteessa laajennuksen kuvake työkalurivilläsi voi tarjota nopean pääsyn ohjausominaisuuksiin, kun Netflixin suoratoisto. Ajatus sellaisten työkalujen takana kuin Netflix laajennettu on lisätä lisää toiminnallisuutta suoraan Netflix-sovellus kautta Netflix-laajennus integroitu Chromeen. Kun selaat Netflixin verkkosivusto, tällaiset laajennukset voivat auttaa käyttäjiä navigoimaan osoitteessa Netflix-kategoriat tehokkaammin tai jopa löytää piilotettuja Netflixin sisältö joihin he eivät ehkä muuten törmäisi.

Kuvittele lisäksi, että voit lisätä mukautettu profiilikuva Netflix-profiiliisi tai tekstityksen ja toistonopeuden parempi hallinta. Kaikki tämä on käytettävissä suoraan Chrome web selaimella, jolloin yleinen Netflix-kokemus räätälöidympää kunkin käyttäjän mieltymysten mukaan. Laajennukset eivät ainoastaan paranna Netflixin kaltaisten verkkosivujen toimintoja, vaan ne myös parantavat yleistä käyttäjävuorovaikutusta ja tekevät siitä entistä vaikuttavamman ja käyttäjäystävällisemmän.

Hyödyllisiä linkkejä:

• Tämän projektin arkisto https://github.com/twistezo/netflix-subtitles-styler
• Virallinen Google-opas https://developer.chrome.com/extensions/overview
• Chrome-laajennus API https://developer.chrome.com/extensions/api_index