Google Tag manager won't work with chrome extension

Question

My chrome extension app doesn't have a popup but rather injects the HTML to a dedicated domain. I want to track whether the user clicks on the button that's been injected & how often & how long.

I followed this article as there's literally no other guidance to follow on the web.

Steps I followed:

1-Add analytics code to all my JS files.

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');

2- append the src to all JS files:

$('head').append('<script async src="https://www.googletagmanager.com/gtag/js?id=UA-..."></script>');

3 - Modify my manifest.json:

"content_security_policy": "script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com https://ajax.googleapis.com; object-src 'self'",

4- Click "Enable overriding setting in this tag" to give the following fields and values:

checkProtocolTask : false
page: mycustompage

as extensions don't have URL.

Yet I see no events to my google analytics real time event nor any indication that's working. Is there a step that I missed or should do something else instead? Or Shall I completely move to another analytics platform that's catered for apps w/o URL an are easier to use.