Webservices33
Web Zen Garden
Build a Chrome Extension in 10 minutes
Tutorial from YouTube:
On Rapid IP .com search for concert , then choose location.
https://rapidapi.com/s.mahmoud97/api/concerts-artists-events-tracker/
Enter the name of the city. Here Tokyo
Select a Start date and End Date
On the right side select JavaScript Fetch
4 FILES
README
concert-chrome-ext
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tokyo Concert Line-up</title>
</head>
<body>
<div>
<h2>Upcoming Tokyo Concerts</h2>
<ul>
<li id="concerts"></li>
</ul>
</div>
</body>
<script src="script.js"></script>
</html>
script.js
async function fetchData() {
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Key': '879eface33mshd76fc24d5a72516p1e605djsn3286258bcbe4',
'X-RapidAPI-Host': 'concerts-artists-events-tracker.p.rapidapi.com'
}
};
const res = await fetch('https://concerts-artists-events-tracker.p.rapidapi.com/location?name=Tokyo&minDate=2022-10-25&maxDate=2023-01-04&page=1', options)
const record = await res.json()
document.getElementById("concerts").innerHTML = record.data.map(item => `<li>${item.name}</li>`).join('');
}
fetchData();
manifest.json
{
"name": "Upcoming Tokyo Concerts",
"version": "1.0.0",
"description": "This is an extension to look up concerts coming to Tokyo",
"manifest_version": 3,
"author": "Tiffany J",
"action": {
"default_popup": "index.html",
"default_title": "Upcoming Tokyo Concerts"
}
}