erstelle eine ausführbare chrome erweiterung. die erweiterung soll eine tabelle von frei wählbaren sammlerobjekten wie zb euro münzen erstellen und diese auf einer webseite anzeigen.die man per click aktualisieren kann und die aktuellen werte automatisch angezeigt bekommt durch erweitern und sortierung der tabelle. die app soll zugriff auf alle bekannten suchmaschienen, münzdatenbanken, münzhändler, ebay haben und dort suchen.alle euromünzen und leuroänder soolen erfasst werden. die ergebnisse sollen in eine unendliche tabelle automatisch sortiert werden. die daten sollen mit bild visualiisiert sen.die app soll für sammler und händler sein.die deutsche und englische sprache soll unterstützt werden. sie soll im webbrowser überall benutzbar sein.Datenfelder: Land, Jahr, Wert, Prägequalität, Zustand, Gewicht, Durchmesser, Material, Motiv, Varianten, Fehlprägungen, historische Hintergründe.
Bilder: Hochwertige Bilder von Vorder- und Rückseite jeder Münze.
Preise: Historische und aktuell
Das Erstellen einer Chrome-Erweiterung, die eine Tabelle von Sammlerobjekten wie Euro-Münzen erstellt und diese auf einer Webseite anzeigt, ist ein komplexes Projekt, das mehrere Schritte und Technologien erfordert. Hier ist eine grundlegende Anleitung, wie du eine solche Erweiterung erstellen kannst:
Erstelle die grundlegende Struktur für deine Chrome-Erweiterung:
coin-collector/
│
├── manifest.json
├── background.js
├── popup.html
├── popup.js
├── content.js
├── styles.css
└── images/
Die manifest.json-Datei definiert die grundlegenden Informationen und Berechtigungen für deine Erweiterung.
{
"manifest_version": 3,
"name": "Coin Collector",
"version": "1.0",
"description": "Erstellt eine Tabelle von Sammlerobjekten wie Euro-Münzen und zeigt diese auf einer Webseite an.",
"permissions": [
"activeTab",
"storage",
"https://*/",
"http://*/"
],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}
}
Das background.js-Skript wird verwendet, um Hintergrundaufgaben auszuführen, wie z.B. das Abrufen von Daten von verschiedenen Quellen.
chrome.runtime.onInstalled.addListener(() => {
console.log('Coin Collector Extension Installed');
});
Die popup.html-Datei definiert das Layout des Popups, das angezeigt wird, wenn der Benutzer auf das Erweiterungssymbol klickt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Coin Collector</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Coin Collector</h1>
<button id="updateButton">Aktualisieren</button>
<table id="coinTable">
<thead>
<tr>
<th>Land</th>
<th>Jahr</th>
<th>Wert</th>
<th>Prägequalität</th>
<th>Zustand</th>
<th>Gewicht</th>
<th>Durchmesser</th>
<th>Material</th>
<th>Motiv</th>
<th>Varianten</th>
<th>Fehlprägungen</th>
<th>Historische Hintergründe</th>
<th>Bild</th>
</tr>
</thead>
<tbody>
<!-- Dynamische Inhalte hier -->
</tbody>
</table>
<script src="popup.js"></script>
</body>
</html>
Das popup.js-Skript wird verwendet, um die Logik für das Popup zu implementieren.
document.getElementById('updateButton').addEventListener('click', () => {
// Hier die Logik zum Abrufen und Aktualisieren der Münzdaten implementieren
fetchCoinData();
});
function fetchCoinData() {
// Beispiel für das Abrufen von Daten von einer API
fetch('https://api.example.com/coins')
.then(response => response.json())
.then(data => {
updateTable(data);
})
.catch(error => console.error('Error fetching coin data:', error));
}
function updateTable(data) {
const tableBody = document.querySelector('#coinTable tbody');
tableBody.innerHTML = ''; // Tabelle leeren
data.forEach(coin => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${coin.country}</td>
<td>${coin.year}</td>
<td>${coin.value}</td>
<td>${coin.mintQuality}</td>
<td>${coin.condition}</td>
<td>${coin.weight}</td>
<td>${coin.diameter}</td>
<td>${coin.material}</td>
<td>${coin.motif}</td>
<td>${coin.variants}</td>
<td>${coin.errors}</td>
<td>${coin.historicalBackground}</td>
<td><img src="${coin.image}" alt="Coin Image" width="50"></td>
`;
tableBody.appendChild(row);
});
}
Die styles.css-Datei enthält die CSS-Stile für das Popup.
body {
font-family: Arial, sans-serif;
padding: 10px;
}
h1 {
font-size: 18px;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-align: left;
}
img {
max-width: 100%;
height: auto;
}
Das content.js-Skript kann verwendet werden, um Daten von Webseiten zu extrahieren, wenn dies erforderlich ist.
// Beispiel für das Extrahieren von Daten von einer Webseite
// Dies ist nur ein Platzhalter und muss an die spezifische Webseite angepasst werden
const coins = [];
document.querySelectorAll('.coin-item').forEach(item => {
const coin = {
country: item.querySelector('.country').innerText,
year: item.querySelector('.year').innerText,
value: item.querySelector('.value').innerText,
mintQuality: item.querySelector('.mint-quality').innerText,
condition: item.querySelector('.condition').innerText,
weight: item.querySelector('.weight').innerText,
diameter: item.querySelector('.diameter').innerText,
material: item.querySelector('.material').innerText,
motif: item.querySelector('.motif').innerText,
variants: item.querySelector('.variants').innerText,
errors: item.querySelector('.errors').innerText,
historicalBackground: item.querySelector('.historical-background').innerText,
image: item.querySelector('img').src
};
coins.push(coin);
});
console.log(coins);
Um die Erweiterung in mehreren Sprachen zu unterstützen, kannst du Lokalisierungsdateien hinzufügen. Erstelle einen Ordner locales und füge JSON-Dateien für jede Sprache hinzu, z.B. de.json und en.json.
{
"appName": {
"message": "Münzsammler"
},
"updateButton": {
"message": "Aktualisieren"
}
}
{
"appName": {
"message": "Coin Collector"
},
"updateButton": {
"message": "Update"
}
}
chrome://extensions/ aufrufst und den Entwicklermodus aktivierst.Dies ist eine grundlegende Anleitung und es gibt viele weitere Details und Optimierungen, die du hinzufügen kannst, um die Erweiterung zu verbessern. Viel Erfolg!