DEV Community: Thomas Sarpong

Solving CSS and JavaScript Interference in Chrome Extensions: A Guide to React, Shadow DOM, and Best Practices

Thomas Sarpong — Fri, 30 Aug 2024 15:10:49 +0000

Introduction

Chrome extensions are powerful tools that enhance user experiences by integrating seamlessly with existing web applications. However, one of the challenges developers often encounter is CSS and JavaScript interference between the extension and the host web page. This article explores a few approaches to mitigate these issues, with a focus on leveraging React, Shadow DOM, and best practices for building robust and non-intrusive Chrome extensions.

Background

In a recent project, I worked on a Chrome extension that needed to render a full application via a content script on an existing DOM. The client wanted the extension to feel like a natural part of the existing web application, similar to how extensions like Grammarly or Word Tune integrate. The UI was complex, requiring advanced state management and frequent re-rendering. To handle this, I chose to leverage React, Webpack, Babel, and Redux RTK for state management.

Here's how we initially set up the extension:

import { createRoot } from 'react-dom';
import './style.scss';

function App() {
    return <div>Extension App</div>;
}

export function render() {
    const rootElement = document.createElement('div');
    rootElement.id = 'extension-app-root';
    document.body.appendChild(rootElement);

    const reactRoot = createRoot(rootElement);
    reactRoot.render(<App />);
}

While this solution seemed to work well at first, we quickly realized that the styles and JavaScript from the different apps were interfering with each other, causing unexpected behavior.

Potential Solutions

After some research, we identified three potential solutions to address the interference issues:

Solution 1: Class Name Prefixing

One approach was to prefix all our class names with a unique identifier to differentiate them from the parent DOM. While this helped resolve some styling conflicts, it did not fully address global style resets or JavaScript interference from the parent document.

Pros:

Simple to implement.
Solves some styling conflicts.

Cons:

Doesn’t address all global style resets.
Does not prevent JavaScript interference.

Solution 2: Rendering Content in an `iframe`

Another solution was to write the React app as a standalone web application, deploy it, and load it in an iframe rendered by the content script.

const iframeElement = document.createElement('iframe');
iframeElement.src = 'https://www.linktoreactapp.com';
document.body.appendChild(iframeElement);

This approach encapsulates both styles and JavaScript within the iframe, but it introduces communication challenges between the extension and the iframe since the chrome.runtime API is not available in the iframe.

Messages can be posted using the iframe.contentWindow API:

iframeElement.contentWindow.postMessage('hello', 'https://www.linttoreactapp.com');

Messages in the iframe can be received with:

window.onmessage = function(e) {
    if (e.data === 'hello') {
        alert('It works!');
    }
};

For more details, see the MDN documentation.

Pros:

Prevents style conflicts with the parent document.
Isolates JavaScript execution.

Cons:

Requires complex communication management between the iframe and the extension.
Potential latency issues and security vulnerabilities.
Increases the overall complexity of the extension.

Note: This was the solution we implemented for the company, and it worked well for our use case.

Solution 3: Using Shadow DOM

Shadow DOM is a more elegant solution that allows for style and JavaScript encapsulation. This method ensures that styles and scripts from the parent document do not interfere with the extension and vice versa.

Here’s how the original solution was modified to use a Shadow DOM:

import { createRoot } from 'react-dom';
import './style.scss';

function App() {
    return <div>Extension App</div>;
}

export function render() {
    // Create an element and attach a shadow root to it
    const shadowRootElement = document.createElement('div');
    const shadowRoot = shadowRootElement.attachShadow({ mode: 'open' });

    // Append the shadow root to the body of the parent document
    document.body.appendChild(shadowRootElement);

    // Create a root element and attach it to the shadow root
    const rootElement = document.createElement('div');
    rootElement.id = 'extension-app-root';

    // Append the react root element to the shadow root
    shadowRoot.appendChild(rootElement);

    // Create a react root and render the app
    const reactRoot = createRoot(rootElement);
    reactRoot.render(<App />);
}

Pros:

Provides full encapsulation of styles and scripts.
Simplifies maintenance by preventing conflicts.

Cons:

Potential issues with styling not being applied due to encapsulation.

Best Solution and Best Practices

While class name prefixing is a simple solution, it does not address all styling and JavaScript interference issues. iframe encapsulation is effective but introduces communication challenges and potential performance issues due to network latency. This leaves Shadow DOM as the best solution for providing perfect encapsulation and avoiding data communication problems.

Potential Styling Issues and Solutions with the Shadow DOM Technique

Problem: Styles Not Applied

The encapsulation provided by Shadow DOM prevents styles and JavaScript applied in the parent head, script, or style tags from affecting elements inside the Shadow DOM. This can cause CSS styles not to apply to the targeted elements.

Solution: Use a JavaScript Implementation of CSS

Inline Styles: You can use inline styles in JSX, but this is limited and doesn’t support core CSS features like :hover, :before, and other pseudo-elements.
Emotion with CacheProvider: A more powerful solution is to use Emotion, scoped under a CacheProvider. This ensures that styles are applied within the Shadow DOM without affecting the parent document.

import { createRoot } from 'react-dom';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';

function App() {
    return <div>Extension App</div>;
}

