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

【问题标题】：How to call Javascript function from an inserted HTML element in a Chrome extension?如何从 Chrome 扩展中插入的 HTML 元素调用 Javascript 函数？
【发布时间】：2018-02-07 02:36:25
【问题描述】：

我创建了一个 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);


})();

【问题讨论】：

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

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

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

【讨论】：