Forem: Jay Malli

Building Text Annotation Chrome Extensions with XPath Selection Tracking

Jay Malli — Mon, 29 Dec 2025 17:07:06 +0000

Ever tried to build a highlighter extension and hit this problem: "How do I remember where the user highlighted text?" 🤔

Saving "Hello World" isn't enough — the same text might appear 100 times on a page. You need coordinates in the DOM, and those coordinates need to survive page reloads. 💾

XPath is the answer. Let me show you how to build a production-ready annotation system. ✨

🚨 The Challenge: Text Has No Permanent Address

Think of a webpage like a huge book 📚. When you highlight text, you can't just save "page 47" — what if someone adds a new chapter? Page numbers shift!

What You Actually Need:

📍 Start position - where the selection begins
📍 End position - where it ends
🌳 Common ancestor - the closest parent containing both points
💾 Storage format - that survives page changes

The problem: CSS selectors and element IDs change. Text content moves. How do you create a "bookmark" that works reliably? 🎯

🎯 What We're Building

A Chrome extension that does all this:

✅ Lets users highlight any text on any page
✅ Stores highlights using stable XPaths
✅ Restores highlights on page reload
✅ Works across different visits
✅ Supports notes and multiple colors

🏗️ Architecture Overview:

User selects text with mouse 🖱️
      ↓
Generate XPath coordinates (start, end, ancestor) 📍
      ↓
Store in chrome.storage with offset info 💾
      ↓
On page load, read storage 📖
      ↓
Resolve XPaths → Recreate selection → Apply highlight 🎨

📦 Setting Up the Extension

📄 manifest.json

{
  "manifest_version": 3,
  "name": "Smart Highlighter",
  "version": "1.0.0",
  "description": "Highlight text with persistent XPath storage",
  "permissions": ["storage", "activeTab"],
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "css": ["highlights.css"],
    "run_at": "document_idle"
  }],
  "action": {
    "default_popup": "popup.html"
  }
}

🎨 highlights.css

.xpath-highlight {
  background-color: rgba(255, 255, 0, 0.4);
  border-bottom: 2px solid #ffeb3b;
  cursor: pointer;
  transition: background-color 0.2s;
}

.xpath-highlight:hover {
  background-color: rgba(255, 255, 0, 0.6);
}

.xpath-highlight-note {
  background-color: rgba(76, 175, 80, 0.3);
  border-bottom: 2px solid #4caf50;
}

.xpath-highlight-important {
  background-color: rgba(244, 67, 54, 0.3);
  border-bottom: 2px solid #f44336;
}

✨ Core Feature: Capturing Text Selections

This is where the magic happens! When users select text, we capture the exact DOM coordinates:

// content.js
import { 
  getXPathForSelection, 
  resolveXPath,
  getXPathForNode 
} from 'dom-xpath-toolkit';

// Listen for text selection
document.addEventListener('mouseup', handleTextSelection);

async function handleTextSelection(e) {
  // Ignore if clicking on existing highlight
  if (e.target.classList.contains('xpath-highlight')) {
    return;
  }

  const selection = window.getSelection();

  // Need actual text selected
  if (!selection || selection.isCollapsed) {
    return;
  }

  const selectedText = selection.toString().trim();
  if (selectedText.length < 3) {
    return; // Too short to be meaningful
  }

  try {
    // This is the magic! ✨
    const selectionData = getXPathForSelection();

    if (!selectionData) {
      console.warn('Could not capture selection data');
      return;
    }

    console.log('✅ Captured selection:', {
      text: selectedText,
      startXPath: selectionData.startXPath,
      endXPath: selectionData.endXPath,
      ancestorXPath: selectionData.ancestorXPath,
      startOffset: selectionData.startOffset,
      endOffset: selectionData.endOffset
    });

    // Store the highlight
    await saveHighlight({
      id: generateId(),
      url: window.location.href,
      text: selectedText,
      timestamp: Date.now(),
      ...selectionData
    });

    // Apply visual highlight immediately
    applyHighlight(selectionData, 'xpath-highlight');

    // Clear selection
    selection.removeAllRanges();

    showToast('✅ Highlight saved!');
  } catch (error) {
    console.error('❌ Failed to save highlight:', error);
    showToast('❌ Failed to save highlight');
  }
}

