DEV Community: ARIJIT PARIA

How I Built a Chrome Extension That Eliminates Salesforce Debugging Hell

ARIJIT PARIA — Mon, 25 Aug 2025 05:09:08 +0000

The Problem That Drove Me Crazy

Picture this: It's 4 PM, production is down, and you're debugging a Salesforce issue. You have 17 browser tabs open:

Tab 1: The user's record causing the error
Tab 2: Setup → Debug Logs (still loading...)
Tab 3: Developer Console for SOQL queries
Tab 4: Setup → Apex Classes to find the trigger
Tab 5: Back to Debug Logs (404 error now)
Tabs 6-17: Various Setup pages you opened while hunting for clues

Sound familiar? This was my daily reality as a Salesforce developer until I decided to build a solution.

The Technical Challenge

Salesforce's debugging workflow forces developers into a multi-tab nightmare because:

Debug logging affects ALL users when enabled at the org level
SOQL queries have strict limits (50,000 records, offset limitations)
Component discovery requires manual navigation through Setup menus
No unified debugging interface exists within Salesforce

I needed to solve these problems while working within Salesforce's security constraints and API limitations.

The Solution: A Modern Chrome Extension

I built Salesforce Debugger - a comprehensive debugging toolkit that consolidates four essential tools into one interface.

Technical Stack

// Core architecture
React 19 + TypeScript + TailwindCSS 4
Vite build system with CRXJS plugin
Manifest V3 extension architecture

The extension uses modern web standards with hot reloading support for development, making it both powerful and maintainable.

Feature Deep Dive

1. APEX Debugger - Safe Multi-User Debugging

The biggest breakthrough was solving user-specific debug logging:

// Enable debug logging for specific user only
const enableDebugTrace = async (userId: string, duration: number) => {
  await salesforceAPI.post('/services/data/v58.0/tooling/sobjects/TraceFlag/', {
    TracedEntityId: userId,
    LogType: 'DEVELOPER_LOG',
    StartDate: new Date().toISOString(),
    ExpirationDate: new Date(Date.now() + duration * 3600000).toISOString(),
    DebugLevelId: await getOrCreateDebugLevel()
  });
};

Key innovations:

User-specific trace flags prevent debugging interference in shared orgs
Automatic cleanup removes debug artifacts after specified duration
Real-time sync updates status across all browser tabs
Smart log fetching with performance metrics and full-text search

2. SOQL Studio - Breaking Query Limitations

Traditional SOQL queries hit limits quickly. I implemented cursor-based pagination to bypass these constraints:

// Cursor-based pagination for unlimited results
const executeUnlimitedQuery = async (soql: string) => {
  let allRecords = [];
  let nextRecordsUrl = null;

  do {
    const response = await salesforceAPI.query(
      nextRecordsUrl || `/services/data/v58.0/query/?q=${encodeURIComponent(soql)}`
    );

    allRecords = [...allRecords, ...response.records];
    nextRecordsUrl = response.nextRecordsUrl;
  } while (nextRecordsUrl);

  return allRecords;
};

Features include:

50-line query editor with syntax highlighting
Auto-completion with relationship field traversal
Query management - save and organize frequently used queries
Real-time results with sorting and navigation

3. Smart Search - Metadata Discovery at Scale

Finding components in large Salesforce orgs is painfully slow. I built a comprehensive search engine:

// Search across 12 component types simultaneously
const SEARCHABLE_COMPONENTS = [
  'ApexClass', 'ApexTrigger', 'LightningComponentBundle',
  'AuraDefinitionBundle', 'Flow', 'CustomObject', 'ValidationRule',
  'WorkflowRule', 'CustomLabel', 'PermissionSet', 'Layout', 'Report'
];

const searchMetadata = async (searchTerm: string) => {
  const searchPromises = SEARCHABLE_COMPONENTS.map(type => 
    salesforceAPI.tooling.query(
      `SELECT Id, Name, DeveloperName FROM ${type} 
       WHERE Name LIKE '%${searchTerm}%' OR DeveloperName LIKE '%${searchTerm}%'`
    )
  );

  return Promise.all(searchPromises);
};

This provides 90%+ faster component discovery compared to manual Setup navigation.

