Chrome扩展chrome.storage.sync读写失败问题求助

Let's work through the problems in your code and get your settings saving and loading properly:

1. You're Missing DOM Element References #

The biggest issue is that your main.js tries to use apiKey and isEnabled variables without first grabbing them from the DOM. These variables are undefined, so your save/restore functions can't interact with the form fields at all. Add these lines at the top of your main.js:

// Get references to your form elements first
const apiKey = document.getElementById('apiKey');
const isEnabled = document.getElementById('isEnabled');

2. Forgot Storage Permissions in manifest.json #

Chrome's storage API won't work unless you explicitly declare the storage permission in your extension's manifest file. This is a super common gotcha!

For Manifest V3: #

Add this to your manifest.json:

{
  "manifest_version": 3,
  "name": "Your Extension Name",
  "version": "1.0",
  "permissions": ["storage"],
  // rest of your manifest code...
}

For Manifest V2: #

{
  "manifest_version": 2,
  "name": "Your Extension Name",
  "version": "1.0",
  "permissions": ["storage"],
  // rest of your manifest code...
}

3. Optimize Storage Calls & Add Proper Defaults #

Your original code makes two separate calls to chrome.storage.sync.get—you can combine them into one for better efficiency. Also, add a default false for the checkbox state (right now if isEnabled is never saved, it'll be undefined, which won't check the box correctly).

Here's the updated restoreSettings function:

function restoreSettings() {
  chrome.storage.sync.get(['apiKey', 'isEnabled'], (result) => {
    apiKey.value = result.apiKey || "";
    // Set default to false if no saved value exists
    isEnabled.checked = result.isEnabled ?? false;
  }).catch((error) => {
    console.error('Failed to load settings:', error);
  });
}

4. Add Save Confirmation & Error Handling #

It's helpful to add feedback when settings are saved, and handle any potential errors during the save process. Update your saveSettings function:

function saveSettings(e) {
  chrome.storage.sync.set({
    apiKey: apiKey.value,
    isEnabled: isEnabled.checked
  }).then(() => {
    alert('Settings saved successfully!');
  }).catch((error) => {
    console.error('Failed to save settings:', error);
    alert('Error saving settings. Check console for details.');
  });
}

Full Updated main.js #

// Get DOM element references
const apiKey = document.getElementById('apiKey');
const isEnabled = document.getElementById('isEnabled');
const saveButton = document.getElementById('saveButton');

function saveSettings() {
  chrome.storage.sync.set({
    apiKey: apiKey.value,
    isEnabled: isEnabled.checked
  }).then(() => {
    alert('Settings saved!');
  }).catch((err) => {
    console.error('Save error:', err);
  });
}

function restoreSettings() {
  chrome.storage.sync.get(['apiKey', 'isEnabled'], (result) => {
    apiKey.value = result.apiKey || "";
    isEnabled.checked = result.isEnabled ?? false;
  }).catch((err) => {
    console.error('Load error:', err);
  });
}

// Initialize event listeners and load settings
document.addEventListener('DOMContentLoaded', restoreSettings);
saveButton.addEventListener('click', saveSettings);

Your HTML code is actually fine—no changes needed there.

After making these fixes, reload your extension in Chrome's extensions page (enable developer mode, click "Reload" on your extension) and test the save/restore functionality again.

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