function generateId() {
  return `highlight_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
}

🗺️ Understanding the Selection Data

Let's break down what getXPathForSelection() returns:

{
  startXPath: '//*[@id="content"]/p[1]/text()[1]',  // 📍 Where selection starts
  startOffset: 15,                                   // 🔢 Character position in start node
  endXPath: '//*[@id="content"]/p[1]/text()[1]',    // 📍 Where selection ends
  endOffset: 43,                                     // 🔢 Character position in end node
  ancestorXPath: '//*[@id="content"]/p[1]',         // 🌳 Closest common parent
  selectedText: 'this is the selected text'         // 📝 The actual text
}

🎯 Think of it like GPS coordinates:

XPath = Street address 🏠
Offset = House number on that street 🔢
Ancestor = The neighborhood 🏘️

This combination gives you an exact, reproducible location in the DOM! 📍

💾 Storing Highlights Persistently

async function saveHighlight(highlight) {
  // Get existing highlights for this URL
  const storageKey = `highlights_${hashUrl(window.location.href)}`;
  const result = await chrome.storage.local.get(storageKey);
  const highlights = result[storageKey] || [];

  // Add new highlight
  highlights.push(highlight);

  // Save back to storage
  await chrome.storage.local.set({
    [storageKey]: highlights
  });

  console.log(`💾 Saved highlight ${highlight.id}`);
}

// Create URL hash for storage key
function hashUrl(url) {
  // Simple hash function
  let hash = 0;
  for (let i = 0; i < url.length; i++) {
    const char = url.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash;
  }
  return Math.abs(hash).toString(36);
}

💡 Why hash the URL? Chrome storage keys have length limits. Hashing keeps keys short and consistent! 🔑

🔄 Restoring Highlights on Page Load

This is where XPath shines! ✨ We can recreate the exact selection from storage:

// Run on page load
async function restoreHighlights() {
  const storageKey = `highlights_${hashUrl(window.location.href)}`;
  const result = await chrome.storage.local.get(storageKey);
  const highlights = result[storageKey] || [];

  console.log(`🔄 Restoring ${highlights.length} highlights...`);

  for (const highlight of highlights) {
    try {
      applyHighlight(highlight, 'xpath-highlight');
    } catch (error) {
      console.warn(`⚠️ Failed to restore highlight ${highlight.id}:`, error);
    }
  }

  console.log('✅ Highlights restored!');
}

// Wait for DOM to be ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', restoreHighlights);
} else {
  restoreHighlights();
}

🎨 The Magic: Applying Highlights with XPath

Here's how we turn XPath coordinates back into visual highlights:

function applyHighlight(highlightData, className) {
  const { startXPath, startOffset, endXPath, endOffset } = highlightData;

  // Resolve XPaths to actual DOM nodes
  const startNode = resolveXPath(startXPath);
  const endNode = resolveXPath(endXPath);

  if (!startNode || !endNode) {
    throw new Error('❌ Could not resolve XPath nodes');
  }

  // Create a Range (native browser API)
  const range = document.createRange();

  try {
    // Set range boundaries using XPath nodes + offsets
    range.setStart(startNode, startOffset);
    range.setEnd(endNode, endOffset);

    // Wrap selection in a <mark> element
    const mark = document.createElement('mark');
    mark.className = className;
    mark.dataset.highlightId = highlightData.id;

    // Surround the range with our mark element
    range.surroundContents(mark);

    // Add click handler for notes/deletion
    mark.addEventListener('click', (e) => {
      handleHighlightClick(highlightData.id, e);
    });

  } catch (error) {
    // Fallback for complex selections spanning multiple nodes
    applyHighlightComplex(range, className, highlightData.id);
  }
}

// Fallback for selections that span multiple nodes
function applyHighlightComplex(range, className, highlightId) {
  // Extract contents
  const fragment = range.extractContents();

  // Wrap in mark
  const mark = document.createElement('mark');
  mark.className = className;
  mark.dataset.highlightId = highlightId;
  mark.appendChild(fragment);

  // Insert back
  range.insertNode(mark);
}

🎯 Key concept: We use the browser's native Range API with XPath-resolved nodes to recreate the exact selection!

📝 Adding Note-Taking Features

Let's make highlights interactive with right-click menus:

function handleHighlightClick(highlightId, event) {
  event.stopPropagation();

  const menu = createContextMenu(highlightId, event.clientX, event.clientY);
  document.body.appendChild(menu);
}

function createContextMenu(highlightId, x, y) {
  const menu = document.createElement('div');
  menu.className = 'highlight-menu';
  menu.style.cssText = `
    position: fixed;
    left: ${x}px;
    top: ${y}px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    padding: 8px;
  `;

  menu.innerHTML = `
    <button class="menu-btn" data-action="note">📝 Add Note</button>
    <button class="menu-btn" data-action="color">🎨 Change Color</button>
    <button class="menu-btn" data-action="delete">🗑️ Delete</button>
  `;

  menu.addEventListener('click', async (e) => {
    const action = e.target.dataset.action;

    switch (action) {
      case 'note':
        await addNoteToHighlight(highlightId);
        break;
      case 'color':
        await changeHighlightColor(highlightId);
        break;
      case 'delete':
        await deleteHighlight(highlightId);
        break;
    }

    menu.remove();
  });

  // Close menu when clicking elsewhere
  setTimeout(() => {
    document.addEventListener('click', () => menu.remove(), { once: true });
  }, 0);

  return menu;
}

async function addNoteToHighlight(highlightId) {
  const note = prompt('📝 Add a note to this highlight:');
  if (!note) return;

  const storageKey = `highlights_${hashUrl(window.location.href)}`;
  const result = await chrome.storage.local.get(storageKey);
  const highlights = result[storageKey] || [];

  const highlight = highlights.find(h => h.id === highlightId);
  if (highlight) {
    highlight.note = note;
    highlight.updatedAt = Date.now();
    await chrome.storage.local.set({ [storageKey]: highlights });

    // Update UI
    const mark = document.querySelector(`[data-highlight-id="${highlightId}"]`);
    if (mark) {
      mark.classList.add('has-note');
      mark.title = note;
    }

    showToast('✅ Note added!');
  }
}

async function deleteHighlight(highlightId) {
  if (!confirm('🗑️ Delete this highlight?')) return;

  const storageKey = `highlights_${hashUrl(window.location.href)}`;
  const result = await chrome.storage.local.get(storageKey);
  let highlights = result[storageKey] || [];

  // Remove from storage
  highlights = highlights.filter(h => h.id !== highlightId);
  await chrome.storage.local.set({ [storageKey]: highlights });

  // Remove from DOM
  const mark = document.querySelector(`[data-highlight-id="${highlightId}"]`);
  if (mark) {
    const parent = mark.parentNode;
    while (mark.firstChild) {
      parent.insertBefore(mark.firstChild, mark);
    }
    mark.remove();
  }

  showToast('✅ Highlight deleted');
}

🎨 Building the Popup UI

Let users manage all their highlights from the extension popup:

📄 popup.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 350px;
      padding: 16px;
      font-family: system-ui;
    }
    .highlight-item {
      padding: 12px;
      margin-bottom: 8px;
      background: #f5f5f5;
      border-radius: 8px;
      border-left: 4px solid #ffeb3b;
      cursor: pointer;
      transition: background 0.2s;
    }
    .highlight-item:hover {
      background: #e0e0e0;
    }
    .highlight-text {
      font-size: 13px;
      color: #333;
      margin-bottom: 4px;
    }
    .highlight-meta {
      font-size: 11px;
      color: #666;
    }
    #export-btn {
      width: 100%;
      padding: 10px;
      background: #667eea;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h2>📚 Your Highlights</h2>
  <div id="highlights-list"></div>
  <button id="export-btn">📤 Export All</button>

  <script src="popup.js"></script>
</body>
</html>

🔧 popup.js

async function loadHighlights() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const url = tab.url;
  const storageKey = `highlights_${hashUrl(url)}`;

  const result = await chrome.storage.local.get(storageKey);
  const highlights = result[storageKey] || [];

  const container = document.getElementById('highlights-list');

  if (highlights.length === 0) {
    container.innerHTML = '<p>📝 No highlights on this page yet.</p>';
    return;
  }

  container.innerHTML = highlights.map(h => `
    <div class="highlight-item" data-id="${h.id}">
      <div class="highlight-text">"${h.text}"</div>
      <div class="highlight-meta">
        📅 ${new Date(h.timestamp).toLocaleDateString()}
        ${h.note ? `• 📝 ${h.note}` : ''}
      </div>
    </div>
  `).join('');
}

document.getElementById('export-btn').addEventListener('click', async () => {
  // Export all highlights as JSON
  const result = await chrome.storage.local.get(null);
  const blob = new Blob([JSON.stringify(result, null, 2)], {
    type: 'application/json'
  });
  const url = URL.createObjectURL(blob);

  await chrome.downloads.download({
    url,
    filename: 'highlights-export.json'
  });

  alert('✅ Highlights exported!');
});

loadHighlights();

⚡ Performance Optimization Tips

1️⃣ Lazy Restoration

Don't restore all highlights immediately—load visible ones first:

async function restoreHighlightsLazy() {
  const highlights = await getHighlightsForPage();

  // Restore above-the-fold immediately
  const visible = highlights.filter(h => isInViewport(h.ancestorXPath));
  visible.forEach(h => applyHighlight(h, 'xpath-highlight'));

  // Restore others on scroll
  const remaining = highlights.filter(h => !isInViewport(h.ancestorXPath));
  document.addEventListener('scroll', () => {
    remaining.forEach(h => {
      if (isInViewport(h.ancestorXPath)) {
        applyHighlight(h, 'xpath-highlight');
      }
    });
  }, { passive: true });
}

function isInViewport(xpath) {
  const element = resolveXPath(xpath);
  if (!element) return false;

  const rect = element.getBoundingClientRect();
  return rect.top < window.innerHeight && rect.bottom > 0;
}

💡 Pro tip: Only render what users can see! This dramatically improves performance on pages with many highlights. 🚀

🔗 Resources & Next Steps

📦 Tools & Documentation:

💬 Let's Connect!

Built something cool with text selection? Share it in the comments below! I'd love to see what you're creating. 👇

Found this helpful? Connect with me on LinkedIn for more Chrome extension tips and tricks:

🔗 Find me on LinkedIn

Building Reliable Content Scripts: Why XPath Beats querySelector in Chrome Extensions

Jay Malli — Sun, 28 Dec 2025 10:19:01 +0000

Ever built a Chrome extension that worked perfectly... until the website updated their CSS classes? 🤦‍♂️

You're not alone. CSS selectors are fragile because they depend on styling decisions that change frequently. Let me show you a better approach using XPath.

🚨 The Problem: CSS Selectors Are Built for Styling, Not Stability

Think of CSS selectors like following directions using landmarks: "Turn left at the blue house". What happens when someone paints the house red? Your directions break. 🏠🎨

Here's a real example I've seen break in production:

// ❌ Fragile approach
const submitButton = document.querySelector('.btn.btn-primary.submit-action');

Why this breaks:

🎨 Marketing team changes btn-primary to btn-brand
🔧 Developer refactors CSS to use utility classes
🧪 A/B test adds .experiment-variant-b class
💥 Your extension stops working

✅ The Solution: XPath with Smart Heuristics

XPath is like having a GPS coordinate system for your DOM. Instead of relying on cosmetic classes, it uses stable identifiers that websites rarely change. 🎯

// ✅ Stable approach
import { getXPathForNode, resolveXPath } from 'dom-xpath-toolkit';

// Generate stable XPath
const submitButton = document.querySelector('[data-testid="submit-form"]');
const stableXPath = getXPathForNode(submitButton);
// Result: //*[@data-testid="submit-form"]

// Later, reliably find it again
const button = resolveXPath('//*[@data-testid="submit-form"]');
button?.click();

🛠️ Real-World Example: Building a Form Auto-Filler

Let's build a content script that automatically fills login forms. I'll show both approaches so you can see the difference.

❌ The Fragile CSS Way

// manifest.json
{
  "manifest_version": 3,
  "content_scripts": [{
    "matches": ["https://example.com/*"],
    "js": ["content.js"]
  }]
}

// content.js - CSS approach
function autofillLogin() {
  const emailField = document.querySelector('.input-field.email');
  const passwordField = document.querySelector('.form-control[type="password"]');
  const submitBtn = document.querySelector('.btn.submit');

  if (!emailField || !passwordField || !submitBtn) {
    console.error('Form elements not found!'); // This happens ALL THE TIME
    return;
  }

  emailField.value = 'user@example.com';
  passwordField.value = 'securepassword123';
  submitBtn.click();
}

autofillLogin();

⚠️ What breaks this:

CSS framework migration (Bootstrap → Tailwind)
Class name obfuscation in production builds
Component library updates
Dynamic class generation from CSS-in-JS

✅ The Stable XPath Way

// content.js - XPath approach
import { 
  resolveXPath, 
  getXPathByAttribute,
  getXPathByLabel 
} from 'dom-xpath-toolkit';

function autofillLogin() {
  // Multiple fallback strategies!
  const emailField = 
    resolveXPath('//*[@name="email"]') ||
    resolveXPath('//*[@type="email"]') ||
    resolveXPath(getXPathByLabel('Email'));

  const passwordField = 
    resolveXPath('//*[@name="password"]') ||
    resolveXPath('//*[@autocomplete="current-password"]');

  const submitBtn = 
    resolveXPath('//*[@type="submit"]') ||
    resolveXPath(getXPathByAttribute('role', 'button', 'Submit'));

  if (!emailField || !passwordField || !submitBtn) {
    console.error('Form elements not found');
    return;
  }

  emailField.value = 'user@example.com';
  passwordField.value = 'securepassword123';
  submitBtn.click();
}

autofillLogin();

💪 Why this is better:

✅ Targets semantic HTML attributes (name, type, autocomplete)
✅ Falls back through multiple strategies
✅ Works across framework rewrites
✅ Survives minification and obfuscation

🎯 Stability Hierarchy: What to Target

The toolkit uses a smart priority system. Here's what it looks for in order:

import { getXPathForNode } from 'dom-xpath-toolkit';

// Priority 1: ID (most stable) 🔑
// <button id="checkout-btn">Buy Now</button>
// Result: //*[@id="checkout-btn"]

// Priority 2: data-* attributes (test IDs) 🧪
// <button data-testid="checkout">Buy Now</button>
// Result: //*[@data-testid="checkout"]

// Priority 3: Semantic attributes 📋
// <button name="submit" type="submit">Buy Now</button>
// Result: //button[@type="submit" and @name="submit"]

// Priority 4: ARIA attributes ♿
// <button aria-label="Checkout">Buy Now</button>
// Result: //*[@aria-label="Checkout"]

// Last resort: Structure 🏗️
// <div><button>Buy Now</button></div>
// Result: //div/button[contains(text(),"Buy Now")]

📦 Installation in Your Extension

Setting up the toolkit takes 2 minutes:

npm install dom-xpath-toolkit

Then bundle it with your extension:

// content.js
import { getXPathForNode, resolveXPath } from 'dom-xpath-toolkit';

// Now you can use it anywhere in your content scripts!

⚠️ When NOT to Use XPath

XPath isn't always the answer. Stick with CSS selectors when:

✅ You control the HTML (your own popup/options page)
✅ You need :hover, ::before pseudo-selectors (XPath can't do these)
✅ Performance on massive DOMs (CSS is slightly faster)

But for content scripts interacting with third-party sites? XPath wins every time. 🏆

🎮 Try It Yourself

I've built a live playground where you can test XPath generation on real websites:

👉 XPath Toolkit Playground

Features:

🧪 Test different heuristic strategies
📊 See stability scores for each selector
📋 Copy generated XPaths directly

📚 Quick Reference

GitHub: dom-xpath-toolkit

npm: dom-xpath-toolkit

🤝 Let's Connect!

If you found this guide helpful, let's keep the conversation going! I regularly post deep dives, security tips, and new projects I'm working on.

Connect with me on LinkedIn—I'd love to hear about what you're building.

Find me on LinkedIn

🛠️ Build Your First Chrome Extension (with a React Bonus)

Jay Malli — Tue, 15 Jul 2025 21:47:30 +0000

Ever been browsing the web and thought, "I wish I could just add a little button here that does this"? Well, you can! Chrome extensions are your gateway to customizing your browsing experience, and they're surprisingly easy to build.

In this guide, we'll create a simple but powerful Chrome extension from scratch. By the end, you'll have a working extension that can:

🎨 Change the background color of any website.
🔔 Show desktop notifications.
💾 Save and load data.
🚀 Inject a floating button onto any page.

Ready to become a browser magician? Let's dive in!

📂 The File Structure

First, create a new folder. Inside, we'll create the following files. This is the complete anatomy of our simple extension.

my-first-extension/
├── manifest.json       # The most important file; the extension's blueprint
├── popup.html          # The UI you see when you click the icon
├── popup.js            # The logic for our popup
├── background.js       # The extension's brain, runs in the background
├── content.js          # Code that runs on the webpages you visit
├── content.css         # Styles for our code on webpages
└── icons/              # Folder for our extension's icons
    ├── icon16.png
    ├── icon32.png
    ├── icon48.png
    └── icon128.png

The "Restaurant" Analogy for Chrome Extensions

To make sense of how these files work together, let's use an analogy. Think of your Chrome extension as a small, efficient restaurant operating inside the larger city of your browser.

manifest.json (The Restaurant License & Menu): This is your official business license. It tells the city (Chrome) your restaurant's name, where it is, what it needs to operate (permissions like electricity and water), and what's on the menu (the features you offer). Without it, you can't even open.
popup.html & popup.css (The Front Counter): This is the customer-facing part of your restaurant. It's where customers walk up, see the daily specials, and place their orders. It needs to be clean, well-designed (popup.css), and easy to understand (popup.html).
popup.js (The Cashier): The cashier takes the customer's order. They listen for what the customer wants ("I'll have the 'Change Background' special!"), press the right buttons on the register, and send the order to the kitchen. They are the direct link between the customer and the back-of-house operations.
background.js (The Head Chef & Kitchen): This is the heart of the operation. The kitchen runs constantly, even when there are no customers at the counter. The head chef receives orders from the cashier and knows how to prepare everything on the menu (like making a "Notification"). It also handles background tasks like receiving supplies (alarms) or managing the restaurant's inventory (storage).
content.js (The Waiter Delivering to a Table): Sometimes, an order isn't for takeout; it's for a customer already seated in the main dining hall (a webpage). The content script is the waiter who takes the prepared dish from the kitchen, walks out into the dining hall, and delivers it directly to the customer's table, sometimes even rearranging the salt and pepper shakers on the table (modifying the DOM).

Together, this team creates a seamless experience, from ordering at the counter to enjoying a feature on a webpage!

1. The Blueprint: `manifest.json`

Every extension must have a manifest.json file. It's the control center that tells Chrome everything it needs to know about your extension.

{
  "manifest_version": 3,
  "name": "My First Chrome Extension",
  "version": "1.0",
  "description": "A simple Chrome extension for beginners",
  "permissions": [
    "activeTab",
    "notifications",
    "storage",
    "scripting",
    "alarms"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

What does this all mean?

"manifest_version": 3: We're using the latest and greatest Chrome extension platform version.
"permissions": This is crucial. We're asking for permission to use certain Chrome APIs. We need "scripting" to run code on pages, "notifications" to show alerts, and so on.
"action": Defines what happens when you click the extension icon in the toolbar. We're telling it to open popup.html.
"background": Points to our background script, the extension's persistent brain.
"content_scripts": This is where the magic happens. We're telling Chrome to inject content.js and content.css into every webpage ("<all_urls>").

2. The Face: `popup.html` & `popup.js`

When you click your extension's icon, a small window appears. That's the popup, and it's just a tiny webpage.

popup.html is a standard HTML file with some buttons and a status area.

<!DOCTYPE html>
<html>
<head>
    <style>
        body { width: 300px; padding: 15px; /* ... and other styles */ }
        button { width: 100%; padding: 10px; margin: 5px 0; }
    </style>
</head>
<body>
    <h1>My First Extension</h1>
    <button id="changeBackground">Change Page Background</button>
    <button id="showNotification">Show Notification</button>
    <div class="status" id="status">Ready to use!</div>
    <script src="popup.js"></script>
</body>
</html>

popup.js brings the popup to life. It listens for clicks and tells other parts of the extension what to do.

Here's the most interesting part—changing the page background:

// In popup.js
document.getElementById('changeBackground').addEventListener('click', async () => {
    const [tab] = await chrome.tabs.query({active: true, currentWindow: true});

    // 💡 Pro Tip: You can't run scripts on Chrome's internal pages!
    // So we add a check to give the user a friendly message.
    if (tab.url.startsWith('chrome://')) {
        document.getElementById('status').textContent = '❌ Cannot run on Chrome pages.';
        return;
    }

    chrome.scripting.executeScript({
        target: {tabId: tab.id},
        function: changePageBackground // This function is executed on the webpage
    });
});

// This function is NOT in popup.js's scope.
// It gets sent to the content script to be executed.
function changePageBackground() {
    const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    document.body.style.backgroundColor = randomColor;
}

This is a key concept: the popup is a separate world. To affect a webpage, it uses the chrome.scripting.executeScript API to send a function to be executed on that page.

3. The Engine Room: `background.js`

The background script is a service worker. It's the extension's core, always ready to listen for events, even when the popup is closed.

// In background.js
console.log('Background script loaded');

// Listen for messages from other scripts (like the popup)
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'showNotification') {
        chrome.notifications.create({
            type: 'basic',
            iconUrl: 'icons/icon48.png',
            title: 'Extension Notification',
            message: 'Hello from your extension!'
        });
        sendResponse({success: true});
    }
    return true; // Keep the message channel open for async response
});

Here, the background script listens for a message with the action showNotification. Why do this here and not in the popup? Because the background script persists. It can handle tasks like notifications, alarms, or listening for tab updates, which don't depend on a UI being open.

4. The Infiltrator: `content.js` & `content.css`

The content script is your agent inside the webpage. It has access to the page's DOM, allowing it to read and modify content.

// In content.js
console.log('Content script loaded on:', window.location.href);

// Create a floating button and add it to the page
const button = document.createElement('button');
button.id = 'myExtensionButton';
button.textContent = '🚀 My Extension';
button.className = 'my-extension-floating-btn';

button.addEventListener('click', () => {
    alert('Hello from the content script!');
});

document.body.appendChild(button);

This script creates a button, gives it some text and a class, and appends it to the <body> of every page you visit.

Of course, an unstyled button looks ugly. That's where content.css comes in. These styles are also injected into the page to make our button look fabulous.

/* In content.css */
.my-extension-floating-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 10px 15px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

🛠️ Installation & Debugging

You've written the code, now let's bring it to life!

Open Chrome and navigate to chrome://extensions.
Flick the "Developer mode" switch in the top-right corner.
Click the "Load unpacked" button.
Select the folder containing your extension files.

Your extension should now appear in your toolbar!

"Houston, we have a problem." How do you debug?

Popup: Right-click the extension icon and select "Inspect popup". A DevTools window will open for the popup.
Background Script: On the chrome://extensions page, find your extension and click the "Inspect views: service worker" (or similar) link.
Content Script: Open DevTools (F12) on any webpage where your script is running. Your logs will appear in that page's console, prefixed with your extension's name.

💻 Source Code for the Simple Extension

You can find the complete code for the vanilla JavaScript extension covered in this tutorial on GitHub.

Get the code: Simple Chrome Extension Starter

🎉 What's Next?

You've done it! You've built a fully functional Chrome extension. You've learned about the manifest, popups, background scripts, and content scripts—the fundamental building blocks of all extensions.

This is just the beginning. You can now explore other powerful Chrome APIs:

chrome.storage: For more complex data storage.
chrome.contextMenus: Add options to the right-click menu.
chrome.webRequest: Intercept and modify network requests.

🎁 Bonus Section: Level Up with React and Webpack!

The vanilla JavaScript approach is perfect for simple extensions, but what if you want to build something more complex? What if you love using frameworks like React or Vue?

You absolutely can! But it requires a build step.

Why Do I Need a Build Step?

Browsers don't understand React's JSX syntax out of the box. We need a tool to convert our modern, framework-based code into the plain HTML, JavaScript, and CSS that Chrome can understand.

What is Webpack?

Webpack is a module bundler. It takes all your project files (React components, CSS-in-JS, different JS modules), processes them, and bundles them into a few static files that are ready for the browser.

Modern Project Structure

Your source code would look a little different. Instead of writing directly into popup.js, you'd have a src folder.

my-react-extension/
├── src/
│   ├── popup/
│   │   ├── Popup.jsx       # Your React component
│   │   └── index.js        # Entry point to render the component
│   ├── background/
│   │   └── index.js        # Your background script
│   └── content/
│       └── index.js        # Your content script
├── public/
│   ├── manifest.json
│   ├── popup.html          # A simple HTML template
│   └── icons/
│       └── icon128.png
└── webpack.config.js       # The magic configuration file

The Webpack Configuration (`webpack.config.js`)

This file tells Webpack how to bundle everything. It looks intimidating, but it's quite logical.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 1. Entry points: Define which files are the start of each bundle.
  entry: {
    popup: './src/popup/index.js',
    background: './src/background/index.js',
    content: './src/content/index.js',
  },
  // 2. Output: Where to put the final bundled files.
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  // 3. Modules & Rules: How to handle different file types.
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // For any .js or .jsx file...
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // ...use Babel to transpile it to older JS.
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  // 4. Plugins: Extra tools to help the build process.
  plugins: [
    // Creates popup.html in the 'dist' folder from our template.
    new HtmlWebpackPlugin({
      template: './public/popup.html',
      filename: 'popup.html',
      chunks: ['popup'], // Only include the 'popup.bundle.js' in this HTML file.
    }),
    // Copies static files (like manifest.json and icons) to the 'dist' folder.
    new CopyWebpackPlugin({
      patterns: [
        { from: 'public/manifest.json', to: 'manifest.json' },
        { from: 'public/icons', to: 'icons' },
      ],
    }),
  ],
};

The Final Step: The Build

After setting this up, you'd run a command like npm run build. Webpack would then generate a dist folder.

This dist folder contains the vanilla, browser-readable code. This is the folder you would load into Chrome as your "unpacked extension."

This approach lets you use all the power of modern web development to build amazing, complex, and maintainable Chrome extensions.

💻 Source Code for the React Extension

Want to skip the setup and dive right into building with React? Here is a complete starter template with Webpack, React, and Chakra UI pre-configured.> [Get the code: React Chrome Extension Starter(https://github.com/JayMalli/My-First-Chrome-Extension/tree/main/ReactJs_extension)

🤝 Let's Connect!

If you found this guide helpful, let's keep the conversation going! I regularly post deep dives, security tips, and new projects I'm working on.

Connect with me on LinkedIn—I'd love to hear about what you're building.

Find me on LinkedIn

What will you build next? A tool to save your favorite articles? A theme customizer for your favorite website? The possibilities are endless.

Share your ideas in the comments below! Happy coding!

🚀 Unlocking G Suite SSO in Your Chrome Extension: The Definitive Manifest V3 Guide

Jay Malli — Tue, 15 Jul 2025 20:38:10 +0000

Ever dreamed of building a Chrome extension that seamlessly integrates with a user's Google Workspace? Imagine your users, with a single click, securely logging in and unlocking a world of productivity. It sounds amazing, right?

But then, you hit a wall. A big, scary, red-bricked wall called Manifest V3. 🧱

You start seeing errors that make you want to flip your desk:

Refused to execute inline script because it violates the following Content Security Policy...
OAuth2 client ID is not supported...

If you've tried to implement Google SSO, you know the struggle. Manifest V3's strict security policies have made old methods obsolete. So, how do you navigate this new, secure world?

Don't worry, we've got the map! 🗺️ This guide will walk you through the modern, secure, and Google-approved way to implement G Suite SSO in your Manifest V3 extension.

🚦 Before We Dive In: A Quick Stop for Beginners

This guide jumps right into the deep end with a specific, slightly advanced topic: G Suite SSO in Manifest V3.

If you're just starting your journey and terms like manifest.json, service worker, or content script are still new to you, I highly recommend checking out my foundational guide first. It covers the A-to-Z of building your very first extension and is the perfect starting point to get you up to speed.

🛠️ Build Your First Chrome Extension (with a React Bonus)

Once you've got the basics down, come on back—this post will be waiting for you!

The Manifest V3 Challenge: Why Is It So Hard? 👹

Google's Manifest V3 is all about making extensions safer and more private. While this is great for users, it means:

No More Remote Code: You can't load scripts from external servers.
Service Workers Only: Background tasks run in ephemeral service workers.
Strict Content Security Policy (CSP): Inline scripts and eval() are forbidden.

These changes mean the old "just do a web redirect" OAuth flow is a recipe for disaster. The solution? We need to use the tool Google built specifically for this job.

The Hero of Our Story: The `chrome.identity` API ✨

Meet the chrome.identity API. This is your magic wand for handling OAuth 2.0 within a Chrome extension. It provides a secure UI prompt, managed by Chrome itself, to handle the entire authentication flow without redirects or popups that get blocked.

Let's build this, step-by-step.

Step 1: Get Your Extension ID & Cloud Credentials ⚔️

Before you can get OAuth credentials, you need the unique ID of your extension. This is a crucial step that's often missed, as Google needs to know exactly which extension is allowed to use your credentials.

First, Find Your Extension ID

Make sure your extension is loaded in Chrome. If you haven't already, go to chrome://extensions.
Enable Developer mode in the top right corner.
Click Load unpacked and select your extension's folder.
Your extension will appear in the list with a unique ID (a long string of letters).
Copy this ID! You'll need it in the next part.

Next, Create OAuth Credentials

Now that you have your ID, head to the Google Cloud Platform.

Go to the Google Cloud Console.
Create a new project (e.g., "My Awesome Extension").
Navigate to APIs & Services > Credentials.
Click + CREATE CREDENTIALS and select OAuth client ID.
For Application type, you MUST select Chrome Extension. > Warning > This is the most common mistake—do not choose "Web application"!
Give it a name (e.g., "Extension GSuite Login").
In the Application ID/Item ID field, paste the unique extension ID you just copied from chrome://extensions.
Click CREATE. You will now see your Client ID. Copy this! We'll need it for the manifest file.

Step 2: Crafting the Perfect `manifest.json` 📜

Your manifest.json is the blueprint. It needs to declare the right permissions and your OAuth Client ID.

// filepath: manifest.json
{
    "manifest_version": 3,
    "name": "G Suite SSO Login Demo",
    "version": "1.0",
    "description": "A secure way to implement G Suite SSO with Manifest V3.",
    "permissions": [
        "identity",
        "storage",
        "alarms"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html"
    },
    "oauth2": {
        "client_id": "YOUR_CLIENT_ID.apps.googleusercontent.com",
        "scopes": [
            "https://www.googleapis.com/auth/userinfo.profile",
            "https://www.googleapis.com/auth/userinfo.email"
        ]
    },
}

Step 3: The Authentication Logic (`popup.js`) 🧠

This is where the user interaction happens. A "Login" button will trigger the chrome.identity flow.

The core function is chrome.identity.getAuthToken({ interactive: true }, ...). The interactive: true flag tells Chrome it's okay to show a user prompt if they aren't already logged in.

function getAuthToken() {
        return new Promise((resolve, reject) => {
            chrome.identity.getAuthToken({ interactive: true }, function(token) {
                if (chrome.runtime.lastError) {
                    reject(chrome.runtime.lastError);
                } else {
                    resolve(token);
                }
            });
        });
    }

Step 4: The Service Worker (`background.js`) ⚙️

What about keeping the user logged in? Tokens expire! The service worker handles this gracefully in the background using the chrome.alarms API. This is the Manifest V3-approved way to run periodic tasks like checking if an auth token needs a silent refresh.

async function refreshToken() {
    try {
        const result = await chrome.storage.local.get(['accessToken']);
        if (result.accessToken) {
            // Try to get a new token
            const newToken = await new Promise((resolve, reject) => {
                chrome.identity.getAuthToken({ interactive: false }, (token) => {
                    if (chrome.runtime.lastError) {
                        reject(chrome.runtime.lastError);
                    } else {
                        resolve(token);
                    }
                });
            });

            if (newToken && newToken !== result.accessToken) {
                await chrome.storage.local.set({ accessToken: newToken });
                console.log('Token refreshed successfully');
            }
        }
    } catch (error) {
        console.error('Token refresh failed:', error);
        // Clear invalid token
        await chrome.storage.local.clear();
    }
}

🛡️ Bonus Level: Fortifying Your Extension

A working extension is great, but a secure extension is professional. Here are the essential security measures we've baked in to make our extension enterprise-ready.

1. The VIP List: Origin & Action Whitelisting 📜

Your extension shouldn't talk to just any website. Use an allowedOrigins array to ensure only your trusted web domains can send messages. In manifest.json, enforce this with externally_connectable.

2. The Bouncer: Rate Limiting ✋

To prevent DoS attacks, we allow a maximum of 10 requests per minute from any single origin. If a script goes over the limit, it gets rejected until the cooldown period is over.

3. The Principle of Least Privilege: Data Minimization 📦

When a trusted website asks for user information, we don't hand over the keys to the kingdom. We only provide the absolute minimum data necessary. Never send the access token to the web page.

4. The Automatic Lock: Session Management ⏳

Leaving a logged-in session active forever is a security risk. Our extension implements a 4-hour session timeout. If the user is inactive, their session data is cleared, and they will need to authenticate again.

You've Done It! 🎉

Congratulations! You've successfully navigated the Manifest V3 maze and implemented a secure, modern, and user-friendly G Suite SSO login.

By using the chrome.identity API and layering in robust security measures, you've built an extension that is not only functional but also respects user privacy—the core principle of Manifest V3.

💻 Grab the Full Source Code

Ready to see how all the pieces fit together? The complete, production-ready code for this extension is waiting for you on GitHub.

Feel free to dive in, fork the repository, and use it as a launchpad for your own projects. Pull requests and stars are always welcome!

View the Project on GitHub

🤝 Let's Connect!

If you found this guide helpful, let's keep the conversation going! I regularly post deep dives, security tips, and new projects I'm working on.

Connect with me on LinkedIn—I'd love to hear about what you're building.

Find me on LinkedIn

Happy coding!

🔮 Keyboard Wizardry: How to Capture Any Key Press Across Windows with C#

Jay Malli — Fri, 02 May 2025 11:59:35 +0000

Have you ever wondered how applications like hotkey managers or keystroke recorders work their magic? How do they intercept keystrokes even when they're not in focus? The secret lies in something called "keyboard hooks" - a powerful yet somewhat mysterious feature of Windows programming.

In this blog post, we'll demystify global keyboard hooks by building a simple WPF application that listens for the F1 key press anywhere in Windows. Whether you're a beginner looking to understand Windows hooks or an experienced developer wanting to implement global hotkeys, this guide will walk you through the process step by step.

💪 Power in Your Hands: Once you master keyboard hooks, you can completely customize Windows' keyboard behavior - redirect keys to launch applications, block problematic keys, create custom shortcuts that work everywhere, or even transform standard keys into specialized functions for specific applications!

🪝 What Are Windows Hooks?

Before diving into the code, let's understand what Windows hooks are:

📘 Windows Hooks are mechanisms that let your application intercept events (like keyboard or mouse input) before they reach their intended application, allowing you to monitor or modify the system's behavior.

Think of Windows as a bustling city with messages constantly flowing between different parts of the system
A hook is like setting up a checkpoint on a busy street
This checkpoint lets you inspect (and potentially intercept) messages before they reach their destination
You can choose to block certain messages while allowing others to pass through

💡 Real-Life Analogy: Imagine you're a traffic controller who only cares about red cars (F1 key presses). You set up a checkpoint (hook) where you can see all vehicles (keystrokes), but you only stop the red ones while letting everything else continue normally.

The Overall Structure

Our application is a simple WPF window that sets up a low-level keyboard hook to detect F1 key presses system-wide. Here's how the overall structure looks:

namespace MyWpfApp
{
    public partial class F1KeyListener : Window
    {
        // DLL imports and constants
        // Hook-related fields and delegates
        // Hook setup and callback methods
        // Cleanup code
    }
}

📦 Importing Native Methods

Windows hooks require calling into native Windows functionality that isn't directly available in .NET. We use P/Invoke (Platform Invocation Services) to import these functions.

📘 What is P/Invoke? P/Invoke is a technology that allows you to call functions in unmanaged DLLs (like Windows system DLLs) from your managed .NET code - think of it as a bridge between .NET and native Windows functionality.

[DllImport("user32.dll")]
private static extern IntPtr SetWindowsHookEx(int idHook, LowLevelKeyboardProc lpfn, IntPtr hMod, uint dwThreadId);

[DllImport("user32.dll")]
private static extern bool UnhookWindowsHookEx(IntPtr hhk);

[DllImport("user32.dll")]
private static extern IntPtr CallNextHookEx(IntPtr hhk, int nCode, IntPtr wParam, IntPtr lParam);

[DllImport("kernel32.dll")]
private static extern IntPtr GetModuleHandle(string lpModuleName);

What these imports do:

SetWindowsHookEx: Establishes a hook in the Windows system
UnhookWindowsHookEx: Removes a previously set hook
CallNextHookEx: Passes the hook information to the next hook in the chain
GetModuleHandle: Retrieves a module handle for the specified module

💡 Real-Life Analogy: Think of these imports as hiring specialized contractors who know how to work with the building's infrastructure (Windows OS). Since our .NET application doesn't natively "speak" the low-level Windows language, we need these translators to help us communicate with the system.

📋 The Constants and Definitions

private const int WH_KEYBOARD_LL = 13;
private const int WM_KEYDOWN = 0x0100;

private delegate IntPtr LowLevelKeyboardProc(int nCode, IntPtr wParam, IntPtr lParam);
private LowLevelKeyboardProc _proc;
private IntPtr _hookId = IntPtr.Zero;

📘 What is a delegate? A delegate in C# is a type that represents references to methods with a specific parameter list and return type - essentially a type-safe function pointer that lets you pass methods as arguments.

Understanding the constants:

WH_KEYBOARD_LL (value 13) tells Windows we want a low-level keyboard hook
WM_KEYDOWN (0x0100) is the message sent when a key is pressed down

📘 What is IntPtr?
IntPtr is a platform-specific type that represents a pointer or a handle - it's sized according to the platform's word size (32-bit or 64-bit) and is commonly used when interacting with native code.

Understanding the delegate and fields:

The LowLevelKeyboardProc delegate defines the signature of our callback function
_proc is our instance of this callback
_hookId stores the reference to our active hook

💡 Real-Life Analogy: These constants are like special codes or frequencies we need to tune into. The delegate defines the shape of our callback function - it's like specifying what information our checkpoint officer needs to receive to do their job.

🔌 Setting Up the Hook

public F1KeyListener()
{
    _proc = HookCallback;
    StartHook();
}

private void StartHook()
{
    _hookId = SetHook(_proc);
}

private IntPtr SetHook(LowLevelKeyboardProc proc)
{
    using var curProcess = System.Diagnostics.Process.GetCurrentProcess();
    using var curModule = curProcess.MainModule;
    return SetWindowsHookEx(WH_KEYBOARD_LL, proc, GetModuleHandle(curModule.ModuleName), 0);
}

📘 What is Process.GetCurrentProcess? A method that retrieves an object representing the currently running process, giving you access to information about your application as it runs.

Constructor steps:

Create our callback method (_proc = HookCallback)
Call StartHook() to set up the checkpoint

SetHook method breakdown:

Gets information about our current process and module
Calls SetWindowsHookEx with these parameters:
- Hook type (WH_KEYBOARD_LL)
- Our callback method (proc)
- The module handle
- Thread ID (0 means all threads)

💡 Real-Life Analogy: It's like telling Windows: "Please notify this specific officer (HookCallback) whenever any keyboard activity happens in the system."

❤️ The Heart of the Hook: The Callback

private IntPtr HookCallback(int nCode, IntPtr wParam, IntPtr lParam)
{
    if (nCode >= 0 && wParam == (IntPtr)WM_KEYDOWN)
    {
        int vkCode = Marshal.ReadInt32(lParam);
        Key key = KeyInterop.KeyFromVirtualKey(vkCode);

        if (key == Key.F1)
        {
            MessageBox.Show("F1 key was pressed!");
            return (IntPtr)1; // Prevent further processing
        }
    }

    return CallNextHookEx(_hookId, nCode, wParam, lParam);
}

📘 What is Marshal.ReadInt32? Marshal.ReadInt32 is a method from the System.Runtime.InteropServices namespace that reads a 32-bit integer from unmanaged memory - it's used to extract data from pointers when working with native code.

📘 What is KeyInterop? KeyInterop is a WPF utility class that converts between Windows virtual key codes and WPF Key values, making it easier to work with keyboard input in WPF applications.

Callback decision flow:

Check if the notification is valid (nCode >= 0) and if it's a key-down event
Extract the virtual key code from the lParam
Convert the Windows virtual key code to a WPF Key value
If it's the F1 key:
- Show a message box
- Return 1 (meaning "I'll handle this, don't pass it along")
For all other keys:
- Call the next hook in the chain with CallNextHookEx

Parameter meanings:

nCode - Hook code; if negative, the hook procedure must pass the message
wParam - Identifier of the keyboard message (WM_KEYDOWN, WM_KEYUP, etc.)
lParam - Pointer to a structure containing details about the keystroke

💡 Real-Life Analogy: Think of it as your checkpoint officer letting all vehicles pass except for the red ones (F1 keys), which get special treatment.

🧹 Proper Cleanup

private void StopHook()
{
    if (_hookId != IntPtr.Zero)
    {
        UnhookWindowsHookEx(_hookId);
        _hookId = IntPtr.Zero;
    }
}

protected override void OnClosed(EventArgs e)
{
    StopHook();
    base.OnClosed(e);
}

Cleanup process:

The StopHook() method:
- Checks if we have an active hook
- Calls UnhookWindowsHookEx to remove our hook
- Resets the hook ID to zero
The OnClosed override:
- Ensures StopHook() is called when the window closes
- Calls the base class implementation

Why cleanup matters:

Prevents resource leaks
Avoids interference with other applications
Follows Windows programming best practices
Ensures your application behaves properly

💡 Real-Life Analogy: Good code is like a good camper - it always cleans up after itself! Without this, our checkpoint might keep operating even after we've packed up and gone home.

🔤 Bonus: Capturing Key Combinations

private bool _isCtrlPressed = false;
private const int WM_KEYUP = 0x0101;

private IntPtr HookCallback(int nCode, IntPtr wParam, IntPtr lParam)
{
    // Track When Key is Pressed
    if (nCode >= 0 && wParam == (IntPtr)WM_KEYDOWN)
    {
        int vkCode = Marshal.ReadInt32(lParam);
        Key key = KeyInterop.KeyFromVirtualKey(vkCode);

        if (key == Key.LeftCtrl || key == Key.RightCtrl)
        {
            _isCtrlPressed = true;
        }
        else if (key == Key.C && _isCtrlPressed)
        {
            MessageBox.Show("Ctrl+C was pressed!");
            _isCtrlPressed = false; // Reset the flag after handling
            return (IntPtr)1; // Prevent further processing
        }
    }

    // Track when Ctrl key is released
    else if (nCode >= 0 && wParam == (IntPtr)WM_KEYUP)
    {
        int vkCode = Marshal.ReadInt32(lParam);
        Key key = KeyInterop.KeyFromVirtualKey(vkCode);

        if (key == Key.LeftCtrl || key == Key.RightCtrl)
        {
            _isCtrlPressed = false;
        }
    }

    return CallNextHookEx(_hookId, nCode, wParam, lParam);
}

🏁 Conclusion

Our F1 key listener demonstrates the fundamental pattern that powers countless productivity tools, accessibility features, and gaming utilities. Next time you use a hotkey in your favorite application, you'll have a better understanding of the magic happening behind the scenes!

📂 GitHub Repository
Get the complete source code for this keyboard hook example and more at my GitHub repository: github.com/JayMalli/Keyboard_Wizardry

🔗 Connect with Me

If you found this article helpful, I'd love to connect with you! Check out more of my work and stay updated.

💼 Professional Network
Connect with me on LinkedIn for more insights: linkedin.com/in/jaymalli

🌐 Portfolio
Visit my portfolio website to see more of my projects : Portfolio - Jay Malli

👍 Spread the Word
Did you find this tutorial helpful? Please consider:

Sharing this article with fellow developers
Giving the repository a star on GitHub
Commenting below with your questions or keyboard hook creations

📚 Further Resources

Microsoft Docs: Windows Hooks
P/Invoke: Platform Invocation Services
Low-level Keyboard Hooks in WPF

Have you built interesting applications using Windows hooks? Share your experiences in the comments below!

Implement G-suit Chat Service in .NET Using Google Chat API

Jay Malli — Tue, 19 Dec 2023 18:32:07 +0000

Hello Devs! Today, we'll delve into the implementation of G Suite Chat Service in .NET using C#. Our primary focus will be on the service implementation rather than the application itself. Feel free to choose any application type based on your specific requirements. For the purpose of this guide, I'll be using a .NET Maui app to demonstrate the service implementation. Let's get started on incorporating G Suite Chat functionality into your .NET projects!

Initial Setup
Configure Our App & Services
Chat Service Code

Step - 1 : Initial Setup

1.1 : Get Client Id & Secret as well as access & refresh token.

=> Before we start coding, create an API key and credentials for your application in the GCP console. And after that get access_token & refresh_token by authorizing user using Oauth service. Check out this blog for step-by-step instructions: blog reference.

=> Follow steps 1 to 3 outlined in the above-mentioned blog to create a client ID and client secret.
=> Follow steps 4 to 7 outlined in the above-mentioned blog to get the access_token & refresh_token.

1.2 : Add scopes in Admin Console

=> Add the following scopes in the Admin Console under Security >> Access And Data Control >> API controls >> Domain-Wide delegation.

Note : If you encounter a '400 Invalid Scope' error, resolve it by removing the scope 'https://www.googleapis.com/auth/chat.bot' from both the Admin Console settings and any corresponding sections within your code.

=> For detailed steps on adding scopes in the Admin Console, check out this blog.

Step - 2 : Configure Our App & Services

2.1 : Add necessary NuGet packages

=> Install the NuGet package from the this website

Google.Apis.HangoutsChat.v1 (Recommended version: 1.64.0.3230)
Google.Apis.PeopleService.v1 (Recommended version: 1.64.0.3093)
Google.Apis (Recommended version: 1.64.0)
Google.Apis.Core (Recommended version: 1.64.0)
Google.Apis.Auth (Recommended version : 1.64.0)

Note : Keep in mind that if you'll use pacakge 1.60 or below that then you'll getting this error in future : "userChatService.Spaces.List()" method is not found in given namespace , so you have to use latest version & if there are other google packages with version 1.60 or below which was creating version conflicting issue then upgrade all google pacakges with its latest version.

2.2 : Enable the required APIs

=> Enable the following Google APIs from the Google Cloud Console under APIs & Services >> Library section.

People API
Google Chat API

Note: To address the error, 'The service chat has thrown an exception. HttpStatusCode is NotFound. Google Chat app not found. To create a Chat app, you must turn on the Chat API and configure the app in the Google Cloud console,' configure the app in the Chat API section of the Google Cloud Console.

=> Navigate to the CONFIGURATION tab in the Google Chat API.

=> Complete the necessary details, including App name, Avatar URL, Description, and App URL in the CONFIGURATION tab of the Google Chat API. Save the changes by clicking the save button.

Step - 3 : Let's do some code

3.1 : Get User Credentials

=> Generate user credentials from the access_token to gain access to different G Suite Chat and People services for that user. Following this, initialize the user's chat service and people service.

ChatService.cs :

using Google;
using Google.Apis.Auth.OAuth2;
using Google.Apis.Auth.OAuth2.Flows;
using Google.Apis.Auth.OAuth2.Responses;
using Google.Apis.HangoutsChat.v1;
using Google.Apis.HangoutsChat.v1.Data;
using Google.Apis.PeopleService.v1;
using Google.Apis.PeopleService.v1.Data;
using Google.Apis.Services;

namespace YOUR_APP.services
{
    public class ChatService
    {
        public HangoutsChatService _hangoutsChatService { get; set; }
        public PeopleServiceService _peopleService { get; set; }
        public ChatService(string access_token, string refresh_token)
        {
            UserCredential userCredential = GenerateCredentialFromAccessToken(access_token, refresh_token);

            _peopleService = new PeopleServiceService(new BaseClientService.Initializer()
            {
                HttpClientInitializer = userCredential,
                ApplicationName = "YOUR_APP_NAME",
            });
            _hangoutsChatService = new HangoutsChatService(new BaseClientService.Initializer() { HttpClientInitializer = userCredential, ApplicationName = "YOUR_APP_NAME" });

        }
        private UserCredential GenerateCredentialFromAccessToken(string accessToken, string refreshToken)
        {
            UserCredential credential;
            string[] Scopes = { PeopleServiceService.Scope.Contacts, PeopleServiceService.Scope.ContactsOtherReadonly, HangoutsChatService.Scope.ChatSpaces, HangoutsChatService.Scope.ChatMessages };

            TokenResponse tokenResponse = new TokenResponse
            {
                AccessToken = accessToken,
                RefreshToken = refreshToken
            };

            var initializer = new GoogleAuthorizationCodeFlow.Initializer
            {
                // get from gcp console under  API & Services >> Credentials section
                ClientSecrets = new ClientSecrets
                {
                    ClientId = "your_app_client_id",
                    ClientSecret = "your_app_client_secret"
                },
                Scopes = Scopes,
            };

            credential = new UserCredential(new GoogleAuthorizationCodeFlow(initializer), userId: "user", tokenResponse);

            return credential;
        }

3.2 : Retrive Spaces

=> Retrieve all spaces for a user, encompassing chats between two individuals, group conversations, or discussions involving multiple members within a space.

=> Identify individual user spaces with the type 'DIRECT_MESSAGE' and spaces containing multiple members with the type 'SPACE'.

ChatService.cs :

...

// other code

...

 private List<Dictionary<string, string>> GetAllSpaces()
        {
            List<Dictionary<string, string>> spaces = new List<Dictionary<string, string>>();
            try
            {
                SpacesResource.ListRequest req = _hangoutsChatService.Spaces.List();
                req.Fields = "spaces(name,displayName,spaceType)";
                ListSpacesResponse res = req.Execute();
                if (res.Spaces.Count > 0)
                {
                    foreach (Space space in res.Spaces)
                    {
                        Dictionary<string, string> dict = new Dictionary<string, string>();
                        dict.Add("id", space.Name);
                        dict.Add("displayName", space.DisplayName);
                        dict.Add("type", space.SpaceType);
                        spaces.Add(dict);
                    }
                }

            }
            catch (GoogleApiException ex)
            {
                Console.WriteLine(ex.Message);
            }
            return spaces;
        }

3.2 : Retrive Chats

=> Retrieve chats from each space, including sender information and thread details.

ChatService.cs :

...
// other code
...

        public List<Dictionary<string, string>> GetChatsOfSpace(string spaceId)
        {
            List<Dictionary<string, string>> chats = new List<Dictionary<string, string>>();
            try
            {
                SpacesResource.MessagesResource.ListRequest req = _hangoutsChatService.Spaces.Messages.List(spaceId);
                req.Fields = "messages(sender,text,name,thread)";
                ListMessagesResponse res = req.Execute();
                if (res.Messages != null)
                {
                    foreach (Message msg in res.Messages)
                    {
                        Dictionary<string, string> dict = new Dictionary<string, string>();
                        dict.Add("threadId", msg.Thread.Name);
                        dict.Add("text", msg.Text);
                        string senderName = GetSenderOfChat(msg.Sender.Name);
                        dict.Add("senderName", senderName);
                        chats.Add(dict);
                    }
                }

                return chats;

            }
            catch (GoogleApiException ex)
            {
                Console.WriteLine(ex.Message);
                return chats;
            }

        }

        private string GetSenderOfChat(string senderId)
        {
            string resourceName = senderId.Replace("users/", "people/");
            PeopleResource.GetRequest req = _peopleService.People.Get(resourceName);
            req.PersonFields = "names";
            Person person = req.Execute();
            if (person?.Names != null && person.Names.Count > 0)
            {
                return person.Names[0].DisplayName;
            }

            return "Unknown User";

        }

=> If you want to explore more about the Google Chat API, including available methods, required scopes, and the request-response body of different methods, refer to this resource : Google Chat API

=> You can also refer to this documentation for the Google People API. Google People API

=> The example above demonstrates how to implement google chat/hangout service in .NET MAUI using c#, you can find the necessary code in the repository mentioned below.

=> GithHub Repository

Thank you for joining me on this journey of discovery and learning. If you found this blog post valuable and would like to connect further, I'd love to connect with you on LinkedIn. You can find me at LinkedIn

If you have thoughts, questions, or experiences related to this topic, please drop a comment below.

Develop & Publish .NET MAUI Application for Mac using Visual Studio Code

Jay Malli — Fri, 01 Dec 2023 12:39:08 +0000

Hello Developers,

=> So today we are developing a basic app using .NET maui framework & we'll publish it for the Mac platform.

=> .NET MAUI, which stands for .NET Multi-platform App UI, is an open-source, cross-platform framework for building native mobile and desktop applications. It is an evolution of the Xamarin.Forms framework and is part of the broader .NET ecosystem.

Before we start our work , let's install required tools.

Step - 1 : Installation task

-> Add required Extensions in vs code

C# (by Microsoft)
.NET Runtime Install Tool (by Microsoft)

-> after that open settings & search Omnisharp , make sure that
"Use Omnisharp" checkbox is enabled.

-> check above tools are installed successfully or not by following commands from terminal.

dotnet --list-sdks
dotnet --list-runtimes

-> Check whether maui workload is exist not.

dotnet workload list

-> List all available workloads.

dotnet workload search

-> Install maui workload

dotnet workload install maui

-> Check installed workload

dotnet workload list

Step - 2 : Create Maui Project

-> Create Maui Template.

dotnet new maui

-> open the [project_name].csproj file & perform following acions

remove net7.0-android
comment windows platform tag

-> perform restore & build.

dotnet restore (add nuget packages,mentioned in .csproj file)

dotnet build

-> You may encounter the following error. You can either upgrade the Xcode version or add the following tags in the .csproj file.

<PropertyGroup>
     <ErrorOnDuplicatePublishOutputFiles>false</ErrorOnDuplicatePublishOutputFiles>
        <MtouchLink>SdkOnly</MtouchLink>
        <GenerateRuntimeConfiguratonFiles>true</GenerateRuntimeConfiguratonFiles>
    </PropertyGroup>

dotnet build

Step - 3 : Let's do some code

=> Add fonts :

-> Add OpenSans-Regular.ttf & OpenSans-Semibold.ttf fonts file in the Resources/Fonts folder. (check out my GitHub repo for required resources : Repo)

=> AppShell.xaml :

// remove title from header
<ShellContent
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="MainPage"
    Shell.NavBarIsVisible="False" 
/>

=> MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Groot_App_Maui.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Image
                Source="groot_img.jpg" // Add this image in resources folder
                SemanticProperties.Description="Cute groot waving hi to you!"
                HeightRequest="400"
                HorizontalOptions="Center" />

            <Label
                Text="I am Groot!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

              <Button
                FontAttributes="Bold"  
                Text="Click Me"  
                FontSize="{OnPlatform WinUI=16, MacCatalyst=18}"
                HorizontalOptions="Center"
                Clicked="OnClickBtn"  
             /> 

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

=> Add below image in Resources/Images folder.

=> MainPage.xaml.cs :

// remove unnecessary code

namespace Groot_App_Maui;

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();
    }

        public async void OnClickBtn(object sender, EventArgs e)
    {
        await 
 Application.Current.MainPage.DisplayAlert(null, "Again I am Groot :)", "OK");
    } 
}

-> Add icon image in Resources/AppIcon folder

=> [project_name].csproj :

// other code
<ItemGroup>
        <!-- App Icon -->
        <MauiIcon Include="Resources\AppIcon\app_icon.png"/>
</ItemGroup>

-> modify icon name in /Platforms/MacCataslyst/Info.plist file

    <key>XSAppIconAssets</key>
    <string>Assets.xcassets/groot_app_icon.appiconset</string>

-> modify icon name in /Platforms/iOS/Info.plist file

<key>XSAppIconAssets</key>
<string>Assets.xcassets/groot_app_icon.appiconset</string>

-> Modify Properties/launchSettings.json file

{
  "profiles": {
    "Windows (Debug)": {
      "commandName": "Project",
      "commandLineArgs": "--device windows --theme Light",
      "workingDirectory": "$(ProjectDir)",
      "launchBrowser": true,
      "launchUrl": "",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "Windows (Release)": {
      "commandName": "Project",
      "commandLineArgs": "--device windows --theme Light",
      "workingDirectory": "$(ProjectDir)",
      "launchBrowser": true,
      "launchUrl": "",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Production"
      }
    },
    "Mac (Debug)": {
      "commandName": "Project",
      "commandLineArgs": "--device macos --theme Light",
      "workingDirectory": "$(ProjectDir)",
      "launchBrowser": true,
      "launchUrl": "",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "Mac (Release)": {
      "commandName": "Project",
      "commandLineArgs": "--device macos --theme Light",
      "workingDirectory": "$(ProjectDir)",
      "launchBrowser": true,
      "launchUrl": "",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Production"
      }
    }
  }
}

Step - 4 : lets run our app

dotnet build
dotnet run -f net7.0-maccatalyst (from .csproj file)

-> yaahh!!!

Step - 5 : Its time to publish our app

-> We'll create a pkg for our app.

-> Modify bundleId in .csproj file
<ApplicationId>com.companyname.groot_app_maui</ApplicationId>

-> Modify Info.plist file for mac & ios

<key>CFBundleIdentifier</key>
    <string>com.companyname.groot_app_maui</string>
<key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>NSHumanReadableCopyright</key>
    <string>Groot © 2023</string>
    <key>ITSAppUsesNonExemptEncryption</key>
    <false/>
    <key>NSDownloadsUsageDescription</key>
    <string>We need access to your Downloads folder to do XYZ.</string>

-> Create Entitlements.plist file Platforms/mac & add below code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.app-sandbox</key>
    <true/>
    <key>com.apple.security.network.client</key>
    <true/>
    <key>com.apple.security.cs.allow-jit</key>
    <true/><!-- Specify permissions for accessing user's location -->
    <key>com.apple.security.personal-information.location</key>
    <true/><!-- Specify permissions for accessing user's contacts -->
    <key>com.apple.security.personal-information.contacts</key>
    <true/><!-- Specify permissions for accessing user's photos -->
    <key>com.apple.security.assets.photos.read-write</key>
    <true/>
  </dict>
</plist>

=> Publish app without signed certificate

dotnet publish -f net7.0-maccatalyst -c Release -r maccatalyst-x64

-> If you encounter this error in the production app,

Attempting to JIT compile method '(wrapper delegate-invoke) Google.Apis.Drive.v3.Data.User :invoke_callvirt_User_About (Google.Apis.Drive.v3.Data.About)' while running in aot-only mode. See https://docs.microsoft.com/xamarin/ios/internals/limitations for more information.

then add UseInterpreter tag in the csproj file.

<PropertyGroup>
     <ErrorOnDuplicatePublishOutputFiles>false</ErrorOnDuplicatePublishOutputFiles>
        <MtouchLink>SdkOnly</MtouchLink>
        <UseInterpreter>true</UseInterpreter><GenerateRuntimeConfiguratonFiles>true</GenerateRuntimeConfiguratonFiles>
    </PropertyGroup>

-> Open the terminal and execute the following command to monitor the logs of the app while the installation task is currently executing.

tail -f /private/var/log/install.log

-> Additionally, open the Console and click on the start button to monitor logs of our app and view crash reports if the app crashes.

-> If you encounter this error in the console after installing the app from the app package and your published app is not working, then ignore it. There is no reason to believe that the app is not working because of this error. I also got this error in my console, & still app is working. :)

Non-fatal error enumerating at , continuing: Error Domain=NSCocoaErrorDomain Code=260 "The file “PlugIns” couldn’t be opened because there is no such file." UserInfo={NSURL=PlugIns/ -- app_path/Contents/, NSFilePath=/Users/mufaddalbharmal/Desktop/app_name.app/Contents/PlugIns, NSUnderlyingError=0x7f7d61708ad0 {Error Domain=NSPOSIXErrorDomain Code=2 "No such file or directory"}}

-> You can see in the yellow-highlighted part that there is no sign of a lock, which means our app is not verified.

=> Create Signed Certificate :

-> First, we need to create a signed certificate. Follow the steps outlined in the provided documentation on creating signed certificates for your app: Docs for certificate

-> Now, publish our app with the signature created by the certificate.

dotnet publish -f net7.0-maccatalyst -c Release -p:MtouchLink=SdkOnly -p:CreatePackage=true -p:EnableCodeSigning=true -p:EnablePackageSigning=true -p:CodesignKey="your_certificate_codesignkey" -p:CodesignProvision="DSR_DevID" -p:CodesignEntitlements="Platforms\MacCatalyst\Entitlements.plist" -p:PackageSigningKey="your_certificate_codesignkey" -p:UseHardenedRuntime=true

where ,

CodesignKey : The name of the code signing key. Set to the name of your distribution certificate, as displayed in Keychain Access.
e.g.CodesignKey="Developer ID Application: *** (***)"

PackageSigningKey : same as CodesignKey

CodesignProvision :The provisioning profile to use when signing the app bundle.

-> Now you can see there is a lock at the top right corner, indicating that our app is verified and trusted.

-> Yaah!!! our production app ready!

=> The example above demonstrates how to develop & publish .NET maui app for Mac platform , you can find the necessary code in the repository mentioned below.

=> GithHub Repository

If you have thoughts, questions, or experiences related to this topic, please drop a comment below.

Develop & Publish .NET MAUI Application for Windows using Visual Studio Code

Jay Malli — Sat, 25 Nov 2023 16:42:44 +0000

Hello Developers,

=> So today we are developing a basic app using .NET maui framework & we'll publish it for the Windows platform.

Before we start our work , let's install required tools.

Step - 1 : Installation task

-> Add required Extensions in vs code

C# (by Microsoft)
.NET Runtime Install Tool (by Microsoft)

-> after that open settings & search Omnisharp , make sure that
"Use Omnisharp" checkbox is enabled.

-> check above tools are installed successfully or not by following commands from terminal.

dotnet --list-sdks
dotnet --list-runtimes

-> Check whether maui workload is exist not.

dotnet workload list

-> List all available workloads.

dotnet workload search

-> Install maui workload

dotnet workload install maui

-> Check installed workload

dotnet workload list

Step - 2 : Create Maui Project

-> Create Maui Template.

dotnet new maui

-> open the [project_name].csproj file & perform following acions

comment this tag net7.0-android;net7.0-ios;net7.0-maccatalyst

dotnet restore (add nuget packages,mentioned in .csproj file)

dotnet build

Step - 3 : Let's do some code

=> Add fonts :

-> Add OpenSans-Regular.ttf & OpenSans-Semibold.ttf fonts file in the Resources/Fonts folder. (check out my github repo for required resources : Repo)

=> AppShell.xaml :

// remove title from header
<ShellContent
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="MainPage"
    Shell.NavBarIsVisible="False" 
/>

=> MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Groot_App_Maui.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Image
                Source="groot_img.jpg" // Add this image in resources folder
                SemanticProperties.Description="Cute groot waving hi to you!"
                HeightRequest="400"
                HorizontalOptions="Center" />

            <Label
                Text="I am Groot!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

              <Button
                FontAttributes="Bold"  
                Text="Click Me"  
                FontSize="{OnPlatform WinUI=16, MacCatalyst=18}"
                HorizontalOptions="Center"
                Clicked="OnClickBtn"  
             /> 

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

-> Please add the Groot image to the Resources/Images folder and the Groot app icon to the Resources/AppIcon folder. You can obtain these files from this repository.

=> MainPage.xaml.cs :

// remove unnecessary code

namespace Groot_App_Maui;

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();
    }

        public async void OnClickBtn(object sender, EventArgs e)
    {
        await 
 Application.Current.MainPage.DisplayAlert(null, "Again I am Groot :)", "OK");
    } 
}

=> [project_name].csproj :

// other code
<ItemGroup>
        <!-- App Icon -->
        <MauiIcon Include="Resources\AppIcon\app_icon.png"/>
</ItemGroup>

Step - 4 : Lets run our app

dotnet run -f net7.0-windows10.0.19041.0 (from .csproj file)

-> yaa yaa! "I know Groot; I forgot to modify the launch settings file of the app."

-> The launchSettings.json is used to configure various settings related to the debugging and launching of your application for different environments and configurations.

=> Modify Properties/launchSettings.json file

{
  "profiles": {
    "Windows (Debug)": {
      "commandName": "Project",
      "commandLineArgs": "--device windows --theme Light",
      "workingDirectory": "$(ProjectDir)",
      "launchBrowser": true,
      "launchUrl": "",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "Windows (Release)": {
      "commandName": "Project",
      "commandLineArgs": "--device windows --theme Light",
      "workingDirectory": "$(ProjectDir)",
      "launchBrowser": true,
      "launchUrl": "",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Production"
      }
    },
    "Mac (Debug)": {
      "commandName": "Project",
      "commandLineArgs": "--device macos --theme Light",
      "workingDirectory": "$(ProjectDir)",
      "launchBrowser": true,
      "launchUrl": "",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "Mac (Release)": {
      "commandName": "Project",
      "commandLineArgs": "--device macos --theme Light",
      "workingDirectory": "$(ProjectDir)",
      "launchBrowser": true,
      "launchUrl": "",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Production"
      }
    }
  }
}

-> Again run app

dotnet build
dotnet run -f net7.0-windows10.0.19041.0

-> If the app is not launched or running, then check the Events Log in the Event Viewer,

Search Menu >> Event Viewer >> Windows Logs >> Application

-> If you encounter this error, add the following code to the .csproj file.

=> .csproj file :

<WindowsAppSDKSelfContained>true</WindowsAppSDKSelfContained><WindowsPackageType>None</WindowsPackageType>

-> Again run app

dotnet build
dotnet run -f net7.0-windows10.0.19041.0

Yaahh!

Step - 5 : Its time to publish our app

-> We will create an MSIX package to publish the app. For that, we need to create a self-signed certificate to demonstrate our app.

-> If you want to learn more about the MSIX package, please visit: MSIX Docs

=> Create Self Signed Certificate :

-> Open PowerShell as an administrator and execute the following commands:

New-SelfSignedCertificate -Type Custom -Subject "CN=<PublisherName>"
-KeyUsage DigitalSignature -FriendlyName "My temp dev cert"
-CertStoreLocation "Cert:\CurrentUser\My" `
-TextExtension @("2.5.29.37={text}1.3.6.1.5.5.7.3.3", "2.5.29.19={text}")

// replace PublisherName with name of author e.g. CN=JayMalli

-> You will receive the thumbprint of the certificate upon successful creation. Copy that thumbprint.

-> Execute this command in PowerShell to get all thumbprints.

Get-ChildItem "Cert:\CurrentUser\My" | Format-Table Subject, FriendlyName, Thumbprint

=> Export Certificate :

-> Open the 'Manage User Certificates' dialogue box using the search menu.

-> Go to Personal>>Certificates>> tab

-> The self signed certificate is not verified & valid for 1 year.

-> Export the certificate by following these steps.

-> Navigate to the details tab in that certificate dialogue box ,

Click on Copy to file button >> Next
do not export private key >> Next
DERbinary Encoded >> Next
Specify location & file name by browse option >> Next
Finish

-> You can find the exported certificate at the specified location in the file system.

=> Verify Certificate :

-> Open manage computer certificates

-> Navigate to the 'Trusted Root Certification Authorities.

Right click on Certificates tab
All task>> import
Local machine should be checked >> Next
Click on browse button
Select certificate from location where you previously stored
Place all ecrtifcates in following store should be enable
Next >> Finish

-> Now, go back to 'Manage User Certificates' and check that the certificate is verified

=> Sign our app using created certificate :

-> add below code in .csproj file

// Replace your_certificate_thumbprint with the previously created thumbprint, which was generated in PowerShell.

-> update below code in .csproj file

// comment this tags for production mode of app
// Update the App ID to the appropriate name.

=> Configure resources for production app:

-> Create an 'Assets' folder and place all resources in it. Please check this repository for reference.

-> Modify Package.appxmanifest file with below code.

// Replace 'Your_Name' with the name you want to display as the publisher in the app.

// Replace 'Your_thumbprint_Name' with the name which was provided in the creation of thumprint.

-> Reference this repo for code.

=> Publish App:

-> execute following command in the terminal

// Replace 'your_certificate_thumbprint' with the previously created thumbprint, which was generated in PowerShell.

dotnet build /restore /t:publish /p:TargetFramework=net7.0-windows10.0.19041.0 /p:configuration=release /p:GenerateAppxPackageOnBuild=true /p:AppxPackageSigningEnabled=true /p:PackageCertificateThumbprint=your_certificate_thumbprint

-> Open the MSIX package in the file storage and launch it

Install app

Launch app

=> finally Groot is here! :)

