Google Meet Chrome Extension Enhancer: A Developer Guide

Building a Chrome extension that enhances Google Meet opens up powerful possibilities for customizing the video conferencing experience. This guide walks you through the core concepts, APIs, and practical implementation patterns for creating a Google Meet enhancement extension.

Understanding the Google Meet Environment

Google Meet runs as a complex Single Page Application (SPA) built with web technologies. The interface loads dynamically, meaning your extension must account for DOM changes that occur after the initial page load. The main meeting interface includes video tiles, controls bar, chat panel, and participant list—all rendered dynamically.

To interact with Google Meet, your extension needs to inject content scripts that run in the context of the Meet page. This gives you access to the DOM and allows you to manipulate elements, intercept events, and add custom functionality.

Setting Up Your Extension Manifest

Every Chrome extension begins with a manifest file. For Google Meet enhancement, you’ll need Manifest V3:

{
  "manifest_version": 3,
  "name": "Meet Enhancer",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["https://meet.google.com/*"],
  "content_scripts": [{
    "matches": ["https://meet.google.com/*"],
    "js": ["content.js"],
    "run_at": "document_idle"
  }]
}

The host_permissions key is critical—you must explicitly declare access to Google Meet’s domain. Without this, your content script won’t execute on Meet pages.

Detecting Meeting State and Elements

Google Meet uses dynamic class names and element structures that can change between versions. The extension needs robust element detection using multiple strategies:

// Wait for Meet interface to load
function waitForElement(selector, timeout = 10000) {
  return new Promise((resolve, reject) => {
    const element = document.querySelector(selector);
    if (element) return resolve(element);

    const observer = new MutationObserver(() => {
      const element = document.querySelector(selector);
      if (element) {
        observer.disconnect();
        resolve(element);
      }
    });

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

    setTimeout(() => {
      observer.disconnect();
      reject(new Error(`Element ${selector} not found`));
    }, timeout);
  });
}

// Detect if user is in a meeting
function isInMeeting() {
  return Boolean(document.querySelector('[data-meeting]')) ||
         Boolean(document.querySelector('.iTwFod'));
}

This approach uses MutationObserver to detect when elements appear in the dynamically-loaded interface. The isInMeeting() function checks for multiple possible indicators of an active meeting.

Manipulating the Video Grid

One of the most common enhancement requests involves the video grid. You can customize tile layouts, add borders, or implement custom positioning:

function getVideoTiles() {
  return Array.from(document.querySelectorAll('div[jsname="rzsOS"] > div'));
}

function applyTileEnhancements() {
  const tiles = getVideoTiles();
  tiles.forEach((tile, index) => {
    // Add custom border color based on position
    tile.style.borderLeft = `4px solid hsl(${index * 60}, 70%, 50%)`;
    
    // Add name overlay
    const nameElement = tile.querySelector('[jsname="xGOkXc"]');
    if (nameElement && !tile.querySelector('.enhancer-overlay')) {
      const overlay = document.createElement('div');
      overlay.className = 'enhancer-overlay';
      overlay.textContent = nameElement.textContent;
      overlay.style.cssText = `
        position: absolute;
        bottom: 8px;
        left: 8px;
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      `;
      tile.appendChild(overlay);
    }
  });
}

This code adds colorful border indicators and name overlays to participant tiles. The enhancement runs continuously to handle new participants joining.

Intercepting Meeting Controls

You can add custom controls to the meeting toolbar or intercept existing ones. The toolbar typically contains buttons for mute, camera, screen share, and more:

function injectCustomButton() {
  const toolbar = document.querySelector('[jsname="BOHaEe"]');
  if (!toolbar || document.querySelector('#enhancer-custom-btn')) return;

  const customBtn = document.createElement('button');
  customBtn.id = 'enhancer-custom-btn';
  customBtn.innerHTML = '⚡ Enhancer';
  customBtn.style.cssText = `
    background: #4285f4;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 4px;
  `;
  
  customBtn.addEventListener('click', () => {
    console.log('Custom enhancement triggered');
    // Your enhancement logic here
  });
  
  toolbar.appendChild(customBtn);
}

This creates a new button in the toolbar that triggers your custom functionality.

Working with the Meet API (Limited)

Google Meet doesn’t expose a public extension API, but you can interact with the internal JavaScript objects. Use caution—internal APIs may change without notice:

// Access internal Meet state (use with caution)
function getMeetingInfo() {
  const appElement = document.querySelector('[jsname="BSKYBd"]');
  if (appElement && appElement.__reactInternalInstance) {
    // Attempt to access React fiber tree
    // This is fragile and may break with updates
    console.log('Internal state available');
  }
}

Direct React internals access is not recommended for production extensions as Google frequently updates their frontend. Focus on DOM manipulation and event handling instead.

Handling Meeting Events

You can listen for various events to trigger enhancements at appropriate times:

// Listen for participant changes
const participantObserver = new MutationObserver(() => {
  applyTileEnhancements();
});

participantObserver.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['class']
});

// Detect meeting join/leave
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('Meeting tab hidden');
  } else {
    console.log('Meeting tab visible');
  }
});

The MutationObserver approach is more reliable than polling for DOM changes.

Best Practices for Meet Extensions

When building Google Meet extensions, follow these guidelines:

Respect user privacy — Only access necessary data and don’t exfiltrate meeting content without clear user consent.

Handle updates gracefully — Google frequently changes Meet’s interface. Use robust selectors and provide fallback behavior when elements aren’t found.

Test across scenarios — Test with different meeting sizes, while screen sharing, with chat open, and in various browser window sizes.

Performance matters — Use debouncing for expensive operations and clean up observers and event listeners when they’re no longer needed.

Conclusion

Building a Google Meet Chrome extension enhancer requires understanding the dynamic nature of the Meet interface and working within the constraints of Chrome’s extension APIs. Focus on DOM manipulation, event handling, and robust element detection rather than depending on internal APIs.

The techniques covered here—MutationObservers, dynamic element detection, toolbar injection, and tile manipulation—provide a foundation for creating valuable enhancements that improve the meeting experience for users.

Built by theluckystrike — More at zovo.one