Search code examples
htmlcssgoogle-chromedeveloper-tools

Additional CSS appearing in Chrome Developer Tools?


Every website I open in Chrome, including ones I've written myself, have the following bit of HTML/CSS at their base when viewed in Developer Tools.

<style>
.tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;
     border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}
.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}
.ws_toolbar {z-index:100000} .ws_toolbar 
.ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px}   
.tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} 
.ws_toolbar img {padding:2px;margin:0px}
</style>

Here's a screenshot:

enter image description here

This code is not visible if you View Source. Where is it coming from?


Solution

  • This is the style sheet info for the overlay buttons in the Chrome Extension "Webpage Screenshot".

    If you disable it, you'll see this go away. It's the toolbar popup style information for selecting a region where you can snip, draw on, and save directly on top of the page via a browser rendered overlay.