LinkedIn Chrome Extension Template

A TypeScript-based Chrome extension template designed for LinkedIn automation and interaction.

How It Works

This Chrome extension provides a foundation for building LinkedIn automation tools.

Right now it's very simple, you can save a template message and once you select "Message" to any of the Leads the message will be injected automatically.

This is meant for small number of messaages sent per day and it still requires some repetion to press Send each time.

The extension uses modern Chrome Extension Manifest V3 standards and is built with TypeScript for type safety and better developer experience. All components communicate using Chrome's message passing API, allowing for seamless coordination between the popup, content scripts, and background worker.

Features

• ✅ TypeScript support
• ✅ Manifest V3 (latest Chrome extension standard)
• ✅ Webpack build system
• ✅ Content script for LinkedIn pages
• ✅ Background service worker
• ✅ Popup UI
• ✅ Hot reload during development

Project Structure

linkedin-template/
├── src/
│   ├── background/
│   │   └── background.ts    # Background service worker
│   ├── content/
│   │   └── content.ts       # Content script for LinkedIn
│   └── popup/
│       └── popup.ts         # Popup UI logic
├── public/
│   ├── manifest.json        # Extension manifest
│   ├── popup.html          # Popup UI
│   └── icons/              # Extension icons (add your own)
├── dist/                    # Built files (generated)
├── package.json
├── tsconfig.json
└── webpack.config.js

Getting Started

Prerequisites

• Node.js (v18 or higher)
• pnpm package manager

Installation

pnpm install

Development

Build in watch mode for development:

pnpm run dev

Production Build

Build the extension for production:

pnpm run build

The compiled extension will be in the dist/ folder.

Loading the Extension in Chrome

1. Build the extension using pnpm run build
2. Open Chrome and navigate to chrome://extensions/
3. Enable "Developer mode" (toggle in top right)
4. Click "Load unpacked"
5. Select the dist/ folder from this project

Extension Components

Background Service Worker

Located in src/background/background.ts. Handles:

• Extension lifecycle events
• Message passing between components
• Tab monitoring

Content Script

Located in src/content/content.ts. Runs on LinkedIn pages and:

• Observes DOM changes
• Executes page automation
• Communicates with background and popup

Popup

Located in src/popup/popup.ts and public/popup.html. Provides:

• User interface for the extension
• Control buttons for actions
• Status feedback

Customization

Adding Icons

Replace the placeholder files in public/icons/ with your own icons:

• icon16.png (16x16)
• icon48.png (48x48)
• icon128.png (128x128)

Permissions

Edit public/manifest.json to add or modify permissions as needed.

Content Script Matching

By default, the content script runs on all LinkedIn pages. Modify the matches pattern in manifest.json to target specific pages.

Scripts

• pnpm run build - Production build
• pnpm run dev - Development build with watch mode
• pnpm run clean - Remove dist folder

Technologies

• TypeScript 5.3+
• Webpack 5
• Chrome Extension Manifest V3
• Chrome Types (@types/chrome)

Notes

• This template uses Manifest V3, which is the current standard for Chrome extensions
• The extension is configured to work specifically with LinkedIn (*.linkedin.com)
• Icon files are placeholders - replace them with actual icons before publishing

License

This project is licensed under the MIT License - see the LICENSE file for details.

You are free to use, modify, and distribute this code for any purpose, commercial or non-commercial, without any liability to the original authors.