Skip to main content

​
Overview

This guide covers common issues you may encounter when integrating the AI Chat Extension SDK and how to resolve them.

​
Installation issues

​
Package not found

Symptom: npm install or pnpm add fails with “package not found” Cause: npm registry not configured or authentication token missing Solution:
1

Add registry to .npmrc

.npmrc
@sleek:registry=https://npm.cloudsmith.io/sleek/sleek/
//npm.cloudsmith.io/sleek/sleek/:_authToken={YOUR_TOKEN_HERE}
2

Replace token placeholder

Replace {YOUR_TOKEN_HERE} with your actual authentication token
3

Retry installation

pnpm add @sleek/ai-chat-extension-sdk
Contact [email protected] if you need an authentication token.

​
Build errors after installation

Symptom: TypeScript or build errors after installing the SDK Cause: Missing dependencies or TypeScript version mismatch Solution: 
# Ensure peer dependencies are installed
pnpm install

# Check TypeScript version (should be 5.0+)
pnpm list typescript

# Update TypeScript if needed
pnpm add -D typescript@latest

​
Manifest configuration issues

​
SDK not initializing

Symptom: SDK initialization fails with manifest validation error Cause: Missing required manifest permissions Solution: Verify your manifest.json includes:
manifest.json
{
  "manifest_version": 3,
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["<all_urls>"]
}
Manifest validation is skipped by default. Set skipManifestValidation: false during development to catch manifest issues early.

​
Content script not injecting

Symptom: Chat controller doesn’t load, no badge or panel appears Cause: Content script file not copied to extension directory Solution:
1

Verify file is copied

# Check that the file exists in your dist directory
ls -la dist/chat-controller.js
2

Add copy step to build script

package.json
{
  "scripts": {
    "build": "your-build-command && pnpm copy-sdk-files",
    "copy-sdk-files": "cp node_modules/@sleek/ai-chat-extension-sdk/dist/chat-controller.js dist/"
  }
}
3

Rebuild extension

pnpm build

​
UI issues

​
Chat badge not appearing

Symptom: No chat badge shows up after searching Causes:
  1. Query not classified as “shopping”
  2. Badge feature not enabled
  3. Branding configuration missing
  4. Page is in denylist
Solutions:
Try clear shopping queries:
  • “best headphones”
  • “Nike running shoes”
  • “iPhone 15 deals”
Enable debug mode to see classification results:
enableDebug: true,

featureControls: {
  enableChatBadge: true,  // Must be true
}

badgeConfig: {
  brand: {
    logoUrl: 'https://your-extension.com/badge-logo.png',
  },
}
Check that the platform is enabled in your configuration:
platformControls: {
  enableGoogle: true,   // For Google Search
  enableChatGPT: false, // For ChatGPT
}

​
Chat panel not opening

Symptom: Clicking badge doesn’t open chat panel Causes:
  1. Panel feature not enabled
  2. Chat config missing or invalid
  3. Content script not loaded
Solutions: 
featureControls: {
  enableChatPanel: true,  // Must be true
}

ls -la dist/chat-controller.js
Open DevTools Console and look for:
  • JavaScript errors
  • Network errors
  • CSP (Content Security Policy) errors

​
Panel appears blank

Symptom: Chat panel opens but shows blank white screen Causes:
  1. API key invalid
  2. Network connectivity issues
  3. JavaScript errors in content script
Solutions:
1

Check browser console

Look for JavaScript errors in DevTools Console
2

Verify API key

// Verify the API key passed as the first parameter is correct
await initializeAiChatExtensionSdk('your-api-key', { ... });
3

Enable debug mode

enableDebug: true,

​
Data provider issues

​
Providers not being called

Symptom: Data providers never execute, no logs Causes:
  1. UI features disabled
  2. No shopping queries detected
  3. Panel not opened
Solutions:
Data providers only execute when UI features are active:
featureControls: {
  enableChatBadge: true,
  enableChatPanel: true,
}
Search for “best laptops” on Google and open the chat panel
dataProviders: {
  offerRedirectUrlProvider: async (url) => {
    console.log('Offer redirect url requested for:', url);
    const result = await fetchOfferRedirectUrl(url);
    console.log('Returning:', result);
    return result;
  },
}

​
Provider errors breaking SDK

Symptom: SDK stops working after provider throws error Cause: Exceptions thrown from data providers Solution: Always wrap providers in try-catch and return null/: 
const offerRedirectUrlProvider = async (url) => {
  try {
    const response = await fetch(/* ... */);
    return response.offerRedirectUrl || null;
  } catch (error) {
    console.error('Offer redirect url error:', error);
    return null;  // Critical: return null, never throw
  }
};

const merchantCashbackProvider = async (urls) => {
  try {
    const response = await fetch(/* ... */);
    return response.cashback || {};
  } catch (error) {
    console.error('Cashback error:', error);
    return {};  // Critical: return {}, never throw
  }
};

​
Slow performance

Symptom: Chat feels sluggish, UI freezes Cause: Data providers taking too long to respond Solutions: 
const offerRedirectUrlProvider = async (url) => {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), 500);

  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);
    return response.offerRedirectUrl || null;
  } catch (error) {
    clearTimeout(timeoutId);
    if (error.name === 'AbortError') {
      console.warn('Offer redirect url timeout');
    }
    return null;
  }
};

