I'm creating an application for this website.
here the manifest.json file
{
"manifest_version": 3,
"name": "Smarkets Extension",
"version": "1.0",
"description": "Adds a button to the Smarkets website.",
"permissions": ["activeTab", "identity", "https://sheets.googleapis.com/"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://smarkets.com/listing/sport/basketball?period=today"],
"js": ["content.js"]
}
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"oauth2": {
"client_id": "client_ID",
"scopes": [
"https://www.googleapis.com/auth/spreadsheets",
"https://www.googleapis.com/auth/drive",
"https://www.googleapis.com/auth/drive.readonly",
"https://www.googleapis.com/auth/drive.file",
"https://www.googleapis.com/auth/spreadsheets.readonly"
]
}
}
Here the content.js file
async function extractMatchDetails() { // Select all event tiles console.log("hi"); let matches = []; const eventTiles = document.querySelectorAll(".event-tile");
// Iterate over each event tile eventTiles.forEach((tile) => {
// Extract relevant information from the tile
const teams = tile.querySelectorAll(".team-name");
const homeTeam = teams[0] ? teams[0].textContent.trim() : "";
const awayTeam = teams[1] ? teams[1].textContent.trim() : "";
const scores = tile.querySelectorAll(".score-block .score");
const homeScore = scores.length > 0 ? scores[0].textContent.trim() : "";
const awayScore = scores.length > 1 ? scores[1].textContent.trim() : "";
const contractItems = tile.querySelectorAll(".contract-item");
const homeOffer = contractItems[0]
? contractItems[0]
.querySelector(".price.tick.buy.enabled")
.textContent.trim()
: "";
const homeBid = contractItems[0]
? contractItems[0]
.querySelector(".price.tick.sell.enabled")
.textContent.trim()
: "";
const awayOffer = contractItems[1]
? contractItems[1]
.querySelector(".price.tick.buy.enabled")
.textContent.trim()
: "";
const awayBid = contractItems[1]
? contractItems[1]
.querySelector(".price.tick.sell.enabled")
.textContent.trim()
: "";
// Log the extracted details to the console
console.log("Home Team:", homeTeam);
console.log("Away Team:", awayTeam);
console.log("Home Score:", homeScore);
console.log("Away Score:", awayScore);
console.log("Home Offer:", homeOffer);
console.log("Home Bid:", homeBid);
console.log("Away Offer:", awayOffer);
console.log("Away Bid:", awayBid);
console.log("---------------------------------");
const match = {
homeTeam,
awayTeam,
homeScore,
awayScore,
homeOffer,
homeBid,
awayOffer,
awayBid,
};
// Add the match to the array
matches.push(match); }); console.log("hitting the api call now") chrome.runtime.sendMessage({ action: "updateSheet", matches }); console.log("hitting done") }
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { if (message.action === "extractMatchDetails") {
extractMatchDetails(); } });
here's the popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://apis.google.com/js/api.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smarkets Extension</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="startButton">Start</button>
<script src="popup.js"></script>
</body>
</html>
here the popup.js file
document.addEventListener('DOMContentLoaded', function() {
const startButton = document.getElementById('startButton');
startButton.addEventListener('click', function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {action: 'extractMatchDetails'});
});
});
});
Alright I'm learning creating the chrome extensions. So The issue I'm facing is I can extract the details but I'm not able to update the google online sheet.
So this extension auto runs after 4 seconds and update the records into the excel sheet.
Please help me thank you