Roadmap
Important Note: Deploying a Chrome Extension needs amount of 5$. You can find it here: WebStore>Developer Section.

1. Manifest.json:

This file defines the extension's metadata and functionalities. Here's a basic structure:

{
  "manifest_version": 3,
  "name": "Programming Practice Companion",
  "version": "1.0",
  "description": "Generate coding practice based on webpages",
  "permissions": ["activeTab", "storage"],
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

2. content.js:

This script runs on every webpage and analyzes the content.

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.message === "analyzePage") {
    const keywords = ["python loop", "javascript function", etc.]; // Add your keywords here
    let foundConcepts = [];
    for (const keyword of keywords) {
      if (document.body.innerText.toLowerCase().indexOf(keyword) !== -1) {
        foundConcepts.push(keyword);
      }
    }
    sendResponse({concepts: foundConcepts});
  }
});

3. popup.html:

This defines the user interface for the extension popup.

<title>Practice Companion</title> <script src="content.js"></script>

Generate Question <script src="popup.js"></script>

4. popup.js:

This script interacts with the content script and displays the question.

document.getElementById("getQuestion").addEventListener("click", async () => {
  const concepts = await chrome.storage.local.get("concepts");
  // Logic to generate question based on concepts (replace with your implementation)
  const question = "Write a function to reverse a string"; // Example question
  document.getElementById("question").innerText = question;
});

Note: This is a very basic implementation. Here's what needs further development:

• Concept Identification: Refine the logic in content.js to use regular expressions or NLP for more accurate identification.
• Question Generation: Implement logic in popup.js to generate different question formats based on the identified concepts.
• Customization: Allow users to define supported languages and difficulty levels through the extension settings.
• User Interface: Enhance the popup UI to display the question clearly and provide options for hints or solutions.

Remember, this is just a starting point. Building a robust extension requires ongoing development and refinement. You can find resources on Chrome extension development and NLP libraries online to further enhance this concept.