如何实现Greasemonkey脚本按钮二次点击隐藏内容

我写了一个Greasemonkey脚本，点击按钮会显示表格，但想实现第二次点击按钮时隐藏这个表格，不知道怎么弄。

以下是我的原始代码：

// ==UserScript==
// @name        _TEST
// @description Adds live example button, with styling.
// @include  https://www.google.com/*
// @grant       GM_addStyle
// ==/UserScript==


var zNode       = document.createElement ('div');
zNode.innerHTML = '<button id="myButton" type="button">'
                + 'Show DE MIDs</button>'
                ;
zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);

/* --- activate button */
document.getElementById ("myButton").addEventListener (
    "click", ButtonClickAction, false
);



function ButtonClickAction (zEvent) {
    /*--- add text when clicked */
    var zNode       = document.createElement ('p');
    zNode.innerHTML =  `
    <div id="gmSomeID">
<p> IDs added by Greasemonkey</p>
        <table>
  <tr>
    <th>Country</th>
    <th>ID</th>
  
  </tr>
  <tr>
    <td>DE</td>
    <td>123456</td>
 
  </tr>
  <tr>
    <td>IT</td>
    <td>XXXXXX</td>
  </tr>
  </tr>
</table> 
    </div>
`;
    document.getElementById ("myContainer").appendChild (zNode);
}

//--- Style our newly added elements using CSS.
GM_addStyle ( `
    #myContainer {
        position:               absolute;
        top:                    0;
        left:                   10;
        font-size:              200px;
        background:             orange;
        border:                 3px outset black;
        margin:                 5px;
        opacity:                0.9;
        z-index:                1100;
        padding:                5px 20px;
    }
    #myButton {
        cursor:                 pointer;
    }
    #myContainer p {
        color:                  red;
        background:             white;
    }
` );

我尝试添加HideRanks函数修改，但没有效果，修改后的代码如下：

// ==UserScript==
// @name        _TEST
// @description Adds live example button, with styling.
// @include  https://www.google.com/*
// @grant       GM_addStyle
// ==/UserScript==


var zNode       = document.createElement ('div');
zNode.innerHTML = '<button id="myButton" type="button">'
                + 'Show DE MIDs</button>'
                ;
zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);

/* --- activate button */
document.getElementById ("myButton").addEventListener (
    "click", ButtonClickAction, false
);


function HideRanks (zEvent) {
    document.getElementById("UserList").classList.toggle('ButtonClickAction');
}
function ButtonClickAction (zEvent) {
    /*--- add text when clicked */
    var zNode       = document.createElement ('p');
    zNode.innerHTML =  `
    <div id="gmSomeID" onclick="HideRanks()">
<p> IDs added by Greasemonkey</p>
        <table>
  <tr>
    <th>Country</th>
    <th>ID</th>
  
  </tr>
  <tr>
    <td>DE</td>
    <td>123456</td>
 
  </tr>
  <tr>
    <td>IT</td>
    <td>XXXXXX</td>
  </tr>
  </tr>
</table> 
    </div>
`;
    document.getElementById ("myContainer").appendChild (zNode);
}

//--- Style our newly added elements using CSS.
GM_addStyle ( `
    #myContainer {
        position:               absolute;
        top:                    0;
        left:                   10;
        font-size:              200px;
        background:             orange;
        border:                 3px outset black;
        margin:                 5px;
        opacity:                0.9;
        z-index:                1100;
        padding:                5px 20px;
    }
    #myButton {
        cursor:                 pointer;
    }
    #myContainer p {
        color:                  red;
        background:             white;
    }
` );

你的问题出在几个核心点：

1. 原始代码每次点击都会新增一个表格元素，而非切换已有表格的显示状态；
2. 修改的HideRanks函数引用了不存在的UserList元素，且Greasemonkey沙箱环境下，HTML内联事件无法直接调用脚本内的函数；
3. 没有跟踪表格的显示状态，也未复用已创建的元素。

下面是修正后的完整代码，核心逻辑是只创建一次表格，通过切换CSS属性控制显示/隐藏：

// ==UserScript==
// @name        _TEST
// @description Adds live example button, with styling.
// @include     https://www.google.com/*
// @grant       GM_addStyle
// ==/UserScript==

// 创建容器和按钮
var container = document.createElement('div');
container.setAttribute('id', 'myContainer');
container.innerHTML = '<button id="myButton" type="button">Show DE MIDs</button>';
document.body.appendChild(container);

// 提前创建表格容器，初始设为隐藏
var tableWrapper = document.createElement('div');
tableWrapper.setAttribute('id', 'gmSomeID');
tableWrapper.style.display = 'none';
tableWrapper.innerHTML = `
    <p> IDs added by Greasemonkey</p>
    <table>
        <tr>
            <th>Country</th>
            <th>ID</th>
        </tr>
        <tr>
            <td>DE</td>
            <td>123456</td>
        </tr>
        <tr>
            <td>IT</td>
            <td>XXXXXX</td>
        </tr>
    </table>
`;
container.appendChild(tableWrapper);

// 按钮点击事件：切换显示状态+按钮文字
document.getElementById('myButton').addEventListener('click', function() {
    var isHidden = tableWrapper.style.display === 'none';
    // 切换表格显示/隐藏
    tableWrapper.style.display = isHidden ? 'block' : 'none';
    // 同步切换按钮文字
    this.textContent = isHidden ? 'Hide DE MIDs' : 'Show DE MIDs';
}, false);

// 样式优化（修正原代码字体过大问题）
GM_addStyle(`
    #myContainer {
        position: absolute;
        top: 0;
        left: 10px;
        font-size: 20px;
        background: orange;
        border: 3px outset black;
        margin: 5px;
        opacity: 0.9;
        z-index: 1100;
        padding: 5px 20px;
    }
    #myButton {
        cursor: pointer;
    }
    #gmSomeID p {
        color: red;
        background: white;
    }
`);

关键修改说明： #

• 提前创建表格：脚本初始化时就生成表格容器，避免重复创建DOM元素；
• 控制显示状态：通过display属性切换block（显示）和none（隐藏）；
• 优化交互体验：按钮文字随状态切换，清晰告知用户当前操作；
• 规避沙箱限制：直接通过脚本内的事件监听处理逻辑，不用HTML内联事件；
• 修复样式问题：将原代码中过大的font-size:200px调整为合理的20px。

内容的提问来源于stack exchange，提问作者Vanassins