title: Hide/show scrollbar from chrome extension
body: <p>I'm trying to hide\show scrollbars on pages via my Chrome Extension.</p>
  
  <p>I hide it by inserting this CSS from background.js file:</p>
  
  <pre><code>::-webkit-scrollbar {
      display: none !important;
  }
  
  ::-webkit-scrollbar-button {
      display: none !important;
  }
  </code></pre>
  
  <p>and I try to show it again by inserting this CSS from background.js file:</p>
  
  <pre><code>::-webkit-scrollbar {
      display: block !important;
  }
  
  ::-webkit-scrollbar-button {
      display: block !important;
  }
  </code></pre>
  
  <p>Hiding works, but I'm unable to restore it afterwards. When I inspect the page through Chrome DevTools, it shows as if both of the inserted CSS are active at same time.</p>
  
  <p>Is there any other way to do this?
  Important thing to note is that this should work on any page, so I'm able to remove and restore scrollbars from any page CSS is inserted to.</p>
  
  <p>I'm open for any other way, JavaScript too.</p>