4. LWC Debugger - Real-Time Component Inspection

For Lightning Web Components, I integrated with Chrome DevTools:

// Monitor Apex calls from LWC components
const trackApexCalls = () => {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach(entry => {
      if (entry.name.includes('apex')) {
        logApexCall({
          method: extractMethodName(entry.name),
          duration: entry.duration,
          timestamp: entry.startTime
        });
      }
    });
  });

  observer.observe({ entryTypes: ['measure'] });
};

Real-World Impact

Since launching, the extension has:

1,000+ active users across development teams
90%+ reduction in component discovery time
Zero tab switching for common debugging tasks
Safe multi-user debugging in production environments

Technical Challenges Overcome

1. Salesforce API Limitations

Working within strict API limits while providing unlimited functionality required creative solutions like cursor-based pagination and intelligent batching.

2. Security Constraints

The extension operates entirely within Salesforce's security model - no bypassing of permissions, all API calls use existing user sessions.

3. Performance Optimization

Handling large datasets and real-time updates required careful state management and efficient React rendering strategies.

4. Cross-Tab Synchronization

Maintaining consistent state across multiple Salesforce tabs required implementing a robust messaging system between content scripts.

Code Architecture

// Extension structure
src/
├── content-script/     # Salesforce page integration
├── popup/             # Main debugging interface
├── devtools/          # LWC debugging panel
├── background/        # Service worker for API calls
├── components/        # Reusable React components
└── utils/            # Salesforce API helpers

The modular architecture allows for easy feature additions and maintenance while keeping the codebase organized.

Key Learnings

User-centric design beats feature-rich complexity - Solving real workflow problems matters more than adding features
API limitations spark innovation - Working within constraints led to better solutions
Developer tools need developer UX - Even internal tools deserve polished interfaces
Security-first approach builds trust - Never compromising on Salesforce security model was crucial

What's Next?

Currently working on:

Flow debugger for visual workflow debugging
Performance profiler for org-wide performance analysis
Team collaboration features for shared debugging sessions

Try It Yourself

The extension is free and available on the Chrome Web Store.

Quick start:

Install the extension
Navigate to any Salesforce org
Press Alt+S for SOQL Studio or click the extension icon
Start debugging without the tab chaos!

Discussion

What's your biggest Salesforce debugging pain point? Have you built solutions to overcome platform limitations? Share your experiences in the comments!

Connect with me: https://www.linkedin.com/in/arijitparia/
Extension link: https://chromewebstore.google.com/detail/salesforce-debugger-all-i/dmfledeppinlciakcinbegohoadmbigm?authuser=0&hl=en

Mastering Message Passing in Chrome Extensions: From Basics to Advanced Techniques

ARIJIT PARIA — Fri, 27 Oct 2023 22:05:45 +0000

Introduction

Dive deep into the bustling digital metropolis of Chrome, where each tab stands as a towering skyscraper, teeming with activity and intricate conversations. Here, Chrome extensions play the role of superheroes, adeptly navigating this complex landscape, transmitting messages, and performing awe-inspiring feats. This comprehensive guide is crafted to unveil the secrets of these digital superheroes, focusing on their sophisticated means of communication in the era of Manifest V3, known as "Message Passing."

Section 1: Deciphering the Digital Dialogue - The Basics of Message Passing in Manifest V3

1.1 Unraveling Message Passing

Message passing in Chrome extensions, especially with Manifest V3, resembles the art of passing secret notes, executed with unparalleled precision and efficiency. Each message is meticulously addressed, ensuring it navigates through the digital expanse to reach the intended recipient.

Code Example: Initiating a Conversation

// In a content script, initiating a conversation with the background script
chrome.runtime.sendMessage({ note: "Hello Background, I've stumbled upon something fascinating!" });

1.2 Engaging in a Two-Way Conversation

Sending messages is merely the tip of the iceberg; the true magic unfolds when we engage in interactive, two-way conversations. Chrome extensions in Manifest V3 are designed to excel in this realm, facilitating a seamless dialogue.

Code Example: Exchanging Messages and Awaiting Responses

