From 7723ffc60398137002c8928dcbf4c8bb9c9daa7f Mon Sep 17 00:00:00 2001 From: Fritz Lin Date: Mon, 24 Feb 2025 18:14:25 +0800 Subject: [PATCH] migrated to the latest Manifest-V3 of chrome extension (fix #1) --- background.html | 11 --------- background.js | 66 +++++++++++++++++++++++++++++++++++-------------- manifest.json | 16 ++++++------ offscreen.html | 9 +++++++ offscreen.js | 20 +++++++++++++++ 5 files changed, 85 insertions(+), 37 deletions(-) delete mode 100755 background.html create mode 100644 offscreen.html create mode 100644 offscreen.js diff --git a/background.html b/background.html deleted file mode 100755 index b060e01..0000000 --- a/background.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/background.js b/background.js index 3f8afb4..396b49c 100755 --- a/background.js +++ b/background.js @@ -1,23 +1,51 @@ -var hasSetRain = false,isPlay = false,player = document.getElementById('player'); +let offscreenPromise; +let hasOffscreen = false; +let isPlaying = false; -function togglePlay(){ - if(isPlay){ - isPlay = false; - player.pause(); - chrome.browserAction.setIcon({path: 'assets/sun.png'}); - chrome.browserAction.setTitle({title:'Raining makes everything better!'}); - }else{ - isPlay = true; - player.play(); - chrome.browserAction.setIcon({path: 'assets/rain.png'}); - chrome.browserAction.setTitle({title:"Listen it's raining!"}); +chrome.action.onClicked.addListener(async () => { + if (!isPlaying) { + if (!hasOffscreen) { + // 创建离屏文档 + await ensureOffscreen(); + hasOffscreen = true; } -} + // 发送消息给离屏文档开始播放 + await chrome.runtime.sendMessage({ action: 'play' }); + isPlaying = true; + chrome.action.setIcon({ path: 'assets/rain.png' }); + chrome.action.setTitle({ title: "Listen it's raining!" }); + } else { + // 发送消息给离屏文档停止播放 + await chrome.runtime.sendMessage({ action: 'pause' }); + isPlaying = false; + chrome.action.setIcon({ path: 'assets/sun.png' }); + chrome.action.setTitle({ title: 'Raining makes everything better!' }); + } +}); -chrome.browserAction.onClicked.addListener(function(tab) { - if(!hasSetRain){ - player.setAttribute('src','assets/Raining.mp3'); - hasSetRain = true; - } - togglePlay(); +// 监听离屏文档关闭的消息 +chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { + if (message.action === 'closed') { + hasOffscreen = false; + isPlaying = false; + chrome.action.setIcon({ path: 'assets/sun.png' }); + chrome.action.setTitle({ title: 'Raining makes everything better!' }); + } }); + +// fix: Error: Only a single offscreen document may be created. +async function ensureOffscreen() { + if (offscreenPromise) { + return await offscreenPromise; + } + offscreenPromise = chrome.offscreen.createDocument({ + url: 'offscreen.html', + reasons: ['AUDIO_PLAYBACK'], + justification: 'Play rain sound' + }); + try { + await offscreenPromise; + } finally { + offscreenPromise = null; + } +} diff --git a/manifest.json b/manifest.json index 29330bd..cd3e922 100755 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "It's Raining" - ,"version":"1.6" - ,"manifest_version":2 + ,"version":"3.0" + ,"manifest_version":3 ,"description":"Rain Makes Everything Better" ,"icons":{ @@ -9,16 +9,18 @@ ,"48":"assets/48.png" ,"128":"assets/128.png" } - ,"browser_action": { + ,"action": { "default_icon": "assets/sun.png" - ,"default_title":"Raining Makes Everything Better" + ,"default_title":"Raining makes everything better!" } ,"permissions":[ - "background" + "offscreen" ] - ,"options_page": "options.html" + ,"options_ui": { + "page": "options.html" + } ,"background": { - "page":"background.html" + "service_worker": "background.js" } } diff --git a/offscreen.html b/offscreen.html new file mode 100644 index 0000000..0f22990 --- /dev/null +++ b/offscreen.html @@ -0,0 +1,9 @@ + + + + Offscreen Document + + + + + diff --git a/offscreen.js b/offscreen.js new file mode 100644 index 0000000..4b43156 --- /dev/null +++ b/offscreen.js @@ -0,0 +1,20 @@ +let audio; + +chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { + if (message.action === 'play') { + if (!audio) { + audio = new Audio(chrome.runtime.getURL('assets/Raining.mp3')); + audio.loop = true; + } + audio.play(); + } else if (message.action === 'pause') { + if (audio) { + audio.pause(); + } + } +}); + +// 监听离屏文档关闭事件 +window.addEventListener('beforeunload', () => { + chrome.runtime.sendMessage({ action: "closed" }); // 通知 Service Worker 离屏文档已关闭 +});