A Chrome extension that adds a floating rich text toolbar to LinkedIn — format your posts, comments, and DMs with bold, italic, underline, strikethrough, monospace, and lists using Unicode characters that survive LinkedIn's formatting restrictions.

1. Open LinkedIn and click into any text input — post composer, comment, or DM
2. A floating formatting toolbar appears above the editor
3. Select text and click a format button (or type first, then select & format)
4. The text is instantly converted to Unicode characters — no HTML, no workarounds
5. Click Post / Comment / Send — formatting is preserved as-is

LinkedIn strips all HTML from posts. This extension bypasses that limitation by converting text to Unicode Mathematical Alphanumeric Symbols, which LinkedIn renders natively:

1. Clone the repository

   git clone https://github.com/rahulps1000/Linkedin-Rich-Post.git

2. Open Chrome Extensions

   • Navigate to chrome://extensions/
   • Enable Developer mode (toggle in the top-right)

3. Load the extension

   • Click "Load unpacked"
   • Select the cloned Linkedin-Rich-Post folder

4. Navigate to LinkedIn

   • Go to linkedin.com
   • Click into any post composer, comment box, or DM — the toolbar appears automatically

Linkedin-Rich-Post/
├── manifest.json              # Chrome Manifest V3 configuration
├── background.js              # Service worker — toggle state & badge management
├── content/
│   ├── content.js             # Core content script — editor detection, toolbar, formatting
│   ├── content.css            # Toolbar styles (fallback, also injected inline)
│   └── unicode-maps.js        # Unicode character mapping tables & conversion engine
├── popup/
│   ├── popup.html             # Extension popup UI
│   ├── popup.css              # Popup styles
│   └── popup.js               # Popup logic — toggle switch
├── icons/
│   ├── icon16.png             # Toolbar icon
│   ├── icon48.png             # Extensions page icon
│   └── icon128.png            # Chrome Web Store icon
├── LICENSE                    # MIT License
└── README.md

LinkedIn uses multiple editor implementations across its platform:

The extension uses a three-layer detection strategy:

1. MutationObserver on document.body — catches dynamically created editors
2. Shadow DOM observation — watches #interop-outlet and any new shadow roots
3. Periodic scan (every 2s) — fallback for edge cases where mutation events are missed

When a LinkedIn editor receives focus, a floating toolbar appears above it:

┌─────────────────────────────────────────────────────┐
│  𝗕  │  𝘐  │  𝘽𝙄  │  U̲  │  S̶  │  𝙼  │  ≡  │  ≡  │  T×  │
│ Bold  Ital  B+I   Und  Strk  Mono  Bul   Num  Clear│
└─────────────────────────────────────────────────────┘

• Positioned via getBoundingClientRect() relative to the active editor
• Renders in the main DOM (not inside Shadow DOM) at z-index: 2147483647
• Prevents focus theft via mousedown → preventDefault()
• Auto-hides on blur with a 200ms delay (to allow toolbar clicks)

User selects text → Clicks format button → Unicode conversion → document.execCommand('insertText')
                                                                          ↓
                                                                  Dispatches InputEvent
                                                                          ↓
                                                              LinkedIn React state syncs

The formatting is non-destructive — the same button toggles formatting on/off. Clicking "Bold" on already-bold text reverts it to plain ASCII.

Note: Keyboard shortcuts apply within LinkedIn's native editors. The toolbar buttons work with any text selection.

Select text, then click a toolbar button to apply/remove formatting.

Click the extension icon in Chrome's toolbar:

• Toggle switch — Enable or disable the toolbar globally
• Status indicator — Shows "Active" (green) or "Disabled"
• Format preview — Quick reference of available formats

Settings are persisted via chrome.storage.local and synced across all LinkedIn tabs.

• Unicode scope: Bold, italic, bold-italic, and monospace mappings cover A–Z, a–z, and 0–9 only. Punctuation, symbols, and non-Latin characters pass through unformatted.
• Combining characters: Underline (U+0332) and strikethrough (U+0336) may render inconsistently across platforms and fonts.
• LinkedIn DOM changes: LinkedIn frequently updates its class names and DOM structure. If the toolbar stops appearing, the detection selectors in content.js may need updating.
• Extension reload: After reloading the extension in chrome://extensions/, refresh the LinkedIn tab to re-inject the content script.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

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

Made with ❤️ for better LinkedIn posts