This isn```t just another closed-source privacy tool. Built entirely in the open, this extension showcases best practices in modern Chrome extension development while solving real-world privacy challenges. Every line of code, every architectural decision, and every feature implementation is available for the community to learn from, contribute to, and improve upon.

This extension is capable of:

• Blurring messages, message previews, media previews, names, profile pictures, and text input fields on Bip Web.
• Unblurring elements on hover for quick access.
• Allowing users to customize privacy settings and blur intensities for each element.
• Dynamically injecting CSS based on user preferences for privacy layers.
• Providing a React-powered popup interface for granular control.
• Persisting settings using Chrome Storage API.
• Displaying real-time badge updates to indicate active privacy layers.
• Supporting internationalization (i18next).
• Enabling easy contribution and extensibility for new privacy features, profiles, and platforms.

🔍 ScreenShots & Visuals

🔍 ScreenShots & Visuals

🛠️ Technical Architecture & Code Deep-Dive

React-Powered Popup Interface with TypeScript

The extension```s popup interface demonstrates sophisticated React patterns with full TypeScript support:

const Popup: () => React.JSX.Element = (): React.JSX.Element => {  
    const \[currentTab, setCurrentTab\] = useState<chrome.tabs.Tab |null\>(null)  
    const { t } = useTranslation()  
  
    const defaultSettings: Settings = {  
        on: true,  
        styles: {  
            messages: false,  
            messagesPreview: false,  
            mediaPreview: false,  
            name: false,  
            profilePic: false,  
            textInput: false,  
        },  
        varStyles: {  
            msBlur: 8,    // Message blur intensity  
            mspBlur: 8,   // Message preview blur  
            mdgBlur: 20,  // Media blur (high privacy)  
            mdpBlur: 20,  // Media preview blur  
            nmBlur: 5,    // Name blur (subtle)  
            ppBlur: 8,    // Profile picture blur  
            wiBlur: 14,   // Text input blur  
        }  
    }  
      
    const \[settings, setSettings\] = useChromeStorageLocal('settings', defaultSettings)  
      
    // Dynamic badge calculation - shows active privacy layers  
    const enabledStylesCount: string = useMemo((): string => {  
        if (!settings?.styles) return "X"  
        return Object.values(settings.styles).filter(Boolean).length.toString()  
    }, \[settings\])  
}

Dynamic CSS Injection System

The heart of the privacy system lies in its intelligent CSS generation. The extension dynamically creates CSS rules based on user preferences:

