Chrome扩展开发：关闭浏览器时清除Popup存储数据的实现

我正在开发一款Chrome扩展，需要实现两个核心功能：关闭Popup时持久化保存Start/Stop按钮的状态，以及关闭浏览器时清除存储的状态并将按钮重置为Start。目前已经实现了Popup关闭时的状态保存，但不知道如何适配现有代码实现浏览器关闭时清除数据的逻辑。

目标需求 #

• 关闭Popup时正确保存状态（已实现）
• 关闭浏览器时清除当前状态并设置为Start（待实现）

现有代码 #

JavaScript代码（popup.js） #

let button = document.querySelector('button');
let options = document.querySelector("#btn-start");

chrome.storage.local.get(['button'], function(status) {
    console.log('Value currently is ' + status.button);
    console.log(typeof(status.button))
      
    if ( status.button === 'Stop') {
        setButtonStop();
    }
});

button.addEventListener("click", changeButtonStatus);

function changeButtonStatus(){
    let buttonStatus = document.querySelector("button").innerText;
    let status = '';

      if ( buttonStatus === 'Start')
        status = setButtonStop();
    
    if ( buttonStatus === 'Stop')
        status = setButtonStart();    

    chrome.storage.local.set({button: status }, function() {
        console.log('Value is set to ' + [status]);
    });
}

function setButtonStop () {
    options.setAttribute("id", "btn-stop");
    button.innerText = "Stop"; 
    return button.innerText; 
}

function setButtonStart () {
    options.setAttribute("id", "btn-start");
    button.innerText = "Start";
    return button.innerText;
}

CSS代码（app.css） #

a:link,
a:visited,
a:hover,
a:active  {
    text-decoration: none;
} 

/* Popup Window */
#modal-popup {
    display: flex;
    flex-direction: column;
    background: gainsboro;
}

#btn-start button {
    width: 100%;
    background: green;
    color:white;
}

#btn-start button:active {
    border-color: green;
    background: rgb(0, 255, 0);
    color: black;
}

#btn-stop button {
    width: 100%;
    background: red;
    color:white;
}

#btn-stop button:active {
    border-color: red;
    background: rgb(148, 0, 0);
    color: rgb(255, 255, 255);
}

#btn-options button {
    width: 100%;
    background: white;
    border: 0;
}

#btn-options button:active {
    background-color: transparent;
    animation: rotate 5s infinite;
}

@keyframes rotate {
    0% {
      transform: rotate(-45deg)
    }
    100% {
      transform: rotate(45deg)
    }
  }

HTML代码（popup.html） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="app.css">
    <title>Popup</title>
</head>
<body>
    <div id="modal-popup">
        <div id="btn-start"><button type="button" name="control">Start</button></div>
        <div id="btn-options"><button type="button" name="options"><a href="#">⚙️</a></button></div>   
    </div> 
    <script src="popup.js"></script>
</body>
</html>

Manifest配置（manifest.json） #

{
    "name": "popup tutorial #1",
    "description": "persistent data settings",
    "version": "0.0.1",
    "manifest_version": 3,
    "permissions": ["storage"],  
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "/images/16.png",
            "32": "/images/32.png",
            "48": "/images/48.png",
            "128": "/images/128.png"
        }
    }, 
    "icons": {
      "16": "/images/16.png",
      "32": "/images/32.png",
      "48": "/images/48.png",
      "128": "/images/128.png"
    }  
}

解决方案 #

由于你使用的是Manifest V3，需要通过Service Worker来监听浏览器关闭事件，具体步骤如下：

1. 更新Manifest配置 #

添加Service Worker配置，让扩展能运行后台逻辑：

{
    "name": "popup tutorial #1",
    "description": "persistent data settings",
    "version": "0.0.1",
    "manifest_version": 3,
    "permissions": ["storage"],  
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "/images/16.png",
            "32": "/images/32.png",
            "48": "/images/48.png",
            "128": "/images/128.png"
        }
    }, 
    "background": {
        "service_worker": "background.js"
    },
    "icons": {
      "16": "/images/16.png",
      "32": "/images/32.png",
      "48": "/images/48.png",
      "128": "/images/128.png"
    }  
}

2. 创建Service Worker文件（background.js） #

在根目录新建background.js，监听Service Worker销毁事件（对应浏览器关闭场景），清除存储的按钮状态：

// 监听Service Worker即将终止的事件，浏览器关闭时会触发
chrome.runtime.onSuspend.addListener(() => {
    // 清除存储的button状态
    chrome.storage.local.remove('button', () => {
        console.log('Button state cleared on browser close');
    });
});

3. 完善Popup初始化逻辑 #

修改popup.js的初始化代码，处理存储中无状态的情况，确保浏览器重启后按钮默认是Start：

let button = document.querySelector('button');
let options = document.querySelector("#btn-start");

chrome.storage.local.get(['button'], function(status) {
    console.log('Value currently is ' + status.button);
    console.log(typeof(status.button))
      
    if ( status.button === 'Stop') {
        setButtonStop();
    } else {
        // 无存储状态或状态为Start时，设置为Start
        setButtonStart();
    }
});

button.addEventListener("click", changeButtonStatus);

function changeButtonStatus(){
    let buttonStatus = document.querySelector("button").innerText;
    let status = '';

    if ( buttonStatus === 'Start') {
        status = setButtonStop();
    } else if ( buttonStatus === 'Stop') {
        status = setButtonStart();
    }

    chrome.storage.local.set({button: status }, function() {
        console.log('Value is set to ' + status);
    });
}

function setButtonStop () {
    options.setAttribute("id", "btn-stop");
    button.innerText = "Stop"; 
    return button.innerText; 
}

function setButtonStart () {
    options.setAttribute("id", "btn-start");
    button.innerText = "Start";
    return button.innerText;
}

原理说明 #

在Manifest V3中，后台逻辑由Service Worker负责，chrome.runtime.onSuspend事件会在Service Worker被销毁前触发（通常是浏览器关闭或扩展长时间闲置时）。通过在该事件中清除存储的按钮状态，就能实现浏览器关闭时重置按钮为Start的需求。当再次打开浏览器并启动Popup时，由于存储中无状态数据，初始化逻辑会自动将按钮设置为Start。

内容的提问来源于stack exchange，提问作者salsan