0

I'm learning to build a simple chrome extension

I'm facing an issue when trying to load the extension, i get an error: Service worker registration failed and the background.js is highlighted in error window

if I comment the line document.getElementById('balance').addEventListener('click', hello); the loading completes sucessfully.

what causes the error? also, I know I can debug the code once the load has been complete, but is there a way to debug the loading part

manifset file:

{
  "name": "balance extension",
  "description": "Card balance",
  "version": "1.0",
  "manifest_version": 3,
  "host_permissions": ["*://*/*"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": "logo.png",
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "logo.png",
    "32": "logo.png",
    "48": "logo.png",
    "128": "logo.png"
  }
}

popup.html:

<!DOCTYPE html>
<html>

<head>
    <title>Click it</title>
</head>

<style type="text/css">
    body {
        margin: 15px;
        background-color: orange;
    }

    h1 {
        font-size: 15px;
        text-align: center;
        color: white;
    }

    button {
        text-align: center;
        background-color: white;
        border: none;
    }
</style>

<body>
    <h1>Balance Extension</h1>
    <button id="balance">Get card Balance</button>
    <script type="text/javascript" src="background.js"></script>
</body>

</html>

background.js:

chrome.runtime.onInstalled.addListener(() => {
    console.log("extension installed succesfully");
});

chrome.action.onClicked.addListener(async () => {
    try {
        const report = await getReport();
        console.log(`Daily Balance: ${report.balance.daily}`);
        console.log(`Monthly Balance: ${report.balance.monthly}`)
    } catch (e) {
        console.error(e);
    }
});

async function getReport() {
    const TOKEN = "********************";
    const URL = "**********************";

    const response = await fetch(URL, {
        method: "POST",
        headers: {
            "Content-Type": "application/json; charset=utf-8",
            "user-token": TOKEN
        }
    });
    const res = await response.json();
    const balance = res.Data.moneycards[0].balance
    
    cardInfo = {
        balance: {
            daily: balance.daily,
            monthly: balance.monthly
        }
    }
    return cardInfo;
}

function hello() {
    console.log("Hello");
}

document.getElementById('balance').addEventListener('click', hello);

thanks

zalts1
  • 23
  • 4
  • https://stackoverflow.com/questions/39136625/service-worker-registration-failed or https://stackoverflow.com/questions/66114920/service-worker-registration-failed-chrome-extension try those – fanfare May 31 '21 at 06:54
  • 1
    Remove background.js from your popup.html and make a new script popup.js that will deal with the popup's UI. The background script already runs in a separate hidden service worker. Use chrome.runtime messaging to communicate between the popup script and the background script. – wOxxOm May 31 '21 at 07:04
  • thanks @wOxxOm, should i add the popup script somewhere in the manifest then? it seems unresponsive – zalts1 May 31 '21 at 10:23
  • The popup script should be loaded in popup.html instead of currently (incorrectly) loaded background.js – wOxxOm May 31 '21 at 10:26

0 Answers0