How to Add Support for New Email Clients or Webmail Services in Markdown Here

To add support for a new email client in Markdown Here, you must update the extension permissions in manifest.json, implement a CSS selector for the Send button in CommonLogic.getForgotToRenderButtonSelector, and optionally adjust quote-handling logic in mdh-html-to-text.js and CSS overrides in default.css.

Markdown Here is an open-source browser extension that enables Markdown composition in webmail clients. Adding support for new email clients or webmail services to the adam-p/markdown-here repository requires integrating with the client's DOM structure to enable the "Forgot-to-render" warning and handle email-specific formatting quirks. This guide walks through the specific source files and functions required to extend compatibility to additional webmail platforms.

Update Extension Permissions in the Manifest

The extension requires explicit permission to run content scripts on the new webmail domain. In src/manifest.json, add the target domain to the optional_host_permissions array to allow the background script to request access when users enable the forgot-to-render check.

// src/manifest.json
{
  "optional_host_permissions": [
    "http://*/*",
    "https://*/*",
    "https://mail.example.com/"
  ]
}

Source: manifest.json line 16 — https://github.com/adam-p/markdown-here/blob/master/src/manifest.json#L16

Implement the Send Button Selector

The Forgot-to-render feature relies on CommonLogic.getForgotToRenderButtonSelector to locate the Send button and intercept click events. Located in src/common/common-logic.js around lines 98-104, this function returns a CSS selector string based on the current hostname.

Add a new conditional branch for your target service that returns a unique selector for the Send button:

// src/common/common-logic.js (around line 101)
function getForgotToRenderButtonSelector(elem) {
  if (elem.ownerDocument.location.host.indexOf('mail.google.') >= 0) {
    return '[role="button"][tabindex="1"][aria-label][data-tooltip]';
  }
  else if (elem.ownerDocument.location.host.indexOf('fastmail.') >= 0) {
    return '[class~="s-send"]';
  }
  // NEW: support ExampleMail
  else if (elem.ownerDocument.location.host.indexOf('mail.example.com') >= 0) {
    return '.example-send-button';
  }

  return null;
}

Source: common-logic.js lines 98‑104 — https://github.com/adam-p/markdown-here/blob/master/src/common/common-logic.js#L98-L104

Handle Client-Specific Quoting and Signatures

Many email clients prepend quoted replies with unique HTML structures or signature blocks. The src/common/mdh-html-to-text.js file manages conversion from HTML to text and uses regex patterns around line 95 to identify and strip quote headers.

If the new service uses a custom format for quoted text, add a pattern to prevent it from being incorrectly processed as part of the message body:

// src/common/mdh-html-to-text.js (around line 95)
var quoteHeaderRe = /&lt;<a\s+href="mailto:[^>]+>([^<]*)<\/a>&gt;/ig;

// NEW pattern for ExampleMail
var exampleQuoteRe = /<div class="example-quote">.*?<\/div>/gi;
html = html.replace(exampleQuoteRe, '');

Source: mdh-html-to-text.js lines 95‑100 — https://github.com/adam-p/markdown-here/blob/master/src/common/mdh-html-to-text.js#L95-L100

Apply CSS Overrides for UI Compatibility

If the target webmail service injects styles that conflict with Markdown Here's rendering wrapper, add specific overrides to src/common/default.css. This ensures the rendered Markdown preview sits correctly within the client's compose window.

/* src/common/default.css */
.example-mail .markdown-here-wrapper {
  /* Ensure our wrapper sits above the client's UI */
  z-index: 9999;
}

You can also create a dedicated stylesheet and reference it in src/common/options.html if the client requires extensive style resets.

Test the Integration

After implementing the changes, verify the integration works correctly across all functionality:

1. Reload the extension using Developer mode → Load unpacked in your browser's extension management page.
2. Open the new webmail client and compose a message.
3. Click the Markdown Here toolbar button to ensure Markdown renders correctly.
4. Enable Forgot-to-render in the Options page (src/common/options.html) and attempt to send an unrendered message — the warning prompt should appear.

If the prompt does not trigger, debug the selector by opening the browser console and running document.querySelector('.example-send-button') to verify the element is found.

Summary

• Grant permissions by adding the new domain to optional_host_permissions in src/manifest.json.
• Locate the Send button by extending getForgotToRenderButtonSelector in src/common/common-logic.js with a hostname check and CSS selector.
• Handle quoting quirks by adding regex patterns to src/common/mdh-html-to-text.js if the client uses non-standard reply formatting.
• Fix UI conflicts by adding CSS overrides to src/common/default.css or a dedicated stylesheet.
• Verify functionality by testing rendering and the forgot-to-render warning in the target webmail interface.

Frequently Asked Questions

Do I need to modify the background script to add a new email client?

No, you typically do not need to modify the background script. The extension uses the optional_host_permissions declared in manifest.json to request access dynamically through src/common/options.js when the user enables the forgot-to-render feature. The core detection logic resides entirely in common-logic.js and runs as a content script.

What happens if the Send button selector changes in a future update?

If the target webmail service updates its DOM and changes the Send button class or attributes, the getForgotToRenderButtonSelector function will return a null selector, and the forgot-to-render warning will silently fail to attach. Users can still render Markdown manually, but the safety prompt will not appear. You should monitor the target service for UI updates and adjust the selector accordingly.

Can I add support for a desktop email client instead of a webmail service?

No, the current architecture of Markdown Here is designed specifically for browser-based webmail clients. The extension relies on content scripts injected into web pages (https:// origins) and cannot interact with native desktop applications. Supporting a desktop client would require a complete rewrite using a different extension API or a native messaging host.

How do I test the quote-stripping regex without sending actual emails?

You can test the regex patterns in mdh-html-to-text.js by isolating the logic in a Node.js script or the browser console. Copy the HTML string from the target webmail client's compose window, then run the regex replacement against it to verify it correctly identifies and removes quoted sections while preserving the composed content.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}