=> The example above demonstrates how to develop & publish .NET maui app for windows platform , you can find the necessary code in the repository mentioned below.

=> GithHub Repository

If you have thoughts, questions, or experiences related to this topic, please drop a comment below.

Gsuit/Google Drive API integration in .NET MAUI

Jay Malli — Sun, 22 Oct 2023 09:50:52 +0000

Hello Developers, we had implemented google OAuth 2.0 service for authoring user with google sign in the previous blog.

If you couldn't get the chance to check that blog then check it out, Hurry up! I'm waiting for you here!!!

=> Previous Blog

=> A Quick flashback of our previous Blog :

Google Developer Account >> Create Oauth Client Id >> implement OAuth service >> Get the access__token & refresh_token.

Now, It's time to use that tokens in some useful way. So we are integrating drive API in our app to get the user's drive data.

So, First enable the Google Drive API from the API Services of Google cloud console

After that go to Admin Console.

Go to Security -> Access And Data Control -> API controls -> Domain-Wide delegation.

Add new API Client by click on "Add new"

Provide the Client Id which was created previously which can be get from Google cloud console under the credentails > Oauth Client Id tab.

If you want to know that how to create client Id then check this previous blog

And provide this Oauth Scope for Drive access:

Authorize the provided client Id to access the google drive.