export function render() {
    // Create an element and attach a shadow root to it
    const shadowRootElement = document.createElement('div');
    const shadowRoot = shadowRootElement.attachShadow({ mode: 'open' });

    // Append the shadow root to the body of the parent document
    document.body.appendChild(shadowRootElement);

    // Create a root element and attach it to the shadow root
    const rootElement = document.createElement('div');
    rootElement.id = 'extension-app-root';

    // Append the react root element to the shadow root
    shadowRoot.appendChild(rootElement);

    // Create a react root and render the app
    const reactRoot = createRoot(rootElement);

    // Create an Emotion cache scoped to the Shadow DOM
    const emotionCache = createCache({
        key: 'extension-app',
        prepend: true,
        container: rootElement,
        speedy: true,
    });

    reactRoot.render(
        <CacheProvider value={emotionCache}>
            <App />
        </CacheProvider>
    );
}

Conclusion

In conclusion, while each solution has its strengths, Shadow DOM stands out as the most robust option for avoiding interference between your extension and the host application. For simple extensions, class name prefixing might suffice, but for more complex scenarios, especially where full encapsulation is needed, Shadow DOM is the recommended approach. Choose the solution that best fits your needs, and consider the trade-offs in terms of complexity and performance.

Sending File Data in JavaScript: Comparing File Streaming with Multipart Form Data

Thomas Sarpong — Mon, 24 Jul 2023 00:25:07 +0000

In modern web applications, the ability to handle file uploads efficiently is essential for providing a seamless user experience. JavaScript, being a widely used client-side scripting language, offers several methods to send file data from the browser to the server. In this article, we will explore two popular approaches: File Streaming with the fetch API and Multipart Form Data. Understanding the differences between these methods can help you make informed decisions when implementing file upload functionality in your projects.

File Streaming with the fetch API:

The fetch API is a powerful tool for making asynchronous network requests in modern JavaScript applications. One of its lesser-known features is the ability to handle file uploads in a streaming fashion. When you want to upload large files or stream data continuously, the file.stream() method comes to the rescue. This method reads the file data in chunks and sends them as individual packets to the server. The browser handles the chunking process automatically, and you don't need to worry about managing it manually.

Advantages of File Streaming with fetch API:

Efficient handling of large files: Streaming allows you to start uploading the file even before the entire file is read, reducing memory consumption.
Improved performance with HTTP/2: If the server supports HTTP/2, multiple requests can be multiplexed over a single connection, reducing latency and enhancing performance.
Simplified code: The fetch API provides a clean and straightforward interface to work with file streaming.

Multipart Form Data:

Multipart form data is a standard format used for submitting form data, including file uploads, to a server. When you submit a form with file inputs in HTML, the data is automatically encoded as multipart form data. However, you can also construct and send multipart form data programmatically in JavaScript using libraries or native APIs.

Advantages of Multipart Form Data:

Handling form submissions: Multipart form data is the preferred way to handle traditional HTML form submissions that include file uploads and other form fields.
Compatibility with server expectations: If your server expects file uploads in a specific multipart format, using this method is essential for seamless integration.
Conclusion:

Both File Streaming with the fetch API and Multipart Form Data are powerful techniques for sending file data from the browser to the server. Your choice between the two methods should be based on your specific use case and server-side requirements.

Use File Streaming with fetch API for handling large files and when you need to leverage HTTP/2 benefits for concurrent requests.
Use Multipart Form Data when you are dealing with form submissions that include file uploads and other form fields, or when your server expects file uploads in this specific format.
Understanding the strengths and limitations of each method will empower you to build efficient and seamless file upload functionality in your web applications. Happy coding!

Scaling up express js performance

Thomas Sarpong — Mon, 28 Mar 2022 00:54:26 +0000

Nodejs runtime was built on top of the v8 chrome engine which runs on the event loop model. Nodejs has a single thread runtime which makes it relatively fast in executing and dealing with I/O operations.

Even thought the single thread nature has much advantage it has some other disadvantages.
Nodejs applications can be blocking when CPU intensive tasks are running.

Imagine an express application which has a route that checks whether a number is a prime number. When a user sends a request passing a larger number, the application will prevent a user who sends a smaller number from getting a faster response.

Nodejs exposes a lot of APIs that allows developer to manage process and make full use of the host machine's capabilities.

Imagine spinning up multiple instances of your node applications on a single host that is well load balanced.

There is an easy implementation of this using a package I found on npm. The code snipped below shows a simple way of using this package to run multiple instances of your node applications on your host machine.

import express from "express";
import AppRunner from "express-worker-manager";

const app = express();

app.get("/hello", (_, res) =>
  res.send(`Hello response from app running in process ${process.pid}`)
);

const runner = new AppRunner(app, { env: "production",port:4000});
runner.listen(() => {
  console.log("App running");
});

The code below shows a simple usage of the express-worker-manager to spin up multiple instances of your express application based on the number of CPUs available on host machine. Each instance runs in a core of the CPU.

Link to package https://www.npmjs.com/package/express-worker-manager

DEV Community: Thomas Sarpong

Solving CSS and JavaScript Interference in Chrome Extensions: A Guide to React, Shadow DOM, and Best Practices

Introduction

Background

Potential Solutions

Solution 1: Class Name Prefixing

Solution 2: Rendering Content in an iframe

Solution 3: Using Shadow DOM

Best Solution and Best Practices

Potential Styling Issues and Solutions with the Shadow DOM Technique

Conclusion

Further Reading

Sending File Data in JavaScript: Comparing File Streaming with Multipart Form Data

Scaling up express js performance

Solution 2: Rendering Content in an `iframe`