migrated to the latest Manifest-V3 of chrome extension (fix beiyuu#1)

fritx · fritx · commit 7723ffc60398 · 2025-02-24T18:26:02.000+08:00
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 离屏文档已关闭
+});

Original file line number	Diff line number	Diff line change
`@@ -1,24 +1,26 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "It's Raining"`
`3`		`- ,"version":"1.6"`
`4`		`- ,"manifest_version":2`
	`3`	`+ ,"version":"3.0"`
	`4`	`+ ,"manifest_version":3`
`5`	`5`	`,"description":"Rain Makes Everything Better"`
`6`	`6`
`7`	`7`	`,"icons":{`
`8`	`8`	`"16":"assets/16.png"`
`9`	`9`	`,"48":"assets/48.png"`
`10`	`10`	`,"128":"assets/128.png"`
`11`	`11`	`}`
`12`		`- ,"browser_action": {`
	`12`	`+ ,"action": {`
`13`	`13`	`"default_icon": "assets/sun.png"`
`14`		`- ,"default_title":"Raining Makes Everything Better"`
	`14`	`+ ,"default_title":"Raining makes everything better!"`
`15`	`15`	`}`
`16`	`16`	`,"permissions":[`
`17`		`- "background"`
	`17`	`+ "offscreen"`
`18`	`18`	`]`
`19`	`19`
`20`		`- ,"options_page": "options.html"`
	`20`	`+ ,"options_ui": {`
	`21`	`+ "page": "options.html"`
	`22`	`+ }`
`21`	`23`	`,"background": {`
`22`		`- "page":"background.html"`
	`24`	`+ "service_worker": "background.js"`
`23`	`25`	`}`
`24`	`26`	`}`