beiyuu · fritx · Feb 24, 2025
diff --git a/background.html b/background.html
diff --git 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
@@ -1,24 +1,26 @@
 {
     "name": "It's Raining"
-    ,"version":"1.6"
-    ,"manifest_version":2
+    ,"version":"3.0"
+    ,"manifest_version":3
     ,"description":"Rain Makes Everything Better"
 
     ,"icons":{
         "16":"assets/16.png"
         ,"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
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Offscreen Document</title>
+</head>
+<body>
+  <script src="offscreen.js"></script>
+</body>
+</html>
diff --git a/offscreen.js 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 离屏文档已关闭
+});