Makke sure that Drive & Docs Service is ON from the Admin Console

Now it's time to do some code!

=> Required Nuget Packages :

The basic code for the Auth serivce is available in the below repository which we had done in previous blog.
Github Repository

Here , we are implementing the feature of getting files from the drive which contains specific keywords.

=> code for Drive.cs

using Google.Apis.Drive.v3;
using File = Google.Apis.Drive.v3.Data.File;

namespace gsuit_api_maui
{

    public class Drive
    {
        public Drive()
        {
        }

        public List<File> GetDriveFiles(string[] keywords, DriveService driveService)
        {
            List<File> Files = new List<File>();
            foreach (string keyword in keywords)
            {
                try
                {
                    FilesResource.ListRequest files = driveService.Files.List();
                    files.Fields = "nextPageToken,files(id,name,mimeType,webViewLink,permissions)";
                    files.Corpora = "user";
                    files.IncludeItemsFromAllDrives = true;
                    files.IncludeTeamDriveItems = true;
                    files.SupportsAllDrives = true;
// filter for  files which contains specific keyword
                    files.Q = $"fullText contains '\"{keyword}\"'";
                    List<File> result = (List<File>)files.Execute().Files;
                    Files.AddRange(result);
                }
                catch (Exception ex)
                {
                    Console.WriteLine(ex.Message);
                }

            }
            return Files;
        }
    }
}

