Inspiration

The prevalence of dark patterns, fake reviews, and clickjacking in e-commerce poses significant challenges to both consumers and businesses. According to recent studies, over 40% of consumers have experienced unplanned financial consequences due to dark patterns, resulting in billions of dollars in losses annually [ref1]. These deceptive practices not only erode trust and lead to financial loss but also undermine the integrity of online marketplaces. A concerning 56% of respondents in a recent survey stated that they had lost trust in a website or social media platform due to its dark or manipulative patterns. Moreover, over 43% of online shoppers have stopped buying from an online retailer specifically because of dark patterns [ref2]. We want to empower users to identify and avoid these tactics, creating a more transparent and ethical digital landscape. To further protect user rights, we ensured that our solution aligns with privacy best practices. By utilizing the Gemini Nano model, which runs directly on the client’s browser without involving any server-side computation, we respected user privacy. Privacy is critical in this use case because detecting dark patterns often involves analyzing sensitive webpage content or elements that could inadvertently reveal user browsing behavior. Ensuring this analysis occurs entirely on the client-side eliminates the risk of data exposure or misuse, maintaining user trust while safeguarding their digital activity. Not only do we aim to protect consumers from exploitation, but we also help businesses maintain their reputation and improve customer satisfaction. Our solution aligns with growing regulatory efforts to combat dark patterns. As the e-commerce market continues to grow, reaching $41 billion in online sales over holiday weekends alone [ref3], the potential impact of our solution becomes increasingly significant.

What it does

  • Dark Pattern Detection: The extension enables users to analyze individual webpage elements to identify the presence of dark patterns. It categorizes these patterns and provides explanations for the classification, with the classification being done using the Gemini Nano Prompt API.
  • Full Page Scan: Users can scan the entire page for dark patterns, ensuring comprehensive analysis of the webpage.
  • Customization of Scan Proportion: Users can customize how much of the page they want to scan by adjusting the proportion of page elements for analysis.
  • Fake Review Detection: Users can select individual reviews and analyze their likelihood of being fake, based on probability predictions provided by the Gemini Nano Prompt API.
  • Clickjacking Detection: The extension scans for and removes clickjacking attempts across the page, ensuring user safety from malicious interactions.
  • User Feedback: The extension supports user feedback by allowing users to select any webpage element and report inaccuracies or dissatisfaction with the analysis, fostering continuous improvement.
  • Performance Stats: The extension displays statistics regarding its performance, such as the number of dark patterns detected and the number of fake reviews identified, helping users track its effectiveness.
  • Real-time Detection: Detection results for dark patterns and fake reviews are dynamically rendered within the extension's user interface, providing real-time feedback.
  • Customizable Detection Parameters: Using the features of the Gemini Nano Prompt API, users can fine-tune detection parameters, such as setting temperature and top-k values, enabling more targeted scans based on specific needs or concerns.
  • Privacy Protection: The extension ensures that all processing is done on the client side, safeguarding user data and privacy.

How we built it

The extension implements a dark pattern classifier using DOM tree traversal and hierarchical element identification. Each HTML element is assigned a unique id based on its position in the DOM tree, following a parent-child naming convention. The extracted elements are cleaned to remove partially duplicate elements and noise. We sorted the elements on the basis of distance from the viewport center and allowed user to select how many of these does he wants to process. The elements are then submitted to a Gemini Nano prompt API specifically trained to classify dark pattern type and also provide reasons for the classification. For specific dark pattern detection, such as clickjacking, the extension performs comprehensive iframe analysis. It identifies and filters iframes based on Visibility attributes (hidden elements), Z-index positioning, Source domain verification (comparing iframe source against the current host). The classification results are dynamically rendered within the extension's user interface, providing real-time detection of potential dark patterns. For review analysis we fed the review text to Gemini Nano prompt API which is trained to predict how likely is the review fake (in terms of probability percentage).

Challenges we ran into

