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

> Learn how to add support for new email clients or webmail services in Markdown Here. Update manifest.json, implement CSS selectors, and adjust quote handling for seamless integration.

- Repository: [Adam Pritchard/markdown-here](https://github.com/adam-p/markdown-here)
- Tags: how-to-guide
- Published: 2026-03-05

---

**To add support for a new email client in Markdown Here, you must update the extension permissions in [`manifest.json`](https://github.com/adam-p/markdown-here/blob/main/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`](https://github.com/adam-p/markdown-here/blob/main/mdh-html-to-text.js) and CSS overrides in [`default.css`](https://github.com/adam-p/markdown-here/blob/main/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`](https://github.com/adam-p/markdown-here/blob/main/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.

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

```

*Source:* [`manifest.json`](https://github.com/adam-p/markdown-here/blob/main/manifest.json) line 16 — [`https://github.com/adam-p/markdown-here/blob/master/src/manifest.json#L16`](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`](https://github.com/adam-p/markdown-here/blob/main/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:

```javascript
// 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`](https://github.com/adam-p/markdown-here/blob/main/common-logic.js) lines 98‑104 — [`https://github.com/adam-p/markdown-here/blob/master/src/common/common-logic.js#L98-L104`](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`](https://github.com/adam-p/markdown-here/blob/main/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:

```javascript
// 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`](https://github.com/adam-p/markdown-here/blob/main/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`](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`](https://github.com/adam-p/markdown-here/blob/main/src/common/default.css). This ensures the rendered Markdown preview sits correctly within the client's compose window.

```css
/* 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`](https://github.com/adam-p/markdown-here/blob/main/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`](https://github.com/adam-p/markdown-here/blob/main/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`](https://github.com/adam-p/markdown-here/blob/main/src/manifest.json).
- **Locate the Send button** by extending `getForgotToRenderButtonSelector` in [`src/common/common-logic.js`](https://github.com/adam-p/markdown-here/blob/main/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`](https://github.com/adam-p/markdown-here/blob/main/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`](https://github.com/adam-p/markdown-here/blob/main/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`](https://github.com/adam-p/markdown-here/blob/main/manifest.json) to request access dynamically through [`src/common/options.js`](https://github.com/adam-p/markdown-here/blob/main/src/common/options.js) when the user enables the forgot-to-render feature. The core detection logic resides entirely in [`common-logic.js`](https://github.com/adam-p/markdown-here/blob/main/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`](https://github.com/adam-p/markdown-here/blob/main/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.