JavaScript Chrome extension: Function is not defined

Question

I'm working on facebook script that bans everyone who likes post in group.

My code

var links = document.getElementsByClassName("UFINoWrap");
var hrefAttr=[];
var profileID=[];
var elements = document.getElementsByClassName('UFILikeSentenceText');

var buttonID = 0;

function openBanList(id)
{   
    var linkString = "https://m.facebook.com/browse/likes/?id=";
    linkString+=profileID[id];
    var win = window.open(linkString);
}

for (var i = 0; i < elements.length; i++) 
{
    var buttonStringHTML = "      <button onclick=\"openBanList(id)\" id=\"";
    buttonStringHTML+=buttonID;
    buttonStringHTML+="\">Ban.</button>";
    buttonID++;
    elements[i].innerHTML+=buttonStringHTML;
}

for(var i=0; i<links.length; i++) 
{
    hrefAttr.push(links[i].getAttribute("href"));
    var begin = (hrefAttr[i].indexOf("&id") +4);
    profileID.push(hrefAttr[i].substring(begin, hrefAttr[i].length));
}

Console is saying that openBanList is not defined.

Answer 1

the page and your content script are separate things. content scripts are not injected into the page! Rather, content scripts run alongside the page. The page cannot access the content script, and the content script can only access the page's dom(and your background page).

When you add an onclick event through the dom, and you click on it, the dom looks for a function which was never defined by the part of the page it can access. If you want this to work you are going to have to run this on every one of your buttons:

mybuttonelement.onclick=function(){openbanlistthing(this.id)}