Question

我创建了一个chrome扩展程序，可以将一些html插入到页面中（请参阅下面的截图，看看它的外观如何...右上角是插入的HTML）。

我想创建一些功能，当用户点击“立即跳过”文本时，插入的HTML应该会消失或被隐藏。在我目前的代码中，我很难做到这一点。

通过此函数调用Inject.js：

chrome.tabs.executeScript(tab.ib, {
    file: 'inject.js'
});

Inject.js（我不知道如何编写一个新函数来隐藏下面创建的所有元素以及如何从底部的HTML部分调用该函数）：

(function() {


        // Create div
        var div = document.createElement('div');

        // Div styling

            // Positioning
            div.style.position = 'fixed';
            div.style.boxSizing = 'border-box';
            div.style.display = 'block';
            div.style.zIndex = 10000000;
            div.style.top = '20px';
            div.style.right = '20px';

            // Size
            div.style.height = '130px';
            div.style.width = '330px';

            // Padding
            div.style.paddingTop = '20px';
            div.style.paddingBottom = '20px';
            div.style.paddingLeft = '20px';
            div.style.paddingRight = '20px';
            div.style.borderRadius = '25px';

            // Text
            div.style.textAlign = 'center';
            div.style.fontSize = '11px';

            // Color
            div.style.backgroundColor = '#505F69';
            div.style.color = 'white';
            div.style.border = '2px solid grey';


        // HTML
        div.innerHTML += '<u><a href = "http://example.com" style="color:white;font-size:15px;">Click to activate your To a Cause donation.</a></u><br><br>';
        div.innerHTML += '<u><a href="#" style="color:white;">Skip for now</u></a>';

        // Append
        document.body.appendChild(div);


})();

Answer 1

您应该将 skip 按钮创建为HTML节点（就像您为div所做的那样）并将其附加到div。然后你可以这样做：

skipButton.onclick = () => {
    document.body.removeChild(div);
};

如何从Chrome扩展程序中插入的HTML元素调用Javascript函数？

1 个答案: