Tiny Project V: Message Master

Generate shareable links for e-mail, SMS, WhatsApp, Twitter, Instagram, Facebook, Telegram, and LinkedIn.

Photo by Alexander Shatov on Unsplash

Have you ever tried to generate a link that can allow you to make people tweet pre-written texts, go directly into a user’s DM, send an email with the necessary information attached, or chat with someone on WhatsApp?

Yes, I have. There was a time when we were building Fidia and Fashy, and we created a waitlist landing page. We wanted something that, once a user entered their details to join the waitlist for early access, a success modal would pop up with a message and a button to share on Twitter or LinkedIn, for example. We wanted to make the user tweet or share a pre-written post that we created, so they could invite their followers to join the waitlist as well.

You might be thinking that this is very easy, but if you’re doing it for the first time, you probably have to search for a free tool or an article that will guide you on how to do that. What if you don’t have to worry about that?

I have built a free Chrome extension that can allow you to do just that directly from your browser. With the Message Master extension, you can create shareable messaging links for email, SMS, WhatsApp, Twitter, Facebook, Instagram, Telegram, and LinkedIn.

How It Works

• Step 1: Choose from email, SMS, WhatsApp, Twitter, Instagram, Facebook, Telegram, or LinkedIn.
• Step 2: Fill in the required fields, such as email addresses, phone numbers, messages, and URLs.
• Step 3: Click the ‘Generate’ button to create a raw link and HTML code.
• Step 4: Copy your generated link/code to the clipboard and use it anywhere.

Design

The UI design process was simple and straightforward. I designed the first screen to show the messaging app options you can choose from to generate link and HTML code.

Message Master — Extension UI

For email, I added input fields you can use to enter the email recipients (To, Cc, & Bcc), the subject line, and the body content. After filling in the details, clicking the generate button will generate a mailto link and an HTML anchor tag code that you can copy and embed wherever you need them.

Message Master — email UI

For SMS, I added input fields that you can use to enter the recipient phone number and the custom message.

Message Master — SMS UI

The WhatsApp option is similar to that of SMS but generates a wa.me link with an HTML code.

Message Master — WhatsApp UI

For Twitter, I added input fields for the tweet text content and link URL. It will generate a compose link that, when clicked, will open the tweet composer.

Message Master — Twitter UI

The Instagram option only contains one input field, which is the username. It will generate a link that can open the user’s DM.

Message Master — Instagram UI

For Facebook, it’s the same as the Instagram option but accepts the page name.

Message Master — Facebook UI

The Telegram option is similar to the Instagram and Facebook options as well.

Message Master — Telegram UI

For LinkedIn, it has two input fields, which are message text content and link URL. It will generate a share link that, when clicked, will open the LinkedIn article/post composer with the input content inside it.

Message Master — LinkedIn UI

Development

I used HTML, CSS, and JavaScript like all the previous ones I built, and I didn’t face any challenges.

Project Structure

This is how the project looks in VS Code.

messagemaster/
  ├── icons/
  ├── manifest.json
  ├── popup.html
  ├── script.js
  └── styles.css

Code Snippets

These are some of the snippets for the code that’s making it work.

HTML

Header section containing the title and description.

  <div class="header">
    <div>
      <h1>Message Master</h1>
      <p>Hey, which messaging link will you generate today?</p>
    </div>
    <img src="icons/extension-icon.svg" alt="Extension Icon" class="icon">
  </div>

Grid container with all messaging app options.

  <div class="grid" id="grid">
    <div class="grid-item" id="email">
      <img src="icons/email.svg" alt="Email Icon">
      <p>e-Mail</p>
    </div>
 <!-- Add other messaging app options -->
  </div>

Form container where the input forms will be displayed.

  <div class="form-container" id="form-container"></div>

CSS

I recently learned how to customize an input field style on focus, but I noticed that the outline usually appears outside the input border until I found out that I could use the outline offset property to fix the issue.

input:focus {
    outline: 1px solid #0F172A;
    outline-offset: -1px;
}

JavaScript

