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 离屏文档已关闭
+});