Chrome Extension: CSS Changes Detection and Synchronization

This article delves into the creation and functionality of a Chrome extension designed to detect and sync changes made to CSS styles — both inline and external. By leveraging the powerful Chrome Extension APIs, this project bridges the gap between live browser debugging and permanent code updates.

1. What is a Chrome Extension?

A Chrome Extension is a small software program that customizes the browsing experience. It can modify web pages, interact with APIs, and provide tools for users.

Key Components of a Chrome Extension:

1. Manifest File : Defines the extension’s metadata, such as name, version, and permissions.

2.Background Script: Executes in the background and listens for browser events.

3.Content Script: Injected into web pages to interact with the DOM.

4. Popup: Optional UI component that appears when you click the extension’s icon.

2. Extension Overview: CSS Syncer

The CSS Syncer extension captures changes to CSS (inline and external styles) and enables developers to sync these changes back to the codebase. This minimizes the disconnect between the live browser environment and the static code.

Use Cases:

• Tracking dynamic style changes during development.
• Preventing the loss of CSS tweaks made during debugging.
• Observing external stylesheets for additions, deletions, or modifications.

GitHub Repository: CSS Detect Extension

3. File Breakdown and Functionality

1. This file is the blueprint of the extension.

• Notable Configurations:
• manifest_version: 3: Uses the latest extension API.
• permissions: Allows scripting, tab interaction, and storage access.
• background: Registers the background.js as the service worker.
• content_scripts: Injects content.js into all web pages.

Code Snippet:

{
  "manifest_version": 3,
  "name": "CSS Syncer",
  "version": "1.1",
  "description": "Sync CSS changes from Developer Tools to the codebase.",
  "permissions": ["scripting", "activeTab", "storage"],
  "host_permissions": ["<all_urls>"]
}

2. A persistent script that manages extension-wide tasks.

• Purpose:
• Listens for messages from content.js.
• Handles the storage and communication of detected changes.

Code Highlights:

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === 'ELEMENT_STYLE_CHANGES') {
        chrome.storage.local.set({ elementCssChanges: message.changes });
    }
    if (message.type === 'STYLESHEET_CSS_CHANGES') {
        chrome.storage.local.set({ styleSheetChanges: message.changes });
    }
});

3. Injected into every web page to monitor DOM and CSS.

Key Features:

Capture Current CSS State: Tracks external stylesheets.

Detect External CSS Changes: Compares current and previous states of stylesheets.

Inline Style Changes: Observes style attribute mutations in the DOM.

Code Highlights:

const inlineObserver = new MutationObserver((mutations) => {
    const changes = [];
    mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            const oldStyle = mutation.oldValue;
            const newStyle = mutation.target.getAttribute('style');
            changes.push({
                oldRule: oldStyle,
                newRule: `${mutation.target.tagName.toLowerCase()} { ${newStyle} }`
            });
        }
    });
    if (changes.length > 0) {
        chrome.runtime.sendMessage({ type: 'ELEMENT_STYLE_CHANGES', changes });
    }
});
inlineObserver.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['style'], attributeOldValue: true });

4. How It Works

1. Inline Styles:

A MutationObserver watches for changes in the style attributes of elements. When detected, the changes are logged and sent to the background.js script.

2. External Stylesheets:

Stylesheets are scanned for changes in rules (e.g., addition, deletion, or modification). The differences are computed and sent for storage.

3. Storage and Sync:

Changes are saved using the Chrome Storage API. This data can later be exported or utilized to update the source code.

5. Future Enhancements

• User Interface: A dashboard to view and export detected changes.
• Selective Sync: Allow users to choose which changes to apply.
• Real-Time Collaboration: Share detected changes across teams.

6. Conclusion

The CSS Syncer Chrome Extension simplifies the debugging and development process by bridging the gap between browser and code. It showcases the power of Chrome’s extension API in solving practical problems faced by developers.

Whether you’re debugging a website or maintaining a dynamic web application, this extension ensures your hard work isn’t lost between browser sessions.