// In a content script, sending a message and awaiting a response
chrome.runtime.sendMessage({ inquiry: "What should be our next course of action?" }, function(response) {
  console.log("Received guidance:", response.advice);
});

// In the background script, listening for messages and crafting responses
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  if (message.inquiry === "What should be our next course of action?") {
    sendResponse({ advice: "Analyze the situation and proceed with caution." });
  }
});

Section 2: The Digital Post and Telecommunication - Chrome APIs for Message Passing in Manifest V3

2.1 Mastering chrome.runtime.sendMessage and chrome.runtime.onMessage

These functions serve as the digital post office of Chrome City, facilitating precise and secure communication across the vast digital landscape.

Real-Life Analogy and Code Example

Imagine you've discovered a hidden treasure in one of the skyscrapers. To share this news with a superhero friend in another building, you draft a message and send it via the digital post office.

// Sending a message to another part of the extension
chrome.runtime.sendMessage({ treasureLocation: "Skyscraper 42, Floor 7" });

2.2 Direct Deliveries with chrome.tabs.sendMessage

When the need arises to communicate directly with a specific room in a particular skyscraper, chrome.tabs.sendMessage is the superhero's tool of choice.

Real-Life Analogy and Code Example

Consider this akin to delivering a special package directly to a friend’s apartment, bypassing the building's main entrance for efficiency and precision.

// Sending a message directly to a content script in a specific tab
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  var activeTab = tabs[0];
  chrome.tabs.sendMessage(activeTab.id, { greeting: "Hello, Room 101!" });
});

Section 3: Mastering the Art of Messaging - Intermediate Techniques in Manifest V3

3.1 Balancing Speed and Precision - Synchronous vs. Asynchronous Messaging

In the digital city, superheroes must balance the need for rapid communication with the necessity for precision. Synchronous messaging offers instant responses, while asynchronous messaging allows for a more measured pace.

Example and Explanation: Synchronous vs. Asynchronous Messaging

Synchronous: A superhero sends a message and pauses, awaiting an immediate response. This is akin to a phone call, where the conversation unfolds in real-time.

  // Example of synchronous messaging (pseudo-code, as true synchronous messaging isn't supported in Manifest V3)
  function synchronousMessage() {
    const response = chrome.runtime.sendMessageSync({ action: "getInfo" });
    console.log("Immediate response:", response);
  }
  synchronousMessage();

Asynchronous: A superhero sends a message and continues with other tasks, receiving a response at a later time. This resembles email communication, where responses are not instantaneous.

  // Example of asynchronous messaging
  function asynchronousMessage() {
    chrome.runtime.sendMessage({ action: "getInfo" }, function(response) {
      console.log("Response received later:", response);
    });
    console.log("Message sent, continuing with other tasks");
  }
  asynchronousMessage();

3.2 Broadcasting to the Masses - One-to-Many Communication

There are moments when a superhero needs to broadcast a message to all allies simultaneously, ensuring that everyone receives the information at the same time.

Example and Explanation: One-to-Many Communication

Imagine a scenario where a superhero needs to make an urgent announcement to all other superheroes in the city. This requires a one-to-many communication approach.

// Broadcasting a message to all content scripts in all open tabs
chrome.tabs.query({}, function(tabs) {
  tabs.forEach(function(tab) {
    chrome.tabs.sendMessage(tab.id, { announcement: "Urgent: All superheroes, assemble!" });
  });
});

Section 4: Navigating Advanced Terrain - Advanced Concepts and Manifest V3

4.1 Bridging Digital Cities - Cross-Origin Communication

Sometimes, our superhero needs to communicate with allies in a different digital city (or website). This requires special permissions and a careful setup, but it is achievable.

Example and Explanation: Cross-Origin Communication

A superhero in Chrome City needs to send a crucial message to a superhero in Firefox City. With the right permissions and setup, cross-browser communication becomes possible.

// Example of cross-origin communication (pseudo-code, as this requires additional setup and permissions)
chrome.runtime.sendMessage({ id: "extensionIdInFirefoxCity", message: "Hello from Chrome City!" });

4.2 Harnessing the Power of Manifest V3 - Advanced Message Passing

