Chrome扩展Manifest V3中IndexedDB在DevTools中不显示的问题

我正在开发Manifest V3版本的Chrome扩展，通过Service Worker脚本创建IndexedDB用于数据存储。控制台能够正常打印存储的数据，但在Service Worker的DevTools视图中无法看到该IndexedDB。manifest已配置"storage"权限，请问是否遗漏了什么配置？

数据库创建代码 #

// Specify the database
var dbName = "mySampleDB";
var storeName = "mySampleStore";

// Open a connection to the database
var openRequest = indexedDB.open(dbName, 1); // 1 is the version of the database

openRequest.onupgradeneeded = function (e) {
 var db = e.target.result;

// Create an object store if it doesn't exist
if (!db.objectStoreNames.contains(storeName)) {
    var store = db.createObjectStore(storeName, {
        keyPath: "id",
        autoIncrement: true,
    });

    // Define some indexes, if necessary
    // store.createIndex('name', 'name', { unique: false });

    // Add sample data
    store.transaction.oncomplete = function (event) {
        var transaction = db.transaction(storeName, "readwrite");
        var sampleStore = transaction.objectStore(storeName);

        var sampleData = [
            { id: 1, name: "Item 1", value: "Value 1" },
            { id: 2, name: "Item 2", value: "Value 2" },
            { id: 3, name: "Item 3", value: "Value 3" },
        ];

        sampleData.forEach(function (item) {
            sampleStore.add(item);
        });
    };
}
};
openRequest.onsuccess = function (e) {
    console.log("Database opened successfully");
    // Further operations like reading or adding data can be done here
    var db = e.target.result;

// Start a new transaction
var transaction = db.transaction(["mySampleStore"], "readonly");
var store = transaction.objectStore("mySampleStore");

// Open a cursor to traverse all items in the store
var cursorRequest = store.openCursor();

cursorRequest.onsuccess = function (e) {
    var cursor = e.target.result;
    if (cursor) {
        // Log the current item
        console.log(
            "ID: " +
                cursor.key +
                ", Name: " +
                cursor.value.name +
                ", Value: " +
                cursor.value.value
        );
        cursor.continue(); // Move to the next item
    } else {
        console.log("No more entries!");
    }
};

cursorRequest.onerror = function (e) {
    console.error("Error reading data:", e.target.errorCode);
};
};

openRequest.onerror = function (e) {
    console.error("Error opening database:", e.target.errorCode);
};

控制台日志 #

Database opened successfully
service-worker.js:57 ID: 1, Name: Item 1, Value: Value 1
service-worker.js:57 ID: 2, Name: Item 2, Value: Value 2
service-worker.js:57 ID: 3, Name: Item 3, Value: Value 3
service-worker.js:67 No more entries!

页面状态说明 #

Service Worker的DevTools Application面板中，IndexedDB列表为空，未显示mySampleDB数据库。

以下是几个常见的排查和解决方法：

• 手动刷新IndexedDB面板：在Service Worker的DevTools的Application面板中，找到IndexedDB选项，点击面板顶部的刷新按钮（圆形箭头图标）。Chrome DevTools的IndexedDB面板不会自动实时同步数据库状态，手动刷新后通常能显示已创建的数据库。

• 确认DevTools上下文正确：确保你打开的是扩展Service Worker对应的DevTools，而非普通网页的。可以通过chrome://extensions/进入扩展管理页面，找到你的扩展后，点击「Service Worker」栏下的「Inspect」按钮，打开专属的DevTools窗口。

• 关闭数据库连接：虽然代码能正常读取数据，但如果数据库连接长期处于打开状态，可能导致DevTools无法正确识别。可以在数据读取完成后添加关闭连接的代码，比如在cursorRequest.onsuccess的else分支中加入：

  db.close();
  

• 清除扩展缓存并重启：Chrome的缓存可能导致视图不同步。在chrome://extensions/中开启开发者模式，点击扩展的「重新加载」按钮，或者关闭当前DevTools窗口后重新打开。

• 重置数据库状态：如果之前创建过旧版本的数据库，可能存在版本冲突。可以在DevTools的Application面板中，找到「Storage」选项，点击「Clear site data」清除扩展的所有存储数据，然后重新运行代码创建数据库。

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