You can find the necessary code in the repository mentioned below.

GithHub Repository

If you have thoughts, questions, or experiences related to this topic, please drop a comment below.

Implement Logging Service in .NET MAUI

Jay Malli — Thu, 19 Oct 2023 03:37:19 +0000

Hello Devs, In this blog we'll learn that how to implement file based Logging service in .NET MAUI without using any external library/packages.

First of all, add below code in the MainPage.xaml.cs file which is located at the root of project directory.

using System.Diagnostics;
using System.Reflection;
using System.Runtime.ExceptionServices;
namespace logs;

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();

        AppDomain.CurrentDomain.FirstChanceException += CurrentDomain_FirstChanceException;
    }

    private void CurrentDomain_FirstChanceException(object sender, FirstChanceExceptionEventArgs e)
    {
        if (e.Exception is Exception ex)
        {
            LogException(ex);
        }
    }

    private void LogException(Exception ex)
    {
        string logsFilePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "app_logs.txt");
        try
        {
            // Get information about the method that caused the exception.        
            StackFrame sf = new StackFrame(1);
            MethodBase method = sf.GetMethod();
            int line = sf.GetFileLineNumber();

            // Create a log message with thread ID, timestamp, method information, and the exception message.

            string exMsg = Environment.CurrentManagedThreadId + " ~ " + DateTime.Now.ToString() + method.DeclaringType.FullName + "::" + line + "-" + GetErrorMessage(ex);

            // Append the log message to the specified log file.
            File.AppendAllText(logsFilePath, exMsg + Environment.NewLine + Environment.NewLine);
        }
        catch (Exception exe)
        {
            // If there's an exception while logging, write the error message to the console.
            Console.WriteLine(exe.Message);
        }
    }

    private string GetErrorMessage(Exception ex)
    {
        if (ex != null)
        {
            string message = ex.StackTrace + " " + ex.Message;
            if (ex.InnerException != null)
            {
                message += "~ Caused By" + GetErrorMessage(ex.InnerException);
            }
            return message;
        }

        return string.Empty;
    }

}

