Inspiration The inspiration for the Accessibility Helper project comes from the desire to make the web more inclusive and accessible for everyone. Recognizing that not all users have the same level of digital literacy, language proficiency, or cognitive abilities, we aimed to create a tool that leverages the power of AI to break down barriers to online information. The Chrome Built-in AI Challenge provided the perfect opportunity to utilize cutting-edge client-side AI capabilities to address this critical need.

What it does The Accessibility Helper is a Chrome Extension that empowers users to customize their web browsing experience for better understanding and engagement. It provides the following key features powered by Chrome's built-in AI:

Simplify Text: Rewrites complex sentences and paragraphs into simpler language for easier comprehension. Summarize Content: Provides concise summaries of long articles or web pages to quickly grasp the main points. Translate Text: Translates selected text into a user's preferred language. How we built it We are building the Accessibility Helper as a Chrome Extension using standard web technologies (HTML, CSS, JavaScript). The development process follows these key steps:

Project Setup: Initializing the extension structure with the manifest.json file. UI Development: Creating the popup interface (popup.html, style.css, popup.js) for user interaction. Content Script: Developing a content script (content.js) to interact with web page content and capture selected text. Background Script: Implementing a background script (background.js) to manage the extension's logic, receive data from the content script, and communicate with the AI APIs. API Integration: Integrating the chrome.ai.builtIn APIs (Rewriter, Summarizer, Translator) into the background script to process the text. Displaying Results: Updating the popup UI to display the processed text received from the background script. Testing: Thoroughly testing the extension in a Chrome browser to ensure all features work as expected and handle various scenarios. Deployment: Packaging the extension and preparing it for distribution, potentially through the Chrome Web Store. Challenges we ran into Some of the challenges we anticipated or have faced include:

API Availability and Limitations: Ensuring the built-in AI APIs are available and perform consistently across different devices and Chrome versions, and understanding any limitations or quotas associated with their usage. Error Handling: Implementing robust error handling for API calls and other parts of the extension to provide clear feedback to the user. User Experience Design: Creating an intuitive and efficient user interface within the limited space of a browser extension popup. Asynchronous Operations: Managing asynchronous calls to the AI APIs and ensuring smooth data flow between the different extension components. Testing Edge Cases: Thoroughly testing the extension with diverse web content and user interactions to identify and fix potential issues. Accomplishments that we're proud of While still under development, we are proud of successfully setting up the core structure of the Chrome Extension, including:

Creating the necessary manifest file and project directories. Designing and implementing the basic user interface for the popup. Developing the content script to capture selected text. Setting up the background script to receive messages. Integrating placeholder logic for calling the built-in AI APIs and handling responses. What we learned Through this project, we are learning how to:

Develop a functional Chrome Extension from scratch. Effectively utilize the Chrome Built-in AI APIs. Design and implement a user-friendly interface for a browser extension. Manage communication between different components of a Chrome Extension. Handle asynchronous operations and potential errors when working with AI APIs. What's next for Kalyankart_Agents Our next steps for the Accessibility Helper include:

Implementing the actual calls to the Chrome Built-in AI APIs (Rewriter, Summarizer, Translator) in the background script. Refining the user interface and user experience based on testing and feedback. Adding options for users to customize the behavior of the accessibility features (e.g., target language for translation). Conducting thorough testing across various websites and scenarios. Packaging the extension and preparing it for submission to the Chrome Web Store. Exploring potential future enhancements, such as adding support for other AI APIs or integrating with more advanced accessibility features.

Built With

  • css
  • javascript-platforms:-chrome-browser-(as-a-chrome-extension)-apis:-chrome-built-in-ai-apis-(rewriter-api
  • summarizer-api
  • the-accessibility-helper-chrome-extension-is-being-built-using-standard-web-technologies:-languages:-html
  • translator
Share this project:

Updates