pessoa github
Em JavaScript, você pode usar bluros focuseventos e para detectar se uma página perdeu ou ganhou foco. Esses eventos podem ser usados para objetos windowou document.
Usar blureventos
O evento é disparado quando a página perde o foco blur. Você pode adicionar um ouvinte de evento como este:
window.addEventListener('blur', function() {
console.log('Page is out of focus');
// 在这里保存localStorage或执行其他操作
});
Usar focuseventos
Por outro lado, quando a página ganha foco, focuso evento é disparado:
window.addEventListener('focus', function() {
console.log('Page is in focus');
// 在这里加载localStorage或执行其他操作
});
Exemplo abrangente
Aqui está um exemplo abrangente que mostra como realizar ações quando a página perde e ganha foco:
// 当页面失去焦点
window.addEventListener('blur', function() {
console.log('Page is out of focus');
// 在这里保存localStorage
chrome.runtime.sendMessage({
type: 'SAVE_LOCALSTORAGE',
data: {
...localStorage} // 当前页面的localStorage数据
}, (response) => {
console.log(response.status); // 应输出 "Data saved"
});
});
// 当页面获得焦点
window.addEventListener('focus', function() {
console.log('Page is in focus');
// 在这里加载localStorage
chrome.runtime.sendMessage({
type: 'LOAD_LOCALSTORAGE'}, (response) => {
// 加载数据到当前页面的localStorage
Object.assign(localStorage, response.data);
});
});
Dessa forma, sempre que a página perder ou ganhar foco, o evento apropriado será disparado, permitindo salvar ou carregar localStoragedados.
Esta abordagem deve ser totalmente compatível com as tecnologias que você está usando, como Vue3, TypeScript, Tailwind e Manifest V3. Espero que isso ajude você!