浏览器扩展使用动态链接创建动态按钮

Question

我正在尝试创建一个浏览器扩展弹出窗口（在 JS 中），它创建了许多带有 link 的按钮，可以打开不同的网页。该函数采用多个参数，主要参数是 b_link，它是网站的 URL 数组。出于某种原因，只有数组中的最后一个 URL 应用于所有创建的按钮。

我不完全确定问题出在哪里，我可以推测，但我认为这不会产生效果。我确实注意到并且必须补偿的一件事是在 lambda 函数中使用 b_link。仅使用 b_link[i]，lambda 函数只看到未定义，因此没有打开网页，但使用 var tmpLink = b_link[i]; 至少将 link 放入函数并允许打开网页。

我应该如何制作这些按钮，使它们都有自己的 link，而不仅仅是数组中的最后一个？

有问题的函数：

function createSiteButton(numBtns, b_id, b_class, b_text, b_link, b_bg)
{
    
    // check if the input text is an array
    if (Array.isArray(b_text))
    {
        // create the new set of buttons
        for (i= 0; i < numBtns; i++)
        {
            var newButton = document.createElement('button');
            var tmpLink = b_link[i];
            newButton.id = b_id;
            newButton.class = b_class;
            newButton.innerHTML = b_text[i];
            newButton.style.background = b_bg;
            
            newButton.addEventListener("click", function()
            {
                if (tmpLink)
                {
                    window.open(tmpLink, "_blank");
                }
            });
            
            button_array[i] = newButton;
        }   
        
        // add the new buttons the screen
        for (i= 0; i < numBtns; i++)
        {
            divID.appendChild(button_array[i]);
        }
    }
}

Answer 1

我找到了一种方法，方法是创建一个 a 元素，通过 a.href = tmpLink 设置 href 并将按钮作为子元素附加到 a 元素。最终函数为：

function createSiteButton(numBtns, b_id, b_class, b_text, b_link, b_bg)
{
    var outputElem = document.getElementById('output');
    
    // check if the input text is an array
    if (Array.isArray(b_text))
    {
        //var tmpLink = null;
        // create the new set of buttons
        for (i= 0; i < numBtns; i++)
        {
            var a = document.createElement('a');
            var newButton = document.createElement('button');
            var tmpLink = b_link[i];
            newButton.id = b_id;
            newButton.class = b_class;
            newButton.innerHTML = b_text[i];
            newButton.style.background = b_bg;
            
            a.href = tmpLink;
            
            a.appendChild(newButton);
            divID.appendChild(a);
            
            button_array[i] = newButton;
        }
    }
}

浏览器扩展使用动态链接创建动态按钮

Browser Extension's creating dynamic buttons with dynamic links

javascript

browser

arrays

parameter-passing

webbrowser-control