I'm making a google chrome extension which shows notifications on specific circumstances, and when the notification is clicked I need to open a new tab using an html file which needs to be edited after an api call. The way I tried to do that is by injecting a content script in background.js but I can't get it to work. Is there any better/easier way to do it?
Background.js part of code
//chrome.sendMessage()
var myWindow=window.open ("index.html","mywindow");
var activeTabId;
chrome.tabs.getCurrent( function(tab){ activeTabId = tab.id } );
chrome.tabs.executeScript(activeTabId, {"file": "contentScript.js"});
(contentScript.js code)
var myWindow=window.open ("index.html","mywindow");
var cards=myWindow.document.getElementById('cards');
console.log(cards);
let new_card = '<div class="col-5 col-md-3 col-lg-2 p-0 mr-2 col"> <div class="card"> <a
class="text-center" href=""> <div class=" f-16 text-dark mt-4 card-title"> <strong class="text-
capitalize">NEW CARD</strong> </div> </a> </div> </div> ';
cards.innerHTML=new_card;