Move SmartCopy to Chrome Manifest V3 #112
Conversation
Update from master
Merge from master
|
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:
Components:
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. |
Trying to tackle #111 , so far no luck