Chrome Extension with Dynamic SDK - No Apple ID Example

This repository demonstrates how to create a Chrome extension that uses the Dynamic React SDK while excluding the Apple ID script, which is required for Chrome Store approval.

The Issue

Google Chrome Store prohibits Manifest V3 extensions from loading remotely hosted code. A common violation occurs when your extension bundle includes code that loads external scripts, such as the Apple ID script from https://appleid.cdn-apple.com/.

Solution: Replacing Remote Loaders

This example shows how to configure Webpack to replace the loadAppleId function with a local dummy implementation, ensuring your extension can be approved by the Chrome Store.

Key Implementation Details

1. Create a dummy loadAppleId implementation:

   // src/loadAppleId.js
   "use client";
   
   const loadAppleId = () => {};
   export { loadAppleId };

2. Configure Webpack to use the dummy implementation:

   // webpack.config.js
   resolve: {
     alias: {
       // Alias any imports containing loadAppleId to our local dummy file
       loadAppleId: path.resolve(__dirname, 'src/loadAppleId.js'),
     },
   },
   plugins: [
     // Add a plugin to replace any direct references to the Apple ID script URL
     new webpack.NormalModuleReplacementPlugin(
       /loadAppleId/,
       path.resolve(__dirname, 'src/loadAppleId.js')
     ),
   ],

Verification

The build process has been verified to exclude any references to the Apple ID script or the loadAppleId function in the final bundle.

Getting Started

1. Clone this repository
2. Install dependencies: npm install
3. Build the extension: npm run build
4. Load the unpacked extension from the dist directory in Chrome

Resources

• Dynamic React SDK Overview
• Browser Extension Approval Issues