const cache = new Map<string, string>();

const offerRedirectUrlProvider = async (url) => {
  if (cache.has(url)) {
    return cache.get(url)!;
  }

  const result = await fetchOfferRedirectUrl(url);
  if (result) {
    cache.set(url, result);
  }
  return result;
};

const offerRedirectUrlProvider = async (url) => {
  const start = performance.now();
  try {
    const result = await fetchOfferRedirectUrl(url);
    const duration = performance.now() - start;
    console.log(`Offer redirect url took ${duration.toFixed(0)}ms`);
    return result;
  } catch (error) {
    return null;
  }
};
Target <500ms response times.

​
Event issues

​
Events not firing

Symptom: Event listeners never called Cause: Listener registered after events occurred Solution: Register listeners immediately after SDK initialization: 
// Initialize SDK
await initializeAiChatExtensionSdk('your-api-key', {
  // ... config
});

// Register listener immediately
getAiChatExtensionSdk().registerEventListener((event, tabDetails) => {
  console.log('Event:', event.type);
});
You can also pass listeners during initialization as the third parameter.

​
Missing event data

Symptom: Event fires but event.data is undefined Cause: Some events have no data payload (e.g., CHAT_PANEL_CLOSED) Solution: Check event type before accessing data: 
getAiChatExtensionSdk().registerEventListener((event, tabDetails) => {
  switch (event.type) {
    case AiChatExtensionSdkEventType.QUERY_CLASSIFIED:
      console.log(event.data.query);  // Has data
      break;
    case AiChatExtensionSdkEventType.CHAT_PANEL_CLOSED:
      // No data payload for this event
      console.log('Panel closed (no data)');
      break;
  }
});

​
Query classification issues

​
All queries classified as “unknown”

Symptom: Shopping queries not detected, badge never shows Causes:
  1. Invalid API key
  2. Network/firewall blocking API calls
  3. Backend service unavailable
Solutions:
1

Verify API key

Check that your Pie AI API key is correct
2

Check browser console

Look for network errors or 401/403 responses
3

Enable debug mode

enableDebug: true,
Check console for classification responses

​
Queries not being detected

Symptom: No classification happening, no events Causes:
  1. Not on supported platform (Google Search, ChatGPT)
  2. SDK not active on current page
  3. Platform not enabled in configuration
Solutions:
Currently supported:
  • Google Search (google.com)
  • ChatGPT (chatgpt.com)
Navigate to these sites and try shopping queries.
// In browser console
console.log('SDK active:', !!getAiChatExtensionSdk());
Check your platformControls configuration:
platformControls: {
  enableGoogle: true,   // Default: true
  enableChatGPT: false, // Default: false - enable if needed
}

​
Browser-specific issues

​
Firefox: Content script not loading

Symptom: Works in Chrome but not Firefox Cause: Different manifest format or permissions Solution: Ensure Firefox-compatible manifest:
manifest.json
{
  "manifest_version": 3,
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["<all_urls>"],
  "browser_specific_settings": {
    "gecko": {
      "id": "[email protected]"
    }
  }
}

​
Safari: Styling issues

Symptom: Chat panel styling broken in Safari Cause: Webkit-specific CSS differences Solution: Use broadly compatible CSS: 
customStyles: {
  panelContainer: {
    backgroundColor: 'rgba(255, 255, 255, 0.98)',
  }
}

​
Debugging tips

​
Enable debug mode

Always start with debug mode when troubleshooting: 
await initializeAiChatExtensionSdk('your-api-key', {
  enableDebug: true,  // Enables detailed console logging
  // ... other config
});

​
Check SDK version

Verify you’re using the latest SDK version: 
pnpm list @sleek/ai-chat-extension-sdk
Update to latest: 
pnpm update @sleek/ai-chat-extension-sdk

​
Inspect SDK state

In browser console: 
// Get SDK instance
const sdk = getAiChatExtensionSdk();

// Check if initialized
console.log('SDK initialized:', !!sdk);

// Manually trigger classification (for testing)
// Note: This is an internal API and may not be available

​
Check browser console

Always check the DevTools Console for:
  • JavaScript errors
  • Network request failures
  • SDK debug logs
  • Warning messages

​
Test in incognito mode

Test in incognito/private browsing to rule out:
  • Conflicts with other extensions
  • Cached data issues
  • Profile-specific problems

​
Inspect network requests

In DevTools Network tab, filter for:
  • Requests to chat.pie.org (chat backend)
  • Failed requests (red)
  • 401/403 responses (authentication issues)

​
Common error messages

​
”Manifest validation failed”

Error: Failed to initialize SDK: Manifest validation failed Solution: Fix manifest.json configuration (see Manifest configuration issues)

​
“Invalid API key”

Error: Failed to classify query: 401 Unauthorized Solution: Verify API key is correct and active

​
Getting help

If you’re still experiencing issues:

Email support

Contact our support team for assistance

Check documentation

Review the full SDK documentation
When contacting support, please include:
  • SDK version
  • Browser and version
  • Manifest.json content
  • Console errors/logs
  • Steps to reproduce the issue