Google Chrome扩展入门教程功能失效：按钮改色与选项页空白求助

Hey there, let's work through these frustrating problems you're facing—even the official sample not working definitely makes you wonder if something's off with the tutorial. Let's break down both issues and check the most likely culprits, especially since Chrome's extension system has changed a lot in recent years.

Popup Button Won't Change Page Color #

This is almost always tied to Manifest V3 changes or missing permissions, since Chrome tightened up how extensions interact with web pages:

• Missing required permissions: If the tutorial is older, it might not mention the scripting permission, which is mandatory in Manifest V3 for injecting scripts into pages. Make sure your manifest.json includes:

  "permissions": ["activeTab", "scripting"]
  

  Without scripting, your popup can't run code to modify the page's color.
• Outdated script injection API: Older tutorials use chrome.tabs.executeScript, which was deprecated in V3. The modern replacement is chrome.scripting.executeScript, which requires specifying the target tab. Here's what the correct popup JS should look like:

  document.getElementById('changeColor').addEventListener('click', async () => {
    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
    await chrome.scripting.executeScript({
      target: { tabId: activeTab.id },
      func: () => {
        document.body.style.backgroundColor = '#ff0000'; // Or your chosen color
      }
    });
  });
  

• Manifest version mismatch: If the tutorial uses Manifest V2, Chrome has phased out support for V2 extensions in recent versions (since Chrome 88, and fully blocked in newer builds). Even the official V2 sample will fail to run properly now.

Blank Options Page #

A blank options page usually stems from incorrect Manifest V3 configuration or missing setup:

• Wrong options page declaration: In V3, you can't just use "options_page": "options.html" anymore. You need to use the options_ui field instead:

  "options_ui": {
    "page": "options.html",
    "open_in_tab": false // Set to true if you want it to open in a new tab
  }
  

  If the tutorial uses the old V2 syntax, Chrome won't load the options page correctly.
• Check for console errors: Right-click the blank options page and select "Inspect" to open DevTools. Go to the Console tab—you might see errors like missing files, failed storage access, or syntax issues. For example, if your options page uses chrome.storage, you need to add the "storage" permission to manifest.json.
• File path errors: Double-check that options.html exists in the correct location relative to your manifest file. A typo in the file name or path will cause the page to fail loading entirely.

Bottom Line #

The most likely issue is that the tutorial you're following is outdated and based on Manifest V2, which Chrome no longer supports for new extensions. Even the official sample from an old tutorial will break in modern Chrome versions. Updating to follow the latest Manifest V3 requirements should fix both your popup and options page problems.

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