Loo Google Chrome'i laiendused Netflixi subtiitrite stiiliga

Meie eesmärgid:

• luua laiendusloogika
• salvestada seaded brauseri kohalikku salvestusruumi
• automaatne laadimine ja laienduste aktiveerimine ainult Netflixi lehel
• luua hüpikmenüü
• luua vormid koos subtiitritega

Nõuded:

• põhiteadmised HTML, CSS ja JavaScript

Netflix saadab oma API kaudu iga subtiitri lause eraldi. Subtiitrite kujundamiseks kasutatakse CSS-stiile. Juurdepääsuga lehe DOMile saame neid saadud stiile Chrome'i laiendusega manipuleerida.

Manifest

Kõigepealt peame looma manifesti faili nimega manifest.json. See teatab brauserile laienduse seadistustest, näiteks UI-failidest, taustaskriptidest ja võimalustest, mida laiendus võib omada.

Siin on täielik manifest.

 {
   "name": "Netflixi subtiitrite stiilimängija": "Netflixi subtiitrid",
   "version": "1.0",
   "description": "Netflix subtiitrite stiileri",
   "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
 }

Nagu näete, on meil olemas mõned standardandmed, nagu nimi, versioon, kirjeldus, kodulehturl ja manifestversioon.

Manifesti üks oluline osa on õiguste osa. See on massiivi elementidega, millele meie laiendus saab juurdepääsu.

Meie puhul on meil vaja juurdepääsu vahekaartidele, et leida aktiivne vahekaart, käivitada skripte ja saata sõnumeid kasutajaliidese ja laienduse vahel. Meil on vaja salvestusruumi laiendussätete salvestamiseks brauseris ja declarativeContent tegevuste tegemiseks sõltuvalt vahekaardi sisust. Viimane element https://*.netflix.com/ võimaldab laiendusele juurdepääsu ainult netflix.com domeenile.

Chrome'i laiendustel on kasutajaliidese loogika eraldi, seega on meil vaja background.scripts, mis ütleb laiendusele, kust ta leiab oma loogika. persistent: false tähendab, et seda skripti kasutatakse ainult vajadusel. page_action on lõik, kus on kasutajaliidese osa. Meil on siin lihtne HTML-fail hüpikmenüü ja laienduse PNG logo jaoks.

Laiendusloogika

Kõigepealt tuleb seadistada runtime.onInstalled käitumisviisid, eemaldada kõik praegused reeglid (näiteks vanematest versioonidest) ja deklareerida funktsioon uute reeglite lisamiseks. Me kasutame salvestussätete jaoks Local Storage, et saaksime pärast laienduse paigaldamist määrata vaikimisi seaded.

Me kasutame kolme alapealkirja stiiliparameetrit:

• vPos - vertikaalne asend altpoolt [px]
• fSize - kirjasuurus [px]
• fColor - kirjavärv [HEX]

Loo 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([
// massiivi reeglitega
]);
});
});
```

Meie reegli eesmärk on keelata laiendamisnupp kõikides domeenides, välja arvatud netflix.com. Loome uue reegli koos PageStateMatcher tingimused ja deklareerida ShowPageAction kus määratakse uus reegel.

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

Järgmine samm on lisada tabs.onUpdated kuulaja, mis täidab meie skripti aktiivse vahekaardi laadimisel või värskendamisel.

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

Kõigepealt kontrollime, et changeInfo.status on olekuga complete. See tähendab, et sellel vahekaardil olev veebileht on laetud. Seejärel saame seaded Local Storage'ist ja deklareerime, millist skripti tuleks jooksvalt tabId-ga tab'ile käivitada. Lõpuks saadame callbackis skriptile sõnumi koos seadistustega UI-st.

Laienduse kasutajaliides

Laienduse hüpikmenüü koos vormiga loomiseks loome kolm faili: popup.html ja popup.css visuaalsete kihtidega ja popup.js loogika menüü ja isoleeritud menüü vaheliseks suhtlemiseks background.js käsikiri.

Meie UI eesmärk:

Siin on meil lihtne HTML-vorm sisseehitatud valideerimisega: 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 SUBTIITRID STYLER
     </div>
     <form id="popup-form" class="container" action="">
       <div class="input-info">Vertikaalne asend altpoolt [px]</div>
       <input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
       <div class="input-info">Kirjasuurus [px]</div>
       <input id="fSize" type="number" value="" min="0" max="300" />
       <div class="input-info">Kirjatüübi värv [HEX]</div>
       <input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
       <button id="change" type="submit">Muuda</button>
     <input type="hidden" name="trp-form-language" value="et"/></form>
     <div class="container footer">
       © twistezo, 2019
     </div>
     <script src="popup.js"></script>
   </body>
 </html>

Pikendusmenüü kujundamine ei ole selle artikli eesmärk, seega soovitan teil külastada veebisaiti https://github.com/twistezo/netflix-subtitles-styler ja kopeerida kogu popup.css faili oma projekt.

Kasutajaliidese loogika - 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. Tab ID: " + tab.id + ": " + JSON.stringify(error);

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

});
});
```