export const getCSS = (settings: Partial<Settings\>): CSSStyles => {  
  const defaultBlur = {  
    msBlur: 8, mspBlur: 8, mdgBlur: 20, mdpBlur: 20,   
    nmBlur: 5, ppBlur: 8, wiBlur: 14,  
  }  
    
  const varStyles = settings.varStyles || defaultBlur  
    
  return {  
    messages: \`  
      /\* Targeted selectors for Bip Web's dynamic class names \*/  
      div\[itemtype="messages"\] div\[class^="\_textBubble\_\_card\_info\_\_message\_container\_"\],   
      div\[itemtype="messages"\] div\[class^="\_textBubble\_\_card\_info\_\_message\_content\_text\_"\],   
      div\[itemtype="messages"\] div\[class^="video-element"\],   
      div\[itemtype="messages"\] div\[class^="document-element"\],   
      div\[itemtype="messages"\] div\[class^="image-element"\] {  
        filter: blur(${varStyles.msBlur}px) !important;  
        transition: filter 0.3s ease-in-out !important;  
      }  
        
      /\* Smart hover reveal functionality \*/  
      div\[itemtype="messages"\]:hover div\[class^="\_textBubble\_\_card\_info\_\_message\_container\_"\] {  
        filter: none !important;  
      }  
    \`,  
    // ... additional CSS rules for other privacy layers  
  }  
}

Chrome Extension Manifest V3 Implementation

The extension showcases modern Chrome extension architecture with Manifest V3:

{  
  "manifest\_version": 3,  
  "name": "Bip Web Privacy Extension",  
  "description": "Privacy extension for web.bip.com that applies blur effects to various elements",  
  "version": "1.1",  
  "content\_scripts": \[{  
    "matches": \["<all\_urls>"\],  
    "js": \["js/vendor.js", "js/content\_script.js", "content.js"\]  
  }\],  
  "background": {  
    "service\_worker": "js/background.js"  
  },  
  "permissions": \["scripting", "activeTab", "storage"\],  
  "host\_permissions": \["<all\_urls>"\]  
}

🌟 Open-Source Excellence: Learn, Contribute, Innovate

Modern Development Stack

This project serves as a masterclass in modern web development:

• ⚛️ React 18 + TypeScript: Type-safe component architecture
• 🔧 Webpack Configuration: Multi-environment build system
• 🧪 Jest Testing Framework: Comprehensive test coverage
• 🌍 Internationalization (i18next) Integration: International accessibility
• 📦 Chrome Storage API: Persistent settings management
• 🎨 CSS-in-JS Patterns: Dynamic styling system

Architecture Patterns Worth Studying

• Settings Management with React Hooks:

// Custom hook integration with Chrome storage  
const \[settings, setSettings, isPersistent, error, isInitialStateResolved\] =   
  useChromeStorageLocal('settings', defaultSettings)

• Real-time Badge Updates

useEffect((): void => {  
    chrome.action.setBadgeText({   
      text: isWeb4Bip() ? enabledStylesCount.toString() : "X"   
    })  
    chrome.action.setBadgeBackgroundColor({   
      color: isWeb4Bip() ? "#4285F4" : "#FF0000"   
    })  
}, \[enabledStylesCount, currentTab\])

• Modular CSS Generation: The extension demonstrates clean separation of concerns with centralized style management, making it easy to add new privacy features.

Contributing to the Future of Privacy

This open-source project invites developers to:

• 🔍 Study the codebase to learn Chrome extension best practices
• 🚀 Contribute new features like additional blur targets or privacy modes
• 🌐 Add internationalization for new languages
• 🎨 Improve the UI/UX with modern design patterns
• ⚡ Optimize performance with better DOM observation techniques
• 🧪 Expand test coverage with additional test cases

Development Environment Setup

Getting started with contributions is straightforward:

# Clone and setup

git clone https://github.com/senocak/Chrome-Extension-For-Bip-Web.git  
cd Chrome-Extension-For-Bip-Web  
npm install  

# Development with hot reload

npm run watch  

# Production build

npm run build  

# Run tests

npm test  

# Run build

npm run build

🎯 Real-World Impact for Privacy-Conscious Users

Whether you’re a:

• Remote worker in coffee shops and co-working spaces
• Business professional handling sensitive communications
• Privacy-conscious individual who values digital discretion
• Student working on projects in public libraries
• Anyone who believes privacy should be a choice, not a luxury

This extension transforms any public space into your private office.

Installation & Experience

Setting up your privacy shield is remarkably simple:

• Clone the repository and build with npm install && npm run build
• Load the extension in Chrome’s developer mode
• Navigate to web.bip.com and watch the magic happen
• Customize your privacy settings through the intuitive popup interface
• Enjoy peace of mind knowing your digital interactions are protected

🔮 Open-Source Community Opportunities

Potential Contributions & Extensions

The codebase is designed for extensibility. Community members can contribute:

• Custom Privacy Profiles: Preset configurations for different use cases
• Advanced Blur Algorithms: Gaussian blur, pixelation, or custom filters
• Multi-Platform Support: Firefox, Safari, Edge compatibility
• Performance Monitoring: Real-time performance metrics
• Privacy Analytics: Usage statistics (privacy-preserving)
• Advanced Selectors: AI-powered content detection

Learning Opportunities

This project is perfect for developers wanting to learn:

• Chrome Extension Manifest V3 migration
• React + TypeScript integration patterns
• Dynamic CSS injection techniques
• Chrome Storage API implementation
• Internationalization with i18next
• Modern build tooling with Webpack

💡The Open-Source Privacy Movement

This extension represents more than just code — it’s a statement about transparent privacy tools. In an ecosystem dominated by closed-source privacy solutions, this project proves that:

• Transparency builds trust**: Every privacy feature is auditable
• Community improves security: More eyes make privacy bugs shallow
• Open standards prevail: Extensible architecture allows innovation
• Knowledge sharing matters: Educational value for the next generation of privacy-focused developers

Technical Innovation Highlights

• Zero external dependencies for core privacy functionality
• Sub-100ms blur application with optimized CSS selectors
• Memory-efficient DOM observation patterns
• Backwards-compatible settings migration system
• Accessibility-conscious design with proper ARIA labels

🚀 Join the Privacy Revolution

Ready to contribute to the future of digital privacy? The Bip Web Privacy Extension offers multiple ways to get involved:

• 🔨 Code Contributions: Submit PRs for new features or bug fixes
• 📚 Documentation: Improve setup guides and API documentation
• 🌐 Localization: Add support for new languages
• 🧪 Testing: Expand test coverage and edge case handling
• 💡 Feature Requests: Propose new privacy-enhancing features

Full code example can be found in github

Chrome Web Store