Running into different errors when integrating google optimize with chrome extension - google-chrome-extension

Question

I'm trying to integrate google optimize on chrome extension using google tag manager. I have everything working right except for A/B testing:
here's the function I use to inject containers
const accountToken = `GTM-XXXXX`;
const googleOptimize = `OPT-XXXXX`;
const analyticsToken = `UA-XXXXXX-X`;
function integrateGTM() {
console.log("Trying GTM");
if (!document.querySelector("body")) {
return setTimeout(integrateGTM, 100);
}
const fliker = `
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',7000,
{'${accountToken}':true});`;
const gtm = `(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;
console.log(j.src);
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "${accountToken}");
`;
const analyticsSource = "https://www.google-analytics.com/analytics.js";
const analyticsCode = `
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '${analyticsToken}', 'auto');
ga('send', 'pageview');
`;
const optimizeSrc = `https://www.googleoptimize.com/optimize.js?id=${googleOptimize}`;
console.log(fliker, gtm);
const FLICKER = document.createElement("script");
FLICKER.async = false;
FLICKER.innerHTML = fliker;
document.querySelector("head").prepend(FLICKER);
const GTM = document.createElement("script");
GTM.innerHTML = gtm;
const sOPTIMIZE = document.createElement("script");
sOPTIMIZE.async = true;
sOPTIMIZE.src = optimizeSrc;
const analytics = document.createElement("script");
const analytics2 = document.createElement("script");
analytics.asyc = true;
analytics.src = analyticsSource;
analytics2.innerHTML = analyticsCode;
document.querySelector("head").append(GTM);
document.querySelector("head").append(analytics);
document.querySelector("head").append(analytics2);
document.querySelector("head").append(sOPTIMIZE);
const code = `<iframe src="https://www.googletagmanager.com/ns.html?id=${accountToken}"
height="0" width="0" style="display:none;visibility:hidden"></iframe>`;
const bodyScript = document.createElement("noscript");
bodyScript.innerHTML = code;
document.body.prepend(bodyScript);
}
I even included the tools in the CSP:
"content_security_policy": "script-src 'self' https://www.google-analytics.com https://www.googletagmanager.com https://ajax.googleapis.com; object-src 'self'",
Yet each time I make a change, I get one of these errors in the variant debug mode:
Page modified after initial load
This experience was not applied.
This experience was activated in a previous event.
The following tags were blocked by Google Tag Manager from running on this page: esc.
Sometimes I don't even get any errors yet the experiment doesn't run!
I think this happening because the page changes its content because mainly the extension injects content to another website. I'm so lost.