Ülaltoodud skriptis laadime seaded kohalikust salvestusruumist ja kinnitame need vormi sisenditele. Seejärel loome kuulaja esitada sündmus funktsioonidega seadete salvestamiseks kohalikku salvestusseadmesse ja saata need sõnumiga meie skriptile. Nagu näete, kasutame igas komponendis Local Storage'i. Chrome'i laiendil ei ole oma andmeruumi, seega on kõige lihtsam lahendus kasutada brauseri lokaalset ruumi nagu Local Storage. Samuti kasutame sageli sendMessage funktsioon. Selle põhjuseks on Chromme'i laienduste arhitektuur - neil on kasutajaliidese loogika eraldi.

Stsenaarium

Nüüd on aeg luua script.js loogikaga Netflixi subtiitrite stiilide manipuleerimiseks.

Kõigepealt loome onMessage kuulaja, mis võtab vastu laienduse seadistustega sõnumeid.

 chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => { {
   // funktsioon stiilide manipuleerimiseks
 });

Seejärel loome samas failis funktsiooni, et muuta õigeid Netflixi stiile reaalajas meie stiilideks.

changeSubtitlesStyle = (vPos, fSize, fColor) => {
console.log("%cnetflix-subtitles-styler : vaatleja töötab... ", "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,
atribuudid: false,
childList: true
});
};
```

Netflixi puhul vahetab ta iga kord, kui ta saab terved subtiitrite laused, ainult lehekülje DOM-i subtiitrite osa. Seega peame kasutama vaatleja funktsiooni nagu MutationObserver, mis käivitab meie changeSubtitlesStyle funktsiooni iga kord, kui lehekülje DOM on muutunud. In the callback funktsiooni näeme lihtsat stiilide manipuleerimist. Kommenteeritud ridades on teave selle kohta, kust saab leida õigeid stiile.

Aeg joosta

Eeldan, et teil ei ole Chrome Webstore'is arendajakontot. Nii et selle laienduse käivitamiseks minge aadressile chrome://extensions/ oma Chrome'is, klõpsake Koormus lahtipakitud, valige laiendiga kaust ja ongi kõik! Seejärel minge ilmselt Netflixi lehele selle testimiseks.

Järeldused

Nagu näete, on lihtne hakata looma mõningaid laiendusi, mis muudavad elu lihtsamaks. Kõige olulisem on mõista Google Chrome'i laienduste jagatud arhitektuuri ja komponentide vahelist suhtlust. See subtiitrite stiilimängija on vaid lihtne demo sellest, mida saab teha Chrome'i laienduste APIga.

Nagu näete, on lihtne hakata looma mõningaid laiendusi, mis muudavad elu lihtsamaks. Kõige olulisem on mõista Google Chrome'i laienduste jagatud arhitektuuri ja komponentide vahelist suhtlust. See subtiitrite stiilimängija on vaid lihtne demo sellest, mida saab teha Chrome'i laienduste APIga.

Kujutage ette oma vaatamise kogemus platvormidel, nagu Netflix, laienduste abil. Näiteks populaarne Netflixi pidu võimaldab kasutajatel vaadata sisu koos ja sünkroonis. Veebileht laienduse ikoon oma tööriistaribal võib anda teile kiire juurdepääsu kontrollfunktsioonidele, kui Netflixi voogedastus. Selliste vahendite idee nagu Netflix laiendatud on lisada rohkem funktsionaalsust otse Netflixi rakendus läbi Netflixi laiendus integreeritud Chrome'isse. Sirvides Netflixi veebisait, võivad sellised laiendused aidata kasutajatel navigeerida läbi Netflixi kategooriad tõhusamalt või isegi varjatud Netflixi sisu millega nad muidu ei pruugi kokku puutuda.

Lisaks sellele kujutage ette, et saate lisada kohandatud profiilipilt oma Netflixi profiilile või suurema kontrolliga subtiitrite ja taasesituskiiruse üle. Kõigele sellele saab ligi otse Chrome'i veeb brauser, mis muudab üldise Netflixi kogemus rohkem kohandatud iga kasutaja eelistustele. Laiendused mitte ainult ei täiusta veebisaitide, näiteks Netflixi funktsioone, vaid tõstavad ka üldist kasutaja suhtlust, muutes selle kaasahaaravamaks ja kasutajasõbralikumaks.

Kasulikud lingid:

• Repositoorium koos selle projektiga https://github.com/twistezo/netflix-subtitles-styler
• Ametlik Google'i juhend https://developer.chrome.com/extensions/overview
• Chrome'i laienduse API https://developer.chrome.com/extensions/api_index