Move SmartCopy to Chrome Manifest V3

An example for scraping a webpage by Gemini:

Recipe Clipper Chrome Extension (Example)

This is a basic example of a Chrome extension that parses a webpage to extract a recipe.

Functionality:

When you visit a recipe webpage and click the extension icon, it extracts the title, ingredients, and instructions.
It then displays this information in a popup window.

Components:

manifest.json: This file defines the extension's metadata like name, description, and what kind of pages it works on (in this case, all webpages).
content.js: This script runs on the webpage and interacts with the HTML content.

Here's a simplified breakdown of the files:

manifest.json:

{
  "manifest_version": 3,
  "name": "Recipe Clipper",
  "version": "1.0",
  "description": "Clips recipes from webpages",
  "permissions": ["activeTab"],
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }],
  "action": {
    "default_popup": "popup.html"
  }
}

content.js:

chrome.action.onClicked.addListener(function(tab) {
  // Get elements from the webpage
  var title = document.querySelector("h1.recipe-title").innerText;
  var ingredients = document.querySelectorAll("ul.ingredients li");
  var instructions = document.querySelector("div.instructions").innerText;

  // Process the data (can be improved for better extraction)
  var ingredientList = "";
  for (var i = 0; i < ingredients.length; i++) {
    ingredientList += ingredients[i].innerText + "\n";
  }

  // Create the recipe data object
  var recipe = {
    title: title,
    ingredients: ingredientList,
    instructions: instructions
  };

  // Send the recipe data to the popup script
  chrome.tabs.sendMessage(tab.id, recipe);
});

popup.html: (This is just an example structure for the popup window)

<!DOCTYPE html>
<html>
<head>
  <title>Recipe Clipper</title>
</head>
<body>
  <h1>Recipe</h1>
  <p id="recipe-title"></p>
  <h2>Ingredients</h2>
  <ul id="ingredients-list"></ul>
  <h2>Instructions</h2>
  <p id="instructions"></p>
  <script src="popup.js"></script>
</body>
</html>

popup.js: (This script receives data from content.js and populates the popup window)

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, function(response) {
    document.getElementById("recipe-title").innerText = response.title;
    document.getElementById("ingredients-list").innerText = response.ingredients;
    document.getElementById("instructions").innerText = response.instructions;
  });
});

Please note: This is a very basic example and has limitations. Real-world recipe parsing would require more sophisticated techniques to handle variations in HTML structure across recipe websites.

Remember, building Chrome extensions requires some coding knowledge. There are tutorials available online to get you started with Chrome extension development https://developer.chrome.com/docs/extensions/get-started. You can also find existing recipe clipper extensions on the Chrome Web Store for inspiration.

eljeffeg / SmartCopy

Move SmartCopy to Chrome Manifest V3 #112

Recipe Clipper Chrome Extension (Example)