Rainloop技术问询：如何在邮件视图中获取DKIM头部信息并适配移动端

I totally get the frustration—Rainloop’s lack of official docs makes customizing these small but critical UX elements way harder than it should be. Especially for mobile users who can’t hover to see that DKIM signature detail, which is so important for trust. Here’s a step-by-step approach I’ve tested for similar email client tweaks:

Step 1: Locate the DKIM Indicator & Tooltip Data #

First, let’s pin down the right elements. Rainloop stores the full DKIM header in a title attribute on the green checkmark indicator. Even if you couldn’t spot it initially, use these tricks in your browser dev tools (F12):

• Search for elements with a title containing "DKIM" using the selector: [title*="DKIM"]
• Or look for classes like .b-sign__item--dkim (Rainloop uses consistent class names for signature verification icons)

You’ll likely find an element that looks like this:

<span class="b-sign__item b-sign__item--dkim" title="DKIM-Signature: v=1; a=rsa-sha256; ...">
  <i class="icon icon-check-circle"></i>
</span>

Step 2: Add Click Listener for Mobile Tooltip Access #

Since hover doesn’t work on touchscreens, we’ll add a click event to show the DKIM info. We need a MutationObserver because Rainloop loads email content dynamically after the initial page load:

document.addEventListener('DOMContentLoaded', function() {
  // Watch for changes in the email content area
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length) {
        const dkimIndicator = document.querySelector('.b-sign__item--dkim');
        if (dkimIndicator) {
          // Add click handler to show DKIM info
          dkimIndicator.addEventListener('click', function(e) {
            e.preventDefault();
            // Use a custom modal instead of alert for better mobile UX
            showDKIMModal(this.title);
          });
          // Stop observing once we've found the element
          observer.disconnect();
        }
      }
    });
  });

  // Target the main email content container (adjust selector if needed)
  observer.observe(document.querySelector('.b-message-body'), {
    childList: true,
    subtree: true
  });
});

// Helper to create a mobile-friendly modal
function showDKIMModal(content) {
  const modal = document.createElement('div');
  modal.style.cssText = `
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: white; padding: 1.5rem; border-radius: 8px;
    box-shadow: 0 0 12px rgba(0,0,0,0.3); z-index: 1000;
    max-width: 90%; max-height: 80%; overflow-y: auto;
  `;
  modal.innerHTML = `
    <h3 style="margin-top:0;">DKIM Signature</h3>
    <pre style="white-space: pre-wrap; word-break: break-all;">${content}</pre>
    <button onclick="this.parentElement.remove()" style="margin-top:1rem; padding:0.5rem 1rem;">Close</button>
  `;
  document.body.appendChild(modal);
}

Step 3: Inject DKIM Info into the Expandable "Info" Panel #

Even better than a modal is adding the DKIM data directly to Rainloop’s built-in "Info" panel (the one you open with the "i" icon). Modify the observer code to include this:

// Inside the MutationObserver callback, after finding dkimIndicator
const infoPanel = document.querySelector('.b-message-info__content');
if (infoPanel) {
  // Create a new section for DKIM
  const dkimSection = document.createElement('div');
  dkimSection.className = 'b-message-info__item';
  dkimSection.innerHTML = `
    <div class="b-message-info__title">DKIM Signature</div>
    <div class="b-message-info__value">
      <pre style="white-space: pre-wrap; word-break: break-all;">${dkimIndicator.title}</pre>
    </div>
  `;
  // Append to the info panel
  infoPanel.appendChild(dkimSection);
}

Step 4: Load the Script in Rainloop #

To make this active, inject the combined script into Rainloop:

1. Go to the Rainloop admin panel → Settings → Customization → Custom JS
2. Paste your full script into the "Custom JavaScript" field
3. Save changes and clear your browser cache

Quick Troubleshooting #

• If the selectors don’t match your Rainloop version, right-click the DKIM checkmark and use "Inspect" to get the exact class names/attributes.
• If the modal doesn’t appear, double-check that the MutationObserver is targeting the correct email content container.

Content of the question originates from stack exchange, question author jdmayfield