APIKEY Connect - Integration Script Generator

Create Your Integration

Select a service and configure your integration to get custom code that works with your website.

Checking extension status...

Select a Service

OpenAI Integration

Service ID

Key Name

Button Text

Framework

HTML

JavaScript

CSS

Full Integration

<!-- Add this button to your HTML -->
<button id="apiKeyProtectBtn" class="apikey-connect-btn">
  Use My OpenAI API Key
</button>

<!-- Add this div to display errors (optional) -->
<div id="apiKeyError" class="error-message" style="display: none;"></div>

// Add this JavaScript to your page
document.addEventListener('DOMContentLoaded', function() {
  const apiKeyProtectBtn = document.getElementById('apiKeyProtectBtn');
  const apiKeyError = document.getElementById('apiKeyError');
  
  // Extension ID for APIKEY Connect
  const EXTENSION_ID = 'edkgcdpbaggofodchjfkfiblhohmkbac';
  
  // Function to show error messages
  function showError(message) {
    if (apiKeyError) {
      apiKeyError.textContent = message;
      apiKeyError.style.display = 'block';
      setTimeout(() => {
        apiKeyError.style.display = 'none';
      }, 5000);
    } else {
      alert(message);
    }
  }
  
  // Function to check if extension is installed
  async function checkExtension() {
    try {
      if (typeof chrome === 'undefined' || !chrome.runtime || !chrome.runtime.sendMessage) {
        return false;
      }
      
      return new Promise((resolve) => {
        chrome.runtime.sendMessage(EXTENSION_ID, { type: 'ping' }, (response) => {
          // Check for error
          const error = chrome.runtime.lastError;
          if (error) {
            resolve(false);
            return;
          }
          
          resolve(response && response.success);
        });
      });
    } catch (error) {
      return false;
    }
  }
  
  // Button click handler
  apiKeyProtectBtn.addEventListener('click', async function() {
    try {
      // Disable button during the request
      apiKeyProtectBtn.disabled = true;
      
      // Check if the extension is installed
      const isInstalled = await checkExtension();
      if (!isInstalled) {
        if (confirm('The APIKEY Connect extension is required but not installed. Would you like to install it now?')) {
          window.open('https://chromewebstore.google.com/detail/apikey-connect/edkgcdpbaggofodchjfkfiblhohmkbac', '_blank');
        }
        apiKeyProtectBtn.disabled = false;
        return;
      }
      
      // Request the API key from the extension
      const response = await chrome.runtime.sendMessage(
        EXTENSION_ID,
        {
          type: "requestKey",
          serviceId: "openai",      // Specify the service ID
          keyName: "Default OpenAI Key"  // Specify the key name
        }
      );
      
      if (response && response.success) {
        // Success! You now have the API key
        const apiKey = response.key;
        
        // Use the API key to make requests
        console.log('API Key received:', apiKey.substring(0, 3) + '...');
        
        // Your code to use the API key goes here
        useApiKey(apiKey);
      } else {
        // Handle error or rejection
        showError(response?.error || 'Failed to get API key');
      }
    } catch (error) {
      console.error('Error requesting API key:', error);
      showError('Error requesting API key. Is the extension installed?');
    } finally {
      // Re-enable button
      apiKeyProtectBtn.disabled = false;
    }
  });
  
  // Example function to use the API key
  function useApiKey(apiKey) {
    // Example function to use the API key for requests
    // Replace this with your actual API calls
    fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [
          { role: 'system', content: 'You are a helpful assistant.' },
          { role: 'user', content: 'Hello!' }
        ]
      })
    })
    .then(response => response.json())
    .then(data => console.log('API response:', data))
    .catch(error => console.error('API request failed:', error));
  }
});

/* Add this CSS to your stylesheet */
.apikey-connect-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background-color: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.apikey-connect-btn::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11.5C9 12.8807 7.88071 14 6.5 14C5.11929 14 4 12.8807 4 11.5C4 10.1193 5.11929 9 6.5 9C7.88071 9 9 10.1193 9 11.5Z'%3E%3C/path%3E%3Cpath d='M9 11.5H20V14H17V17H14V14H9'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.apikey-connect-btn:hover {
  background-color: #4338ca;
}

.apikey-connect-btn:active {
  transform: scale(0.98);
}