Developing the Chrome extension presented several challenges that we addressed systematically. First, creating an accurate system prompt to train the Gemini Nano Prompt API was crucial, as an imprecise prompt could lead to unreliable results. To resolve this, we utilized the Gemini Nano Playground, a user-friendly platform for iterative testing and refinement, ensuring accurate and consistent classifications. Second, processing thousands of HTML elements on a webpage significantly slowed the API, especially due to partial duplicates and noise in the DOM. To address this, we implemented a cleanup function to filter redundant elements and unwanted data, then sorted the cleaned map of elements based on their distance from the center of the viewport. Additionally, we introduced a slider to allow users to select the proportion of elements to process, further optimizing performance. Finally, designing a user-friendly interface was essential to make the extension intuitive and accessible. By incorporating features like element highlighting, actionable buttons, and clear output displays, we created an interface that balances technical functionality with ease of use. A significant challenge arose when we needed to track and store the extension's statistics effectively. The chrome.local.storage API provided a solution, but handling large amounts of data while maintaining optimal performance required careful management. We ensured efficient data access and storage by structuring the data logically and implementing performance optimizations. These solutions collectively ensured a robust and efficient extension.

Accomplishments that we're proud of

We are proud of building a Chrome extension that leverages advanced AI in an innovative way to enhance user security and promote ethical web practices. A significant achievement was the creative use of the Gemini Nano Prompt API to identify and classify dark patterns—manipulative design strategies often hidden in webpages—thereby helping users make informed decisions online. This novel application of AI addresses a critical gap in user protection, marking a step forward in combating deceptive practices. Additionally, we were able to contribute to making the digital landscape a safer and more transparent space. By enabling users to detect fake reviews and clickjacking attempts, our extension actively empowers them against online exploitation. Furthermore, since the Gemini Nano model operates entirely on the client side, we ensured that user data and privacy were fully safeguarded, a vital consideration in today's privacy-conscious environment. By combining technical innovation with a user-centric approach, we not only developed a powerful tool but also contributed to the larger mission of fostering trust and integrity in the digital ecosystem.

What we learned

Throughout the development of this Chrome extension, we gained valuable insights into various aspects of software development and product design. One of the most significant areas of learning was exploring and experimenting with different APIs of Gemini Nano. We gained a deep understanding of how these models can be applied in real-world scenarios, particularly for tasks like detecting dark patterns and classifying fake reviews. This experience not only enhanced our technical knowledge but also allowed us to refine our approach to integrating machine learning models effectively into a user-facing product. We also developed a stronger understanding of how building browser extensions works, especially in terms of interacting with the DOM to extract, manipulate, and process data efficiently. This involved learning new techniques for scraping and analyzing webpage elements to provide meaningful insights while keeping the application responsive and user-friendly.We also learned React, which was crucial in designing and structuring the extension’s frontend. This experience taught us how to build scalable, interactive interfaces while prioritizing simplicity, usability, and performance. We focused on creating an intuitive and seamless user experience, ensuring users could easily access the extension’s features without complexity. Overall, this project has been an incredibly rewarding learning experience.

What's next for DarkMatter

Future updates for DarkMatter will focus on enhancing detection, compliance, and accessibility. We plan to expand the range of dark pattern categories the extension can identify by continuously training the Gemini Nano API with new data, improving its accuracy and ability to detect emerging manipulative design tactics. Additionally, we will introduce compliance-focused features, such as mapping detected dark patterns to legal guidelines and generating compliance reports for businesses. Tools for reporting severe dark patterns to authorities and creating industry-specific dark pattern guidelines will also be incorporated to help businesses align with regulatory standards. In terms of accessibility, we will implement voice commands to enable users to navigate and interact with the extension’s functionality more easily. Integration with popular screen readers will provide audio feedback for detected dark patterns and other findings, ensuring that the extension is usable for a wider audience.

Built With

  • promptapi
  • react
  • summarizationapi
  • translateapi
  • vite
Share this project:

Updates