Criar um tutorial de extensão, parte 2
Para ver a origem do pacote de extensão concluída para esta parte do tutorial, aceda a MicrosoftEdge-Extensions repo > extension-getting-started-part2.
O código fonte foi atualizado do Manifesto V2 para o Manifesto V3.
Este tutorial abrange as seguintes tecnologias de extensão:
- Injetar bibliotecas JavaScript numa extensão.
- Expor recursos de extensão a separadores do browser.
- Incluindo páginas de conteúdo nos separadores do browser existentes.
- Fazer com que as páginas de conteúdo ouçam mensagens de pop-ups e respondam.
Irá aprender a atualizar o menu de pop-up para substituir a imagem de estrelas estáticas por um título e um botão HTML padrão. Esse botão, quando selecionado, transmite essa imagem de estrelas para a página de conteúdo. Esta imagem está agora incorporada na extensão e inserida no separador ativo do browser. Eis os passos.
Estes passos requerem que conclua os passos para os passos iniciais do pacote de extensão. Para o tutorial, aceda a MicrosoftEdge-Extensions repo > extension-getting-started-part1.
Passo 1: Atualizar pop-up.html para incluir um botão
Na pasta de pop-up onde criou o popup.html ficheiro a partir da parte inicial do tutorial, irá adicionar etiquetas que apresentem um título com um botão. Posteriormente, irá programar esse botão num passo diferente, mas por enquanto inclui uma referência a um ficheiro popup.jsJavaScript vazio.
Segue-se um ficheiro HTML atualizado de exemplo:
<html>
<head>
<meta charset="utf-8" />
<style>
body {
width: 500px;
}
button {
background-color: #336dab;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Display the NASA picture of the day</h1>
<h2>(select the image to remove)</h2>
<button id="sendmessageid">Display</button>
<script src="popup.js"></script>
</body>
</html>
Depois de atualizar e abrir a extensão, é aberto um pop-up com um botão de visualização.
Passo 2: Atualizar popup.html para apresentar a imagem na parte superior do separador do browser
Depois de adicionar o botão, a tarefa seguinte é fazê-lo apresentar o images/stars.jpeg ficheiro de imagem na parte superior da página do separador ativo.
Cada página de separador (e extensão) é executada no seu próprio thread. Crie um script de conteúdo que seja injetado na página de separador. Em seguida, envie uma mensagem do seu pop-up para esse script de conteúdo em execução na página de separador. O script de conteúdo receberá a mensagem, que descreve a imagem que deve ser apresentada.
Passo 3: Criar o JavaScript de pop-up para enviar uma mensagem
Crie o popup/popup.js ficheiro e adicione código para enviar uma mensagem para o script de conteúdo ainda não criado que tem de criar e injetar momentaneamente no separador do browser. Para tal, o código seguinte adiciona um onclick evento ao botão de apresentação de pop-up:
const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
sendMessageId.onclick = function() {
// do something
};
}
onclick No evento, localize o separador atual do browser. Em seguida, utilize a chrome.tabs.sendmessage API de Extensão para enviar uma mensagem para esse separador.
Nessa mensagem, tem de incluir o URL na imagem que pretende apresentar. Certifique-se de que envia um ID exclusivo para atribuir à imagem inserida.
Para enviar um ID exclusivo para atribuir à imagem inserida, são possíveis algumas abordagens diferentes:
- Abordagem 1: Permitir que o JavaScript de inserção de conteúdo gere esse ID de imagem. Não vamos utilizar esta abordagem aqui, por razões que se tornam evidentes mais tarde.
- Abordagem 2: gere esse ID exclusivo aqui no e, em
popup.jsseguida, transmita esse ID para o script de conteúdo ainda não criado. Vamos utilizar esta abordagem.
O código seguinte descreve o código atualizado em popup/popup.js. Também transmite o ID do separador atual, que é utilizado mais adiante neste artigo:
const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
sendMessageId.onclick = function() {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(
tabs[0].id,
{
url: chrome.runtime.getURL("images/stars.jpeg"),
imageDivId: `${guidGenerator()}`,
tabId: tabs[0].id
},
function(response) {
window.close();
}
);
function guidGenerator() {
const S4 = function () {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}
});
};
}
Passo 4: Disponibilizar a partir stars.jpeg de qualquer separador do browser
Para disponibilizar images/stars.jpeg a partir de qualquer separador do browser, tem de utilizar a chrome.runtime.getURL API.
Nota: se estiver a utilizar o Manifesto V2, utilize chrome.extension.getURL. Esse prefixo adicional é devolvido com getURL a imagem anexada e tem um aspeto semelhante ao seguinte: httpextension://inigobacliaghocjiapeaaoemkjifjhp/images/stars.jpeg
O motivo é que está a injetar a imagem com o src atributo do img elemento na página de conteúdo. A página de conteúdo está em execução num thread exclusivo que não é o mesmo que o thread que executa a Extensão. Tem de expor o ficheiro de imagem estática como um recurso Web para que funcione corretamente.
Adicione outra entrada no manifest.json ficheiro para declarar que a imagem está disponível para todos os separadores do browser. Essa entrada é a seguinte (deverá vê-la no ficheiro completo manifest.json abaixo quando adicionar a declaração de script de conteúdo a seguir):
"web_accessible_resources": [
{
"resources": ["images/*.jpeg"],
"matches": ["<all_urls>"]
}
]
Agora, escreveu o código no ficheiro popup.js para enviar uma mensagem para a página de conteúdo incorporada na página do separador ativo atual, mas ainda não criou e injetou essa página de conteúdo. Faça-o agora.
Passo 5: Atualizar o seu manifest.json para novos conteúdos e acesso à Web
A atualização manifest.json que inclui o e web_accessible_resources é a content-scripts seguinte:
{
"name": "NASA picture of the day viewer",
"version": "0.0.0.1",
"manifest_version": 3,
"description": "An extension to display the NASA picture of the day.",
"icons": {
"16": "icons/nasapod16x16.png",
"32": "icons/nasapod32x32.png",
"48": "icons/nasapod48x48.png",
"128": "icons/nasapod128x128.png"
},
"action": {
"default_popup": "popup/popup.html"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["lib/jquery.min.js","content-scripts/content.js"]
}
],
"web_accessible_resources": [
{
"resources": ["images/*.jpeg"],
"matches": ["<all_urls>"]
}
]
}
O matches atributo está definido como <all_urls>, o que significa que todos os ficheiros no são injetados em content_scripts todas as páginas de separador do browser quando cada separador é carregado. Os tipos de ficheiro permitidos que podem ser injetados são JavaScript e CSS. Também adicionou lib\jquery.min.js. Pode incluí-lo a partir da transferência mencionada na parte superior da secção.
Adicionar jQuery
Nos scripts de conteúdo que está a injetar, planeie utilizar jQuery ($). Adicionou uma versão mínima do jQuery e colocou-a no pacote de Extensão como lib\jquery.min.js. Estes scripts de conteúdo são executados em sandboxes individuais, o que significa que o jQuery injetado na popup.js página não é partilhado com o conteúdo.
Compreender o Thread
Tenha em atenção que, mesmo que o separador do browser tenha JavaScript em execução na página Web carregada, qualquer conteúdo que seja injetado não tem acesso a esse JavaScript. O JavaScript injetado só tem acesso ao DOM real que é carregado nesse separador do browser.
Passo 6: adicionar o serviço de escuta de mensagens de script de conteúdo
Eis o content-scripts\content.js ficheiro que é injetado em todas as páginas de separadores do browser com base na sua manifest.jsoncontent-scripts secção:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
$("body").prepend(
`<img src="${request.url}" id="${request.imageDivId}"
class="slide-image" /> `
);
$("head").prepend(
`<style>
.slide-image {
height: auto;
width: 100vw;
}
</style>`
);
$(`#${request.imageDivId}`).click(function() {
$(`#${request.imageDivId}`).remove(`#${request.imageDivId}`);
});
sendResponse({ fromcontent: "This message is from content.js" });
});
Repare que tudo o que o JavaScript acima faz é registar um listener com o método da chrome.runtime.onMessage.addListener API de Extensão. Este serviço de escuta aguarda mensagens como a que enviou a popup.js partir do descrito anteriormente com o chrome.tabs.sendMessage método da API de Extensão.
O primeiro parâmetro do addListener método é uma função cujo primeiro parâmetro, pedido, são os detalhes da mensagem que está a ser transmitida. Lembre-se, em popup.js, quando utilizou o sendMessage método , esses atributos do primeiro parâmetro são url e imageDivId.
Quando um evento é processado pelo serviço de escuta, a função que é o primeiro parâmetro é executada. O primeiro parâmetro dessa função é um objeto que tem atributos atribuídos por sendMessage. Essa função processa simplesmente as três linhas de script jQuery.
A primeira linha de script acrescenta um
imgelemento diretamente abaixo do separador dobodybrowser que tem aslide-imageclasse atribuída, bem como oimageDivIdID desse elemento de imagem.A segunda linha de script insere dinamicamente no cabeçalho do DOM uma <secção de estilo> que tem de atribuir como uma
slide-imageclasse ao seuimgelemento.A terceira linha de script adiciona um
clickevento que abrange toda a imagem, permitindo ao utilizador selecionar qualquer parte da imagem e essa imagem é removida da página (juntamente com a mesma é o serviço de escuta de eventos).
- Adicionar funcionalidade para remover a imagem apresentada quando selecionada
Agora, quando navega para qualquer página e seleciona o ícone da Extensão , o menu de pop-up é apresentado da seguinte forma:
Quando seleciona o Display botão, obtém o que está abaixo. Se selecionar qualquer parte da stars.jpeg imagem, esse elemento de imagem é removido e as páginas de separador voltam ao que foi originalmente apresentado:
Parabéns! Criou uma Extensão que envia com êxito uma mensagem a partir do pop-up do ícone de extensão e inseriu dinamicamente JavaScript em execução como conteúdo no separador do browser. O conteúdo injetado define o elemento de imagem para apresentar o ficheiro de estrelas .jpeg estáticas.