Chrome扩展集成Google Calendar API：授权按钮不显示问题求助

Sounds like you’re on the right track—your hunch about the Authorized JavaScript origins being misconfigured is almost certainly the issue here. Chrome extensions use a unique origin format totally different from regular localhost web pages, so let’s walk through how to fix this step by step:

1. Grab Your Extension’s Unique Origin URL #

Chrome extensions don’t run on http://localhost—their origin looks like chrome-extension://<your-extension-id>. To find your extension ID:

• Open Chrome and navigate to chrome://extensions/
• Toggle on Developer mode (top-right corner)
• Your extension’s ID will show up as a long string of letters/numbers under the extension name

2. Update OAuth 2.0 Client ID Settings #

Head to your Google Cloud Console where you set up the Calendar API:

• Locate your OAuth 2.0 Client ID (under APIs & Services > Credentials)
• Edit the client ID, then add chrome-extension://<your-extension-id> to the Authorized JavaScript origins list
• Remove the http://localhost entry if you no longer need it for quickstart testing
• Save the changes (note: it might take a minute for these settings to take effect)

3. Adjust Your Extension’s Content Security Policy (CSP) #

Chrome extensions have strict CSP rules that might block Google API scripts from loading. Update your manifest.json based on your manifest version:

• Manifest V2: Add this line:

  "content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'"
  

• Manifest V3: Use the extension_pages field:

  "content_security_policy": {
    "extension_pages": "script-src 'self' https://apis.google.com; object-src 'self'"
  }
  

4. Tweak Popup Initialization Code #

The quickstart code assumes a regular web page load—make sure you initialize the Google API after the popup’s DOM is fully loaded. Wrap your gapi setup in a DOM listener:

document.addEventListener('DOMContentLoaded', function() {
  // Your gapi client initialization and authorize button code goes here
  gapi.load('client:auth2', initClient);
});

5. Refresh Your Extension #

After making these changes:

• Go back to chrome://extensions/
• Click the Refresh button on your extension card
• Close and re-open the popup to test if the "Authorize" button now appears

Once you’ve updated the authorized origin to match your extension’s unique URL, the OAuth flow should work just like it did in the quickstart.

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