I Built a Chrome Extension to Solve My Alibaba Import Problem (And You Can Too)

I was spending 2+ hours per product importing from Alibaba to WooCommerce. For 50 products? That's 100+ hours.

I tried everything:

• Manual copy-paste (too slow, too many errors)
• CSV imports (images never import correctly)
• Various plugins (expensive, limited)
• Virtual assistants (expensive, still makes mistakes)

After burning $2,000+ on failed methods, I decided to build my own solution.

---

What I Built

A Chrome extension + WordPress plugin that captures product data from Alibaba and imports it to WooCommerce in one click.

Here's what it does:

1. Chrome Extension — captures product data from any Alibaba page
2. WordPress Plugin — receives data, stores in queue, imports to WooCommerce
3. AI Rewriting — generates SEO titles and descriptions
4. Batch Processing — imports 100+ products at once

---

The Tech Stack

Chrome Extension (Manifest V3)

// content.js — captures product data from Alibaba page
function captureProduct() {
  const product = {
    title: document.querySelector('.title-text')?.innerText,
    price: document.querySelector('.price-text')?.innerText,
    images: [...document.querySelectorAll('.image-slide img')].map(img => img.src),
    description: document.querySelector('.description-text')?.innerText,
    variations: captureVariations()
  };

  // Send to WordPress plugin via API
  chrome.runtime.sendMessage({
    action: 'importProduct',
    data: product
  });
}

function captureVariations() {
  const variations = [];
  document.querySelectorAll('.sku-item').forEach(item => {
    variations.push({
      name: item.querySelector('.sku-name')?.innerText,
      price: item.querySelector('.sku-price')?.innerText,
      image: item.querySelector('.sku-image')?.src
    });
  });
  return variations;
}

WordPress Plugin (PHP + React)

// class-importon-bridge.php — handles product import
class Importon_Bridge {
    private $api_url = 'https://your-api.com/wp-json/importon-bridge/v1';

    public function import_product($product_data) {
        // Create WooCommerce product
        $product = new WC_Product_Simple();
        $product->set_name($product_data['title']);
        $product->set_regular_price($product_data['price']);
        $product->set_description($product_data['description']);
        $product->set_short_description($this->generate_short_description($product_data));

        // Download and attach images
        $image_ids = $this->download_images($product_data['images']);
        $product->set_image_id($image_ids[0]);
        $product->set_gallery_image_ids(array_slice($image_ids, 1));

        // Save product
        $product_id = $product->save();

        // Add variations
        if (!empty($product_data['variations'])) {
            $this->add_variations($product_id, $product_data['variations']);
        }

        return $product_id;
    }

    private function download_images($image_urls) {
        $image_ids = [];
        foreach ($image_urls as $url) {
            $image_id = media_sideload_image($url, 0);
            if (!is_wp_error($image_id)) {
                $image_ids[] = $image_id;
            }
        }
        return $image_ids;
    }
}

AI Content Rewriting

// ai-rewriter.js — generates SEO content
async function rewriteContent(productData) {
  const prompt = `Rewrite this product title for SEO: "${productData.title}". 
  Make it keyword-rich, under 60 characters, and optimized for WooCommerce.`;

  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${OPENAI_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      model: 'gpt-4',
      messages: [{ role: 'user', content: prompt }]
    })
  });

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

---

The Queue System

For batch imports, I built a custom queue:

// queue-manager.php — handles batch processing
class Queue_Manager {
    private $queue = [];
    private $batch_size = 10;

    public function add_to_queue($product_data) {
        $this->queue[] = $product_data;

        if (count($this->queue) >= $this->batch_size) {
            $this->process_batch();
        }
    }

    public function process_batch() {
        foreach ($this->queue as $product_data) {
            $this->import_product($product_data);

            // Update progress in UI
            $this->update_progress();

            // Rate limiting — don't overload the server
            sleep(1);
        }

        $this->queue = [];
    }
}

---

Results

Before:

• 2+ hours per product
• High error rate (manual copy-paste)
• Not scalable

After:

• 10 minutes for 100 products
• Near-zero error rate
• Fully automated

---

What I Learned

1. Chrome Extensions are powerful — they can interact with any webpage
2. WordPress hooks are flexible — you can customize almost anything
3. AI content generation works — but needs human review
4. Queue systems prevent crashes — don't import everything at once
5. User experience matters — a simple UI makes complex tasks easy

---

What's Next?

• Bulk editing capabilities
• Price monitoring and alerts
• Supplier comparison features
• Integration with more platforms (Amazon, Shopify)

---

Thanks for reading! If you have questions about the tech stack or the development process, feel free to ask in the comments.

---

P.S. — I'm a WordPress developer available for hire. If you need custom plugins, WooCommerce customization, or API integrations, let me know.