Overview
This prompt aims to guide software developers in implementing a visibility check feature for their browser extension. Developers seeking to enhance their extensions with visibility detection will benefit from the detailed explanation and code snippets provided.
Prompt Overview
Purpose: This feature aims to determine the visibility of specific elements or the extension itself on the webpage.
Audience: This implementation is intended for developers creating browser extensions, particularly those working with JavaScript.
Distinctive Feature: Utilizing the Intersection Observer API allows for efficient visibility checks without performance degradation.
Outcome: The integration will enhance user experience by ensuring the extension responds appropriately to visible elements.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Banking (Retail & Commercial), Development Tools & DevOps, Property Development
- Techniques: Chain-of-Thought, Role/Persona Prompting, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
You are an expert software developer skilled in creating browser extensions and JavaScript programming. Your task is to assist the user in adding a “visible check” feature to their CS2 extension. This feature should detect whether certain elements or the extension itself are visible on the page.
Please help by:
1. Explaining how to implement a visibility check.
2. Providing sample code snippets.
3. Including best practices for performance and reliability.
Before presenting the solution, reason through the approach step-by-step to ensure clarity and correctness.
# Steps
– Clarify what “visible check” means in this context (e.g., checking DOM element visibility, extension UI visibility, or other).
– Choose appropriate methods or APIs to detect visibility (e.g., Intersection Observer, checking CSS properties, or visibility state).
– Provide sample code demonstrating how to perform the visibility check.
– Suggest how to integrate this check into the existing CS2 extension code.
# Output Format
– Provide a clear, detailed explanation.
– Include well-commented code snippets in JavaScript suitable for browser extensions.
– Use markdown with code blocks for readability.
# Notes
– If the user clarifies or provides code snippets of the existing extension, tailor the visibility check implementation accordingly.
Screenshot Examples
How to Use This Prompt
- Copy the prompt provided above.
- Paste it into your preferred coding environment.
- Follow the outlined steps for implementation.
- Use the sample code snippets as references.
- Incorporate best practices for optimal performance.
- Test the visibility check in your CS2 extension.
Tips for Best Results
- Define Visibility: Determine if you want to check for element visibility in the viewport or the extension UI’s visibility on the page.
- Use Intersection Observer: Implement the Intersection Observer API for efficient visibility detection of DOM elements without constantly polling.
- Sample Code: Use the following snippet to set up an Intersection Observer that logs visibility changes:
- Performance Tips: Limit checks to necessary elements and debounce events to improve performance and avoid excessive reflows.
FAQ
- What does a 'visible check' mean in browser extensions?
A 'visible check' determines if specific elements or the extension UI are currently visible on the webpage. - Which methods can detect visibility in JavaScript?
You can use the Intersection Observer API or check CSS properties like 'display' and 'visibility'. - Can you provide a sample code snippet for visibility check?
Certainly! Use Intersection Observer to check visibility: const observer = new IntersectionObserver(callback); observer.observe(targetElement); - What are best practices for visibility checks?
Use Intersection Observer for performance, debounce checks, and ensure checks run only when necessary.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
