Adicionar um pop-up
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Um pop-up é uma ação que mostra uma janela que permite aos usuários invocar vários recursos de extensão. Ela é acionada por um atalho de teclado ou pelo clique no ícone de ação da extensão. Os pop-ups são fechados automaticamente quando o usuário foca em uma parte do navegador fora deles. Não será possível manter o pop-up aberto depois que o usuário sair.
A imagem a seguir, retirada do exemplo Drink Water Event , mostra um pop-up exibindo as opções de timer disponíveis. Os usuários definem um alarme clicando em um dos botões.
Exemplo de pop-up.
Registre um pop-up no manifesto na chave "action"
.
{
"na me ": "Dri n k Wa ter Eve nt ",
...
"ac t io n ": {
"de fault _popup ": "popup.h t ml "
}
...
}
Implemente o pop-up da mesma forma que faria com qualquer outra página da Web. Qualquer JavaScript usado em um pop-up precisa estar em um arquivo separado.
<html>
<head>
<title>Water Popup</title>
</head>
<body>
<img src="./stay_hydrated.png" id="hydrateImage">
<button id="sampleSecond" value="0.1">Sample Second</button>
<button id="min15" value="15">15 Minutes</button>
<button id="min30" value="30">30 Minutes</button>
<button id="cancelAlarm">Cancel Alarm</button>
<script src="popup.js"></script>
</body>
</html>
Você também pode criar pop-ups de forma dinâmica chamando action.setPopup()
.
chrome . storage . local . get ( 'signed_in ', ( data ) = > {
if ( data . signed_in ) {
chrome . action . setPopup ({ popup : 'popup . html '});
} else {
chrome . action . setPopup ({ popup : 'popup_sign_in . html '});
}
});
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons , e as amostras de código são licenciadas de acordo com a Licença Apache 2.0 . Para mais detalhes, consulte as políticas do site do Google Developers . Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2023-12-12 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Não contém as informações de que eu preciso"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Muito complicado / etapas demais"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Desatualizado"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema na tradução"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema com as amostras / o código"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Outro"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Fácil de entender"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Meu problema foi resolvido"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Outro"
}]
{"lastModified": "\u00daltima atualiza\u00e7\u00e3o 2023-12-12 UTC."}
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2023-12-12 UTC."],[],[]]