如何为已构建完成的Electron应用添加Chrome扩展？以Microsoft Teams为例

Hey there, I’ve tackled this exact scenario before—getting a Chrome extension like Moesif Origin & CORS Changer loaded into a pre-built Electron app (your Microsoft Teams v1.4.00.16567 on macOS Catalina) for local dev/debugging. Since Electron’s docs only cover adding extensions during app development, here’s how to make it work with a packaged app:

Step 1: Prepare the Extension Files #

First, grab the unpacked version of the Moesif extension:

• Open Chrome, go to chrome://extensions/, toggle on Developer mode in the top-right corner.
• Locate "Moesif Origin & CORS Changer", click "Details", then either click "Unpack extension" (if it’s packed) or note the folder path shown under "Location" (if already unpacked).
• Copy the entire extension folder to a stable, easy-to-reference spot on your Mac—like ~/Desktop/Moesif-CORS-Extension (stick to absolute paths later to avoid errors).

Step 2: Load the Extension via Terminal (Temporary, No App Modifications) #

This is the safest method since it doesn’t alter the Teams app files directly:

1. Close all running instances of Microsoft Teams.
2. Open Terminal and run this command, replacing the extension path with your actual folder location:

   /Applications/Microsoft\ Teams.app/Contents/MacOS/Microsoft\ Teams --load-extension=/Users/[YourUsername]/Desktop/Moesif-CORS-Extension
   

3. Teams will launch with the extension loaded. To confirm, open Teams’ Developer Tools (Cmd+Option+I—you may need to enable Developer mode first: click your profile pic > About > hold the Option key and click "Version" to toggle dev mode on), then check the "Extensions" tab (under "More Tools" if it’s hidden).

Step 3: Load the Extension Permanently (Until Teams Updates) #

If you want the extension to load automatically every time you open Teams (note: this will be overwritten when Teams updates), modify the app’s Info.plist:

1. Right-click Microsoft Teams.app in your Applications folder > "Show Package Contents".
2. Navigate to Contents/Info.plist and open it with a text editor (like TextEdit or VS Code).
3. Look for the <key>LSUIElement</key> section, or add a new LSArguments array if it doesn’t exist, then insert the extension load parameter:

   <key>LSArguments</key>
   <array>
       <string>--load-extension=/Users/[YourUsername]/Desktop/Moesif-CORS-Extension</string>
   </array>
   

4. Save the file, close all Teams processes, then re-open Teams. The extension should load automatically.

Important Notes #

• Only for Local Debugging: As you specified, this is strictly for dev/debug use—modifying pre-built apps can introduce stability issues, and Teams updates will revert any changes to the app bundle.
• Extension Compatibility: Most basic Chrome extensions (like Moesif’s CORS tool) work with Electron, but avoid extensions that rely on Chrome-specific APIs not supported by Electron.
• Developer Mode Check: Ensure Teams’ Developer mode is enabled to access dev tools and verify the extension is loaded correctly.

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