Permalänk
Medlem

Hjälp med chrome extension

Hej,
försöker skapa ett chrome extension som ska visa en liten popup när man besöker vissa sidor. Jag har lyckats med allt utom själva visandet av pop-up. Någon som kan hjälpa mig?

fetch(chrome.runtime.getURL('assets/data.json')) .then(response => response.json()) .then(data => { const websites = data.domains; // Get the current domain let currentDomain = window.location.hostname; currentDomain = currentDomain.substring(currentDomain.indexOf('.') + 1, currentDomain.length); const matchDomain = domain => { return websites.some(entry => entry.domain === domain); } // Check if the current domain is in the list if (matchDomain(currentDomain)) { showNotificationBox(currentDomain) //alert('Denna sida kan du använda zupergift på') } }) .catch(error => { console.error('Error loading domains:', error) }); function showNotificationBox(domain) { fetch(chrome.runtime.getURL('popup.html')) .then(response => response.text()) .then(html => { // Use the HTML content console.log(html); const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); document.body.appendChild(doc.body.firstChild); // Now you can manipulate or inject this HTML content into your extension's UI }) .catch(error => console.error('Error loading HTML:', error)); // Hide the notification box after 5 seconds (adjust as needed) setTimeout(() => { //notificationBox.parentNode.removeChild(notificationBox); }, 5000); }

Dold text

Den loggar korrekt HTMLn så den lyckas hämta det men sedan tar det stopp.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="header"> Zupergift </div> <div class="content"> <img src="assets/airplane.png" alt="Icon" class="icon"> <p class="text"> edasdasdd </p> </div> <a class="button">asdasdas</a> </div> </body> </html>

html
Visa signatur

CPU: Ryzen 5600xGPU: 1080 TI ROG Strix RAM:2x16GB G.skill Trident @ 3600MHz MoBo: Asus B550FPSU: Corsair SF750
En resa till Nordkorea
2 dagar i Tjernobyl

Permalänk
Officiell jultomte

Har du läst deras docs om default_popup?

Visa signatur

PC1: i5-13600kf, 32gb DDR5@6000MHz, GTX 1080, Prime Z690-A, Windows 11
PC2: Ryzen 5 5600X, 16GB DDR4, GTX 1070Ti, ROG STRIX B550-F, Windows 10
SRV1: i5 10500T, 16GB DDR4, Debian
Home Assistant-tråden | Stryktipset

Permalänk
Skrivet av Pelegrino:

Hej,
försöker skapa ett chrome extension som ska visa en liten popup när man besöker vissa sidor. Jag har lyckats med allt utom själva visandet av pop-up. Någon som kan hjälpa mig?

fetch(chrome.runtime.getURL('assets/data.json')) .then(response => response.json()) .then(data => { const websites = data.domains; // Get the current domain let currentDomain = window.location.hostname; currentDomain = currentDomain.substring(currentDomain.indexOf('.') + 1, currentDomain.length); const matchDomain = domain => { return websites.some(entry => entry.domain === domain); } // Check if the current domain is in the list if (matchDomain(currentDomain)) { showNotificationBox(currentDomain) //alert('Denna sida kan du använda zupergift på') } }) .catch(error => { console.error('Error loading domains:', error) }); function showNotificationBox(domain) { fetch(chrome.runtime.getURL('popup.html')) .then(response => response.text()) .then(html => { // Use the HTML content console.log(html); const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); document.body.appendChild(doc.body.firstChild); // Now you can manipulate or inject this HTML content into your extension's UI }) .catch(error => console.error('Error loading HTML:', error)); // Hide the notification box after 5 seconds (adjust as needed) setTimeout(() => { //notificationBox.parentNode.removeChild(notificationBox); }, 5000); }

Dold text

Den loggar korrekt HTMLn så den lyckas hämta det men sedan tar det stopp.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="header"> Zupergift </div> <div class="content"> <img src="assets/airplane.png" alt="Icon" class="icon"> <p class="text"> edasdasdd </p> </div> <a class="button">asdasdas</a> </div> </body> </html>

html

Det @Moseby är inne på verkar vara det som fattas. Det jag tolkar av din JS-kod är att du bara lägger till HTML-koden i din nuvarande HTML-fil via document.body.appendChild medan du vill "appenda" till en helt ny webbflik i form av ett popupfönster.

Jag kan ingenting om popups, men detta kanske är något att experimentera med? https://developer.chrome.com/docs/extensions/mv2/reference/br...

Mvh,
WKL.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"

Permalänk
Medlem
Skrivet av Moseby:

Det har jag. Verkar ej finnas en programmatisk metod till att få fram popupen, allt ser perfect ut när jag lägger in den där men det är enbart då om man trycker på själva ikonen bland tillägg.

Visa signatur

CPU: Ryzen 5600xGPU: 1080 TI ROG Strix RAM:2x16GB G.skill Trident @ 3600MHz MoBo: Asus B550FPSU: Corsair SF750
En resa till Nordkorea
2 dagar i Tjernobyl