Let's Understand above Code.

=> AppDomain.CurrentDomain.FirstChanceException += CurrentDomain_FirstChanceException :

This line subscribes the CurrentDomain_FirstChanceException method to the FirstChanceException event of the current application domain. This event is raised whenever an exception is thrown in the application.

=> LogException(Exception ex) :

This method is responsible for logging exceptions to a file.
It constructs a log file path (logsFilePath) within the application's base directory and attempts to log the exception information to it.
It uses StackFrame to retrieve information about the method that caused the exception, such as the method name and line number.

=> GetErrorMessage(Exception ex):

This is a recursive method that retrieves the error message and stack trace for an exception, including any inner exceptions.

After that use try catch block in the code where you want to get logs if any exception occurs. here we add try-catch block in the MainPage.xaml.cs file for demonstrate.

private void OnCounterClicked(object sender, EventArgs e)
    {
        throw new Exception("Counter Button Clicked!");
    }

    private void OnGetFilesClicked(object sender, EventArgs e)
    {
        try
        {
               // there is no any directory exist , so exception will be occured
            string path = "/demo_logs";
            Directory.GetFiles(path);
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
    }

=> Logging file location (according to specified path in the code):

for windows --> bin\Debug\net7.0-windows10.0.19041.0\win10-x64\app_logs.txt
for MacOs --> bin/Debug/net7.0-maccatalyst/maccatalsyt-x64/[Project_Name].app/Contents/MonoBundle/app_logs.txt

=> Logs :

You can find the necessary code in the repository mentioned below.

GithHub Repository

If you have thoughts, questions, or experiences related to this topic, please drop a comment below.

Google OAuth 2.0 authorization service implementation in .NET MAUI

Jay Malli — Wed, 18 Oct 2023 06:14:52 +0000

Hello Programmers!, So today we'll learn that how to implement google OAuth 2.0 authorization service & integrate in .NET MAUI using WebView controls.

Step - 1 :

Create your Google Developer Account at Google Developer , if you han't any!
Open Cloud Console and click on DropDown menu then create on "New Project".

Step - 2 :

Go to "API & Services Tab by Clicking on menu icon of current project then Click on "Credentials".

Click on "Create Credentials" Button and select "Oauth client ID" option.

Step - 3 :

Select Application Type accroding to your requirement & provide Name.

Add redirect URI for app on which user is redirected after authorized.
Click on "Create Button"
Get the Client Id & Client Secrets.

STEP - 4 :

Setup basic maui App.
create authorization service & add below code.

namespace App
{
    public static class Auth
    {
        public static string ConstructGoogleSignInUrl()
        {
            // Specify the necessary parameters for the Google Sign-In URL
            const string clientId = "your_app_clientId";

            const string responseType = "code";
            const string accessType = "offline";
            const string redirect_uri = "your_app_redirect_uri";

            // Construct the Google Sign-In URL
            return "https://accounts.google.com/o/oauth2/v2/auth" +
                            $"?client_id={Uri.EscapeDataString(clientId)}" +
                            $"&redirect_uri={Uri.EscapeDataString(redirect_uri)}" +
                            $"&response_type={Uri.EscapeDataString(responseType)}" +
                            $"&scope={Uri.EscapeDataString(scope)}" +
                            $"&access_type={Uri.EscapeDataString(accessType)}" +
                            "&include_granted_scopes=true" +
                            "&prompt=consent";


        }


    }
}

Step - 5 :

Load webview with the google login screen on button click.

private void OnGetFilesClicked(object sender, EventArgs e)
    {
        WebView _signInWebView = new WebView
        {
            Source = Auth.ConstructGoogleSignInUrl(),
            VerticalOptions = LayoutOptions.Fill,
        };

    }
ContentPage signInContentPage = new ContentPage
        {
            Content = grid,
        };

        try
        {
            Application.Current.MainPage.Navigation.PushModalAsync(signInContentPage);
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }

Step - 6 :

The Google Login screen is visible after clicked on button. Fill the user email id & password, Click "Allow" button on oauth consent scrren.

you will get the code in the redirect URL if user authorized successfully.

Step - 7 :

Get access token from the code which was provided by URL after authorizing a user.
- Add required nuget packages 1) Newtonsoft

 public static (string, string) ExchangeCodeForAccessToken(string code)
        {

            // Configure the necessary parameters for the token exchange
            const string clientId = "your_app_client_id";
            const string clientSecret = "your_app_client_secret";
            const string redirectUri = "your_app_redirect_URI";

            // Create an instance of HttpClient
            using (HttpClient client = new HttpClient())
            {
                // Construct the token exchange URL
                const string tokenUrl = "https://oauth2.googleapis.com/token";

                // Create a FormUrlEncodedContent object with the required parameters
                FormUrlEncodedContent content = new FormUrlEncodedContent(new Dictionary<string, string>
              {
                   { "code", code },
                   { "client_id", clientId },
                   { "client_secret", clientSecret },
                   { "redirect_uri", redirectUri },
                   { "grant_type", "authorization_code" }
              });

                // Send a POST request to the token endpoint to exchange the code for an access token
                HttpResponseMessage response = client.PostAsync(tokenUrl, content).Result;

                // Check if the request was successful
                if (response.IsSuccessStatusCode)
                {
                    // Read the response content
                    string responseContent = response.Content.ReadAsStringAsync().Result;

                    // Parse the JSON response to extract the access token
                    JObject json = JObject.Parse(responseContent);
                    string accessToken = json.GetValue("access_token").ToString();
                    string refreshToken = json.GetValue("refresh_token").ToString();
                    return (accessToken, refreshToken);
                }
                else
                {
                    // Exception:  "Token exchange request failed with status code: {response.StatusCode}"
                }
            }

            return (null, null);
        }