.apikey-connect-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.error-message {
  margin-top: 0.5rem;
  padding: 0.5rem;
  color: #b91c1c;
  background-color: #fee2e2;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

<!-- Complete Integration Example -->
<html>
<head>
  <title>APIKEY Connect Integration Example</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    
    .apikey-connect-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background-color: #4f46e5;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: background-color 0.2s, transform 0.1s;
      margin: 20px 0;
    }
    
    .apikey-connect-btn::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11.5C9 12.8807 7.88071 14 6.5 14C5.11929 14 4 12.8807 4 11.5C4 10.1193 5.11929 9 6.5 9C7.88071 9 9 10.1193 9 11.5Z'%3E%3C/path%3E%3Cpath d='M9 11.5H20V14H17V17H14V14H9'%3E%3C/path%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
    }
    
    .apikey-connect-btn:hover {
      background-color: #4338ca;
    }
    
    .apikey-connect-btn:active {
      transform: scale(0.98);
    }
    
    .apikey-connect-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
    
    .error-message {
      margin-top: 0.5rem;
      padding: 0.5rem;
      color: #b91c1c;
      background-color: #fee2e2;
      border-radius: 4px;
      font-size: 14px;
    }
    
    .result-container {
      margin-top: 20px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .result-container.success {
      border: 1px solid #d1fae5;
    }
    
    .result-container.error {
      border: 1px solid #fee2e2;
    }
    
    .result-header {
      padding: 10px 15px;
      font-weight: 600;
    }
    
    .result-container.success .result-header {
      background-color: #d1fae5;
      color: #065f46;
    }
    
    .result-container.error .result-header {
      background-color: #fee2e2;
      color: #b91c1c;
    }
    
    .result-body {
      padding: 15px;
      background-color: #f9fafb;
    }
    
    pre {
      white-space: pre-wrap;
      word-break: break-word;
      margin: 0;
      font-family: monospace;
    }
    
    .extension-status {
      padding: 15px;
      border-radius: 8px;
      background-color: #f3f4f6;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      font-size: 14px;
    }
    
    .status-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 8px;
    }
    
    .status-dot.pending { background-color: #f59e0b; }
    .status-dot.success { background-color: #10b981; }
    .status-dot.error { background-color: #ef4444; }
    
    .install-link {
      margin-left: auto;
      color: #4f46e5;
      text-decoration: none;
      font-weight: 500;
    }
    
    .install-link:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>APIKEY Connect Integration Example</h1>
  
  <div id="extensionStatus" class="extension-status">
    <div class="status-dot pending"></div>
    <span>Checking extension status...</span>
    <a href="https://chromewebstore.google.com/detail/apikey-connect/edkgcdpbaggofodchjfkfiblhohmkbac" class="install-link" target="_blank" style="display: none;">Install Extension</a>
  </div>
  
  <p>
    This example demonstrates how to securely access your OpenAI API key through the APIKEY Connect extension.
    Click the button below to request your API key:
  </p>
  
  <button id="apiKeyProtectBtn" class="apikey-connect-btn">
    Use My OpenAI API Key
  </button>
  
  <div id="apiKeyError" class="error-message" style="display: none;"></div>
  
  <div id="resultContainer" style="display: none;"></div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Elements
      const apiKeyProtectBtn = document.getElementById('apiKeyProtectBtn');
      const apiKeyError = document.getElementById('apiKeyError');
      const resultContainer = document.getElementById('resultContainer');
      const extensionStatus = document.getElementById('extensionStatus');
      
      // Constants
      const EXTENSION_ID = 'edkgcdpbaggofodchjfkfiblhohmkbac';
      
      // Check if extension is installed
      checkExtension();
      
      // Functions
      function showError(message) {
        if (apiKeyError) {
          apiKeyError.textContent = message;
          apiKeyError.style.display = 'block';
          setTimeout(() => {
            apiKeyError.style.display = 'none';
          }, 5000);
        } else {
          alert(message);
        }
      }
      
      async function checkExtension() {
        try {
          const statusDot = extensionStatus.querySelector('.status-dot');
          const statusText = extensionStatus.querySelector('span');
          const installLink = extensionStatus.querySelector('.install-link');
          
          if (typeof chrome === 'undefined' || !chrome.runtime || !chrome.runtime.sendMessage) {
            statusDot.className = 'status-dot error';
            statusText.textContent = 'Extension not available (browser not compatible)';
            installLink.style.display = 'inline';
            return false;
          }
          
          const response = await new Promise((resolve) => {
            const timeout = setTimeout(() => resolve(null), 2000);
            
            chrome.runtime.sendMessage(EXTENSION_ID, { type: 'ping' }, (response) => {
              clearTimeout(timeout);
              
              // Check for error
              const error = chrome.runtime.lastError;
              if (error) {
                resolve(null);
                return;
              }
              
              resolve(response);
            });
          });
          
          if (response && response.success) {
            statusDot.className = 'status-dot success';
            statusText.textContent = 'APIKEY Connect extension is installed';
            installLink.style.display = 'none';
            return true;
          } else {
            statusDot.className = 'status-dot error';
            statusText.textContent = 'APIKEY Connect extension is not installed';
            installLink.style.display = 'inline';
            return false;
          }
        } catch (error) {
          console.error('Error checking extension:', error);
          return false;
        }
      }
      
      // Button click handler
      apiKeyProtectBtn.addEventListener('click', async function() {
        // Clear previous results
        resultContainer.style.display = 'none';
        apiKeyError.style.display = 'none';
      
        try {
          // Show loading state
          apiKeyProtectBtn.disabled = true;
          apiKeyProtectBtn.textContent = 'Requesting API Key...';
          
          // Check if extension is installed
          const isInstalled = await checkExtension();
          if (!isInstalled) {
            if (confirm('The APIKEY Connect extension is required but not installed. Would you like to install it now?')) {
              window.open('https://chromewebstore.google.com/detail/apikey-connect/edkgcdpbaggofodchjfkfiblhohmkbac', '_blank');
            }
            throw new Error('Extension not installed');
          }
          
          // Request the API key from the extension
          const response = await chrome.runtime.sendMessage(
            EXTENSION_ID,
            {
              type: "requestKey",
              serviceId: "openai",
              keyName: "Default OpenAI Key"
            }
          );
          
          if (response && response.success) {
            // Success! You now have the API key
            const apiKey = response.key;
            
            // Show success state
            resultContainer.innerHTML = `
              <div class="result-container success">
                <div class="result-header">API Key Retrieved Successfully</div>
                <div class="result-body">
                  API key successfully retrieved. Key starts with: ${apiKey.substring(0, 3)}...
                </div>
              </div>
            `;
            resultContainer.style.display = 'block';
            
            // Use the API key for a real API call
            try {
              const apiResponse = await callOpenAI(apiKey);
              
              // Show API response
              resultContainer.innerHTML += `
                <div class="result-container success" style="margin-top: 15px;">
                  <div class="result-header">API Response</div>
                  <div class="result-body">
                    <pre>${JSON.stringify(apiResponse, null, 2)}</pre>
                  </div>
                </div>
              `;
            } catch (apiError) {
              // Show API error
              resultContainer.innerHTML += `
                <div class="result-container error" style="margin-top: 15px;">
                  <div class="result-header">API Request Failed</div>
                  <div class="result-body">
                    ${apiError.message || 'Unknown error'}
                  </div>
                </div>
              `;
            }
          } else {
            // Handle error or rejection
            throw new Error(response?.error || 'Failed to get API key');
          }
        } catch (error) {
          console.error('Error requesting API key:', error);
          showError(error.message || 'Error requesting API key');
          
          // Show error in results container
          resultContainer.innerHTML = `
            <div class="result-container error">
              <div class="result-header">Error</div>
              <div class="result-body">
                ${error.message || 'Unknown error occurred'}
              </div>
            </div>
          `;
          resultContainer.style.display = 'block';
        } finally {
          // Reset button state
          apiKeyProtectBtn.disabled = false;
          apiKeyProtectBtn.textContent = 'Use My OpenAI API Key';
        }
      });
      
      // Function to call OpenAI API
      async function callOpenAI(apiKey) {
        const response = await fetch('https://api.openai.com/v1/chat/completions', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
          },
          body: JSON.stringify({
            model: 'gpt-3.5-turbo',
            messages: [
              { role: 'system', content: 'You are a helpful assistant.' },
              { role: 'user', content: 'Say hello and explain what API keys are in one sentence.' }
            ],
            max_tokens: 150
          })
        });
        
        if (!response.ok) {
          const errorText = await response.text();
          throw new Error(`API request failed: ${response.status} ${response.statusText}\n${errorText}`);
        }
        
        return await response.json();
      }
    });
  </script>
</body>
</html>

Need more help? Check out our detailed documentation for advanced integration options.

Live Preview

This is how the APIKEY Connect button will look and function on your website after integration: