VOLTAR
Hoje, vamos criar extensões do Google Chrome para manipular os estilos de legendas da Netflix em tempo real. Encontrará informações sobre como criar extensões de raiz, alguns conselhos práticos e pontos de vista gerais sobre a arquitetura das extensões. Se não está satisfeito com as opções de legendas da Netflix disponíveis ou apenas pretende criar rapidamente uma extensão para facilitar a sua vida, este artigo é para si.
A Netflix, através da sua API, envia cada frase de legenda separadamente. Utiliza estilos CSS para estilizar as legendas. Com acesso ao DOM da página, podemos manipular esses estilos recebidos com a extensão do Chrome.
Em primeiro lugar, temos de criar o ficheiro de manifesto chamado manifest.json. Este ficheiro informa o navegador sobre a configuração da extensão, como os ficheiros UI, os scripts de fundo e as capacidades que a extensão pode ter.
Aqui está um manifesto completo.
{
"name": "Estilizador de legendas Netflix",
"versão": "1.0",
"descrição": "Estilizador de legendas Netflix",
"autor": "twistezo",
"permissões": ["tabs", "storage", "declarativeContent", "https://*.netflix.com/"],
"fundo": {
"scripts": ["background.js"],
"persistent" (persistente): false
},
"page_action": {
"default_popup": "popup.html",
"default_icon": "logo.png"
},
"manifest_version": 2
}Como vê, temos algumas informações padrão, como o nome, a versão, a descrição, a página inicialurl e manifestoversão.
Uma das partes importantes do manifesto é a secção de permissões. Esta é uma matriz com elementos a que a nossa extensão pode aceder.
No nosso caso, precisamos de ter acesso aos separadores para encontrar o separador ativo, executar scripts e enviar mensagens entre a IU e a extensão. Precisamos de armazenamento para guardar as definições da extensão no navegador e de declarativeContent para tomar medidas em função do conteúdo do separador. O último elemento https://*.netflix.com/ permite o acesso da extensão apenas ao domínio netflix.com.
As extensões do Chrome têm uma lógica separada da IU, pelo que precisamos de background.scripts, que indica à extensão onde pode encontrar a sua lógica. persistent: false significa que este script será utilizado apenas se necessário. page_action é a secção com a parte da IU. Temos aqui um ficheiro HTML simples para um menu pop-up e um logótipo PNG da extensão.
Primeiro, temos de configurar os comportamentos runtime.onInstalled, remover quaisquer regras actuais (por exemplo, de versões mais antigas) e declarar a função para adicionar novas regras. Utilizamos o Armazenamento local para as definições de armazenamento, para podermos atribuir definições predefinidas depois de a extensão ser instalada.
Iremos utilizar três parâmetros de estilo de legendas:
vPos - posição vertical a partir do fundo [px]fTamanho - tamanho da fonte [px]fCor - cor da fonte [HEX]Criar fundo.js:
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.local.set({ vPos: 300, fSize: 24, fColor: "#FFFFFF" });
chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
chrome.declarativeContent.onPageChanged.addRules([
// matriz com regras
]);
});
});
```O nosso objetivo principal é desativar o botão de extensão em todos os domínios que não sejam netflix.com. Criamos uma nova regra com Matriz de estado da página condições e declarar ShowPageAction onde a nova regra será atribuída.
{
condições: [
novo chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostSuffix: "netflix.com" }
})
],
acções: [new chrome.declarativeContent.ShowPageAction()]
}O próximo passo é adicionar o ouvinte tabs.onUpdated, que executará o nosso script enquanto carrega ou actualiza o separador ativo.
{
condições: [
novo chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostSuffix: "netflix.com" }
})
],
acções: [new chrome.declarativeContent.ShowPageAction()]
}Em primeiro lugar, verificamos se changeInfo.status tem o estado completo. Isto significa que o sítio Web neste separador está carregado. Em seguida, obtemos definições do Armazenamento local e declaramos qual o script que deve ser executado no separador atual com tabId. Por fim, na chamada de retorno, enviamos a mensagem com as definições da IU para o script.
Para criar um menu pop-up de extensão com formulário, criamos três ficheiros: popup.html e popup.css com camadas visuais e popup.js com lógica para a comunicação entre o menu e o isolado fundo.js guião.
O nosso objetivo da IU:
Aqui temos um formulário HTML simples com validação incorporada: 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">
ESTILIZADOR DE LEGENDAS NETFLIX
</div>
<form id="popup-form" class="container" action="">
<div class="input-info">Posição vertical a partir do fundo [px]</div>
<input class="form-control" id="vPos" type="number" value="" min="0" max="5000" />
<div class="input-info">Tamanho do tipo de letra [px]</div>
<input id="fSize" type="number" value="" min="0" max="300" />
<div class="input-info">Cor da fonte [HEX]</div>
<input id="fColor" type="text" value="" pattern="^#[0-9A-F]{6}$" />
<button id="change" type="submit">Alterar</button>
<input type="hidden" name="trp-form-language" value="pt"/></form>
<div class="container footer">
© twistezo, 2019
</div>
<script src="popup.js"></script>
</body>
</html>A estilização do menu pop-up não é o objetivo deste artigo, pelo que sugiro que visite https://github.com/twistezo/netflix-subtitles-styler e copiar todo o popup.css no seu ficheiro projeto.
Lógica da IU - 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) "Erro. ID do separador: " + tab.id + ": " + JSON.stringify(error);
chrome.tabs.sendMessage(tabs[0].id, { vPos, fSize, fColor });
}
);
});
});
```No script acima, carregamos as definições do Armazenamento local e anexamo-las às entradas do formulário. Em seguida, criamos um ouvinte para apresentar com funções para guardar definições no Armazenamento local e enviá-las por mensagem para o nosso script. Como vê, utilizamos o Armazenamento local em todos os componentes. A extensão do Chrome não tem o seu próprio espaço de dados, pelo que a solução mais simples é utilizar o espaço local do navegador, como o Armazenamento local. Também utilizamos frequentemente o sendMessage função. A causa é a arquitetura das extensões do Chromme - têm uma lógica separada da IU.
Agora é altura de criar script.js com lógica para manipular estilos de legendas Netflix.
Primeiro, criamos onMessage ouvinte para receber mensagens com definições da extensão.
chrome.runtime.onMessage.addListener((message, _sender, _sendResponse) => {
// função para manipular estilos
});Depois, no mesmo ficheiro, criamos a função para alterar os estilos Netflix adequados para os nossos estilos em tempo real.
changeSubtitlesStyle = (vPos, fSize, fColor) => {
console.log("%cnetflix-subtitles-styler : o observador está a funcionar... ", "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;
se (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, {
subárvore: true,
atributos: false,
childList: true
});
};
```Para o Netflix, sempre que recebe frases de legendas completas, troca apenas a parte das legendas do DOM da página. Por isso, temos de usar uma função de observador como MutaçãoObservadorque irá acionar o nosso changeSubtitlesStyle sempre que o DOM da página for alterado. No retorno de chamada vemos uma simples manipulação de estilos. As linhas comentadas contêm informações sobre onde encontrar os estilos corretos.
Presumo que não tenha uma conta de programador na Chrome Webstore. Por isso, para executar esta extensão, vá a chrome://extensions/ no seu Chrome, clique no botão Carga não embaladaselecionar a pasta com a extensão e já está! Depois, obviamente, vá para a página do Netflix para testá-lo.
Como vê, é fácil começar a criar algumas extensões que facilitam a vida. A parte mais importante é compreender a arquitetura dividida da Extensão do Google Chrome e a comunicação entre componentes. Este estilizador de legendas é apenas uma demonstração simples do que pode fazer com a API de extensão do Chrome.
Como vê, é fácil começar a criar algumas extensões que facilitam a vida. A parte mais importante é compreender a arquitetura dividida da Extensão do Google Chrome e a comunicação entre componentes. Este estilizador de legendas é apenas uma demonstração simples do que pode fazer com a API de extensão do Chrome.
Imagine melhorar a sua experiência de visualização em plataformas como a Netflix com o poder das extensões. Por exemplo, o popular Festa Netflix permite aos utilizadores verem conteúdos em conjunto e em sincronia. Uma ícone de extensão na sua barra de ferramentas pode proporcionar-lhe um acesso rápido às funcionalidades de controlo quando streaming Netflix. A ideia subjacente a ferramentas como Netflix alargado é adicionar mais funcionalidades diretamente ao Aplicação Netflix através do Extensão Netflix integrado no Chrome. Ao navegar no Site da NetflixEssas extensões podem ajudar os utilizadores a navegar através de Categorias Netflix de forma mais eficiente ou mesmo descobrir Conteúdo da Netflix que de outra forma não encontrariam.
Além disso, imagine poder adicionar um imagem de perfil personalizada ao seu perfil Netflix ou ter mais controlo sobre as legendas e a velocidade de reprodução. Tudo isto pode ser acedido diretamente a partir do Chrome web navegador, tornando o Experiência Netflix mais adaptadas às preferências de cada utilizador. As extensões não só melhoram as funcionalidades de sítios Web como o Netflix, mas também elevam a interação geral do utilizador, tornando-a mais envolvente e fácil de utilizar.
Portuguese 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Japanese 
Spanish 
Dutch 
Estonian 
Greek 
Czech