Get the access_token & refresh_token which is used to create credentials for access services API such as Drive , Gmail API etc.

// other code...

_signInWebView.Navigating += (sender, e) =>
       {

           string code = Auth.OnWebViewNavigating(e, signInContentPage);
           if (e.Url.StartsWith("http://localhost") && code != null)
           {

               (string access_token, string refresh_token) = Auth.ExchangeCodeForAccessToken(code);
           }

       };

You can find the necessary code in the repository mentioned below.

GithHub Repository

If you have thoughts, questions, or experiences related to this topic, please drop a comment below.

Extract Content From ODF files using C#

Jay Malli — Sun, 10 Sep 2023 12:08:06 +0000

Basically, LibreOffice is a popular open-source office suite that provides users with the ability to create and edit documents, presentations, spreadsheets, and more. Files created with LibreOffice often have the Open Document Format (ODF) extension, such as .odt for text documents and .ods for spreadsheets.

Our requirement is to open this type of ODF files & extract content from it. We can't extract content from ODF files directly using File Class of IO namespace, then what should do?

Yaa right! if could get the data of file in XML then we can also get content from that XML data. Let's take example for Word doc file [LibreOffice Writer] which have extension ".odt" .

Step - 1 : Get the ODF file data in XML format

Step - 2: Filter out all .xml files & get xml data. "content.xml" file contains the content/text of file.

