javascript - 隐藏/显示 chrome 扩展的滚动条

Question

我正在尝试通过我的 Chrome 扩展隐藏\显示页面上的滚动条。

我通过从 background.js 文件插入这个 CSS 来隐藏它:

::-webkit-scrollbar {
    display: none !important;
}

::-webkit-scrollbar-button {
    display: none !important;
}

然后我尝试通过从 background.js 文件中插入此 CSS 来再次显示它:

::-webkit-scrollbar {
    display: block !important;
}

::-webkit-scrollbar-button {
    display: block !important;
}

隐藏有效，但之后我无法恢复它。当我通过 Chrome DevTools 检查页面时，它显示好像两个插入的 CSS 同时处于事件状态。

还有其他方法吗？需要注意的重要一点是，这应该适用于任何页面，因此我能够从插入 CSS 的任何页面删除和恢复滚动条。

我对任何其他方式都持开放态度，JavaScript 也是。

Answer 1

我通过内容脚本实现了这一点。此代码删除了滚动条，但仍允许您使用鼠标滚轮或键盘按钮进行滚动:

    var styleElement = document.createElement('style');
    styleElement.id = 'remove-scroll-style';
    styleElement.textContent =
        'html::-webkit-scrollbar{display:none !important}' +
        'body::-webkit-scrollbar{display:none !important}';
    document.getElementsByTagName('body')[0].appendChild(styleElement);

这段代码恢复了滚动条:

$('#remove-scroll-style').remove();