With the advent of Manifest V3, Chrome extensions have undergone a significant transformation, leading to faster and more secure operations. The message passing mechanism has been refined, ensuring smoother and more secure interactions.

Explanation: The Advancements in Message Passing with Manifest V3

Manifest V3 introduces service workers, replacing background pages. This change enhances the performance and security of message passing, as service workers are event-driven and do not persist between messages. This ensures a more efficient use of resources and a more secure messaging environment.

Section 5: Envisioning

the Future - Future Possibilities with Manifest V3

5.1 Pondering the Possibilities

As we look ahead, the future is filled with endless possibilities for our digital superheroes. They might find innovative ways to communicate with entities from other digital realms or master new forms of digital language, further expanding their capabilities.

Conclusion

You have now ascended to the ranks of a Super Messenger in the digital city of Chrome, mastering the intricate art of message passing, navigating various speeds of communication, making impactful announcements, and embracing the latest in superhero technology. Continue to refine your skills, and you will play a pivotal role in elevating Chrome City to new heights of excellence and innovation!

Deploy a simple web app using Firebase

ARIJIT PARIA — Thu, 16 Mar 2023 20:41:24 +0000

For many people, creating a website has become a popular pastime. Having an internet presence has become crucial, whether for personal or corporate reasons. It's now simpler than ever to design a website that looks and works precisely way you want it to with the aid of HTML, CSS, and JavaScript.

Hosting a website to allow for global accessibility is one of the most crucial steps in website creation. An fantastic alternative for hosting a website is Firebase, which also provides a free plan for launching smaller projects. We'll examine how to develop a straightforward website using HTML, CSS, and JavaScript in this blog article before deploying it with Firebase.

Let's build the website first. To improve its appearance and functionality, we'll start with a simple HTML file and add some CSS and JavaScript. The HTML source code is provided here:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is my first website!</p>
    <button onclick="changeColor()">Change Color</button>
    <script src="app.js"></script>
  </body>
</html>

We've added a body, a button with text, and a header. To style our HTML components, we also included a CSS file. Lastly, we included a JavaScript file that, when activated by the button, will alter the page's background color. The code for our CSS file is shown here

CSS

body {
  background-color: white;
  color: black;
  font-family: Arial, sans-serif;
  font-size: 24px;
}

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

The body's background color, font family, and font size are all determined by our CSS file. For our button, we also included certain styles, such as the background color, padding, border, and border radius.

Let's now update our app.js file with the JavaScript code:

function changeColor() {
  document.body.style.backgroundColor = "pink";
}

When the button is pressed, a method in our JavaScript code causes the page's backdrop to turn pink.

It's time to launch our website utilizing Firebase now that everything has been finished. We must first register for a free Firebase account. After registering, we may activate the Firebase Command Line Interface (CLI) on our computer by installing it.

We must establish a Firebase project and initialize it with the Firebase CLI before we can launch our website. The following commands need to be entered into the terminal to do this:

firebase login
firebase init

After installing the Firebase CLI, launch the command firebase init in the terminal by navigating to the root directory of your website project. With the help of this command, you may set up your Firebase project by responding to a series of questions.

You will be requested to choose the Firebase services you wish to utilize during the startup process. You could decide to employ Authentication, Realtime Database, or Firebase Hosting, for instance.

You will be prompted to configure your Firebase project after choosing the Firebase services you wish to utilize. You have the option of making a new Firebase project or using an existing one. You will be asked to input a special project ID and project name if you decide to establish a new project.

The Firebase CLI will produce a .firebaserc file in your project directory after the configuration procedure is complete. Your Firebase project ID and the aliases for the Firebase services you choose are contained in this file.

You'll next be asked to configure Firebase Hosting for your website. Using an existing Firebase Hosting site or building a new one is your choice. You will be asked to submit a special site name if you decide to create a new site.

In order to choose the public directory for your website, you will finally be requested. You may find your HTML, CSS, and JavaScript files under this directory. By default, Firebase Hosting will search this directory for an index.html file.

Use the command firebase deploy to begin deploying your website to Firebase Hosting after the initialization procedure is complete. By using this command, you may publish your website and upload its files to the Firebase server.

Follow me on linkedIn
Check out my Youtube