Step - 3 : Now Extract text content from XML data.

=> Source Code :

using System.IO.Compression;
using System.Xml;

namespace Content
{
    public class ODF
    {
        public  string ReadText(string filePath)
        {
            string textContent = "";

            using (ZipArchive zipArchive = ZipFile.OpenRead(filePath))
            {
                foreach (var entry in zipArchive.Entries)
                    {
                        if (entry.FullName.EndsWith(".xml", StringComparison.OrdinalIgnoreCase))
                        {
                            using StreamReader reader = new StreamReader(entry.Open());
                            string xmlContent = reader.ReadToEnd();
                          textContent += ExtractTextFromXml(xmlContent);  
                        }
                    }
            }

            return textContent; // output : text content 
        }

        public string ExtractTextFromXml(string xmlContent)
        {
            string textContent = "";

            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.LoadXml(xmlContent);

            // add required namespace for different types of documents
            XmlNamespaceManager nsManager = new XmlNamespaceManager(xmlDoc.NameTable);
            nsManager.AddNamespace("text", "urn:oasis:names:tc:opendocument:xmlns:text:1.0"); // for doc files with extension .odt   
            nsManager.AddNamespace("office", "urn:oasis:names:tc:opendocument:xmlns:office:1.0"); // comman for all ODF files  

            foreach (XmlNode node in xmlDoc.SelectNodes("//text:p | //text:h", nsManager))
            {
                textContent += node.InnerText + Environment.NewLine;
            }

            return textContent;
        }
    }
}

=> The example above demonstrates how to extract text content from a .odt document file. If you would like to extract content from other ODF files, such as spreadsheets (.ods) or presentations/ppt (.ods), you can find the necessary code in the repository mentioned below.

=> GithHub Repository

If you have thoughts, questions, or experiences related to this topic, please drop a comment below.

Forem: Jay Malli

Building Text Annotation Chrome Extensions with XPath Selection Tracking

🚨 The Challenge: Text Has No Permanent Address

What You Actually Need:

🎯 What We're Building

🏗️ Architecture Overview:

📦 Setting Up the Extension

📄 manifest.json

🎨 highlights.css

✨ Core Feature: Capturing Text Selections

🗺️ Understanding the Selection Data

🎯 Think of it like GPS coordinates:

💾 Storing Highlights Persistently

🔄 Restoring Highlights on Page Load

🎨 The Magic: Applying Highlights with XPath

📝 Adding Note-Taking Features

🎨 Building the Popup UI

📄 popup.html

🔧 popup.js

⚡ Performance Optimization Tips

1️⃣ Lazy Restoration

🔗 Resources & Next Steps

📦 Tools & Documentation:

💬 Let's Connect!

Building Reliable Content Scripts: Why XPath Beats querySelector in Chrome Extensions

🚨 The Problem: CSS Selectors Are Built for Styling, Not Stability

Why this breaks:

✅ The Solution: XPath with Smart Heuristics

🛠️ Real-World Example: Building a Form Auto-Filler

❌ The Fragile CSS Way

⚠️ What breaks this:

✅ The Stable XPath Way

💪 Why this is better:

🎯 Stability Hierarchy: What to Target

📦 Installation in Your Extension

⚠️ When NOT to Use XPath

🎮 Try It Yourself

Features:

📚 Quick Reference

🤝 Let's Connect!

🛠️ Build Your First Chrome Extension (with a React Bonus)

📂 The File Structure

The "Restaurant" Analogy for Chrome Extensions

1. The Blueprint: manifest.json

2. The Face: popup.html & popup.js

3. The Engine Room: background.js

4. The Infiltrator: content.js & content.css

🛠️ Installation & Debugging

💻 Source Code for the Simple Extension

🎉 What's Next?

🎁 Bonus Section: Level Up with React and Webpack!

Why Do I Need a Build Step?

What is Webpack?

Modern Project Structure

The Webpack Configuration (webpack.config.js)

The Final Step: The Build

💻 Source Code for the React Extension

🤝 Let's Connect!

🚀 Unlocking G Suite SSO in Your Chrome Extension: The Definitive Manifest V3 Guide

🚦 Before We Dive In: A Quick Stop for Beginners

The Manifest V3 Challenge: Why Is It So Hard? 👹

The Hero of Our Story: The chrome.identity API ✨

Step 1: Get Your Extension ID & Cloud Credentials ⚔️

First, Find Your Extension ID

Next, Create OAuth Credentials

Step 2: Crafting the Perfect manifest.json 📜

Step 3: The Authentication Logic (popup.js) 🧠

Step 4: The Service Worker (background.js) ⚙️

🛡️ Bonus Level: Fortifying Your Extension

1. The VIP List: Origin & Action Whitelisting 📜

2. The Bouncer: Rate Limiting ✋

3. The Principle of Least Privilege: Data Minimization 📦

4. The Automatic Lock: Session Management ⏳

You've Done It! 🎉

💻 Grab the Full Source Code

🤝 Let's Connect!

🔮 Keyboard Wizardry: How to Capture Any Key Press Across Windows with C#

🪝 What Are Windows Hooks?

The Overall Structure

📦 Importing Native Methods

1. The Blueprint: `manifest.json`

2. The Face: `popup.html` & `popup.js`

3. The Engine Room: `background.js`

4. The Infiltrator: `content.js` & `content.css`

The Webpack Configuration (`webpack.config.js`)

The Hero of Our Story: The `chrome.identity` API ✨

Step 2: Crafting the Perfect `manifest.json` 📜

Step 3: The Authentication Logic (`popup.js`) 🧠

Step 4: The Service Worker (`background.js`) ⚙️