Error on chorme extension: Uncaught ReferenceError: window is not defined

Question

I'm developing a Chrome Extension (don't have a lot experience with it), and I've the following code:

window.onload = function () {
    validateCNPJ();
};

function validateCNPJ() {
    document.querySelector('div[data-field-name="CNPJ"] > input').addEventListener('keydown', (bla) => {
        let ble = bla.target.value;
        console.log(ble.length)
        if (ble.length > 17) {
            bla.preventDefault()
            bla.stopPropagation()
            return
        }

        ble = ble.replace(/\D/g, "")
        ble = ble.replace(/^(\d{2})(\d)/, "$1.$2")
        ble = ble.replace(/^(\d{2}).(\d{3})(\d)/, "$1.$2.$3")
        ble = ble.replace(/.(\d{3})(\d)/, ".$1/$2")
        ble = ble.replace(/(\d{4})(\d)/, "$1-$2")
        bla.target.value = ble;
    })
}

I added window.load so that when the page loads, the validateCNPJ function is activated. That function validates a specific field in a form in real time.

The issue is that when I upload the extension it shows a error message saying:

Uncaught ReferenceError: window is not defined

I tested the code inside the function validateCPNJ in the console of the browser and it worked normally.

The manifest file is like this:

{
    "name": "CRM Validation Extension",
    "description": "Extension that validate fields of a opportunity",
    "version": "0.1",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    }
}

What can I do to solve this issue?

Thanks!

https://stackoverflow.com/questions/68194103/error-in-event-handler-referenceerror-window-is-not-defined-chrome-extension-w? — Andy, Oct 20 '21 at 15:19
Or https://stackoverflow.com/questions/40661777/referenceerror-window-is-not-defined-devtoolsextension — Paul Masri-Stone, Oct 20 '21 at 15:29
Sounds like you're loading this script in the wrong place. Show how it's loaded or declared e.g. in your manifest.json or html, and so on. — wOxxOm, Oct 20 '21 at 15:53
So basically, I can't use `window` because the `service worker` doesn't have the DOM? — Matheus Souza Silva, Oct 20 '21 at 16:28

score 0 · Answer 1 · answered Oct 20 '21 at 17:51

0

I manage to solve the issue. Previously my manifest.json was like this:

{
    "name": "CRM Validation Extension",
    "description": "Extension that validate fields of a opportunity",
    "version": "0.1",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    }
}

I changed the background object and replaced with the following:

"content_scripts":[
        {
            "matches": [
                "<all_urls>"
            ],
            "js": ["background.js"]
        }
    ]

This fixed the issue I was having.

answered Oct 20 '21 at 17:51

Matheus Souza Silva

17
5

1

It will prevent an access to chrome.contextMenus So, it doesn't resolve the issue. – Andrey Hohutkin Jun 30 '22 at 08:12
The background script/service worker and content script are quite separate things. This might be what you intended, but making this change will not help most people. – ChidG Jan 20 '23 at 01:54

Error on chorme extension: Uncaught ReferenceError: window is not defined

1 Answers1