AI LinkedIn Post Writer Chrome: Tools and Techniques for Developers

// manifest.json for AI LinkedIn Post Writer
{
  "manifest_version": 3,
  "name": "AI LinkedIn Post Assistant",
  "version": "1.0.0",
  "description": "AI-powered writing assistance for LinkedIn posts",
  "permissions": ["activeTab", "scripting", "storage"],
  "host_permissions": ["*://*.linkedin.com/*"],
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": "icons/icon128.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

// content.js - Injected into LinkedIn pages
(function() {
  'use strict';

  // Detect post composer area
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          const composer = node.querySelector('.feed-shared-update-v2');
          if (composer && !composer.dataset.aiEnhanced) {
            enhanceComposer(composer);
          }
        }
      });
    });
  });

  function enhanceComposer(composer) {
    composer.dataset.aiEnhanced = 'true';
    
    // Add AI assistance button near the post composer
    const actionBar = composer.querySelector('.feed-shared-social-actions');
    if (actionBar) {
      const aiButton = document.createElement('button');
      aiButton.className = 'ai-post-writer-btn';
      aiButton.innerHTML = '✨ AI Assist';
      aiButton.addEventListener('click', () => openAIPanel(composer));
      actionBar.appendChild(aiButton);
    }
  }

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();

// background.js - Service worker handling AI requests
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'generatePost') {
    generateLinkedInPost(request.prompt, request.context)
      .then(content => sendResponse({ success: true, content }))
      .catch(error => sendResponse({ success: false, error: error.message }));
    return true;
  }
});

async function generateLinkedInPost(prompt, context) {
  const apiKey = await getStoredApiKey();
  
  const response = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': apiKey,
      'anthropic-version': '2023-06-01'
    },
    body: JSON.stringify({
      model: 'claude-3-sonnet-20240229',
      max_tokens: 1024,
      messages: [{
        role: 'user',
        content: `Generate a professional LinkedIn post about ${prompt}. 
                  Context: ${context}
                  Style: Professional but engaging, 130 characters max per line,
                  Include a hook in the first line, 3-5 bullet points if relevant,
                  End with a question or call-to-action.`
      }]
    })
  });

  const data = await response.json();
  return data.content[0].text;
}

async function getStoredApiKey() {
  const result = await chrome.storage.local.get('apiKey');
  return result.apiKey;
}

const postTemplates = {
  announcement: {
    structure: '🎉 {announcement}\n\nWhy this matters:\n• {benefit1}\n• {benefit2}\n• {benefit3}\n\n{cta}',
    fields: ['announcement', 'benefit1', 'benefit2', 'benefit3', 'cta']
  },
  thread: {
    structure: '{hook}\n\n🧵 Thread below 👇',
    fields: ['hook']
  },
  learnings: {
    structure: '{number} things I learned about {topic}:\n\n{lessons}\n\n{closing}',
    fields: ['number', 'topic', 'lessons', 'closing']
  }
};

function generateFromTemplate(templateType, variables) {
  const template = postTemplates[templateType];
  let content = template.structure;
  
  template.fields.forEach(field => {
    content = content.replace(`{${field}}`, variables[field] || '');
  });
  
  return content;
}

const stylePresets = {
  concise: {
    maxLineLength: 100,
    sentencesPerParagraph: 2,
    emojiUsage: 'sparse'
  },
  storytelling: {
    maxLineLength: 130,
    sentencesPerParagraph: 3,
    emojiUsage: 'moderate'
  },
  technical: {
    maxLineLength: 120,
    sentencesPerParagraph: 2,
    emojiUsage: 'minimal'
  }
};