To add click event listeners to each grid item.

  gridItems.forEach((item) => {
    item.addEventListener("click", () => {
      const id = item.id;
      // Load the appropriate form
      formContainer.innerHTML = getFormHTML(id);
      formContainer.style.display = "block";
      grid.style.display = "none";

      // Attach event listener to the back button
      attachBackButtonListener();
      // Attach event listener to the generate button
      attachGenerateButtonListener(id);
    });
  });

Get the appropriate form HTML based on the clicked grid item.

function getFormHTML(id) {
  switch (id) {
    case "email":
      return `
          <div class="back-button">Back</div>
          <label for="to">To</label>
          <input type="text" id="to" placeholder="Enter e-mail">
          <label for="cc">CC</label>
          <input type="text" id="cc" placeholder="Enter e-mail">
          <label for="bcc">BCC</label>
          <input type="text" id="bcc" placeholder="Enter e-mail">
          <label for="subject">Subject Line</label>
          <input type="text" id="subject" placeholder="Enter subject line">
          <label for="body">Body</label>
          <textarea id="body" placeholder="Enter body content"></textarea>
          <button id="generate">Generate</button>
        `;
    // List other messaging app options here
    default:
      return "";
  }
}

Attach an event listener to the generate button when clicked.

function attachGenerateButtonListener(id) {
  document.getElementById("generate").addEventListener("click", () => {
    // Generate the link based on form inputs
    const linkData = generateLink(id);
    // Display the generated links
    displayGeneratedLinks(linkData.rawLink, linkData.htmlCode);
  });
}

Attach an event listener to the back button.

function attachBackButtonListener() {
  document.querySelector(".back-button").addEventListener("click", () => {
    document.getElementById("form-container").style.display = "none";
    document.getElementById("grid").style.display = "grid";
  });
}

Display the generated link and code in the form container.

function displayGeneratedLinks(rawLink, htmlCode) {
  const formContainer = document.getElementById('form-container');
  formContainer.innerHTML = `
    <div class="back-button">Back</div>
    <div class="copy-container">
      <label for="raw-link">Raw Link</label>
      <div class="copy-input-container">
        <input type="text" id="raw-link" value="${rawLink}" readonly>
        <img src="icons/copy.svg" alt="Copy Icon" class="copy-icon" data-clipboard="${escapeHtml(rawLink)}">
      </div>
      <label for="html-code">HTML Code</label>
      <div class="copy-input-container">
        <input type="text" id="html-code" value="${escapeHtml(htmlCode)}" readonly>
        <img src="icons/copy.svg" alt="Copy Icon" class="copy-icon" data-clipboard="${escapeHtml(htmlCode)}">
      </div>
    </div>
  `;

  // Re-attach the back button listener
  attachBackButtonListener(); 
  // Attach copy event listeners to the copy icons
  attachCopyListeners(); 
}

Added an escape HTML function to prevent XSS attacks. This makes the HTML code generate properly and can be copied in full.

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

To attach copy event listeners to the copy icons in both the raw link and HTML code fields.

function attachCopyListeners() {
  const copyIcons = document.querySelectorAll('.copy-icon');
  copyIcons.forEach(icon => {
    icon.addEventListener('click', () => {
      const text = icon.getAttribute('data-clipboard');
      copyToClipboard(text);
    });
  });
}

Function to copy the generated link and code to the clipboard and also show an alert.

function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(() => {
    alert('Copied to clipboard');
  }, err => {
    console.error('Could not copy text: ', err);
  });
}

Manifest JSON File

This is what the manifest.json file looks like.

{
  "manifest_version": 3,
  "name": "Message Master",
  "version": "1.0",
  "description": "Generate shareable links for e-Mail, SMS, WhatsApp, Twitter, Instagram, Facebook, Telegram, and LinkedIn.",
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Installation

I submitted the extension for review, and it has been published publicly, so you can install Message Master today and add it to your Chrome browser.

Demo

I recorded a short video to show how Message Master works.

Message Master — Demo

Hi, thanks for reading this piece! I’m Soliudeen Ogunsola. If you find this article interesting and want to connect with me, you can follow me on X (formerly known as Twitter) or check me out on LinkedIn.