Chrome开发者工具中还会显示其他CSS吗？

Question

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:

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

Answer 1

It's probably a chrome extension.

To confirm, disable all of your chrome extensions in chrome://extensions (you will have to copy/paste or type this into the url bar).

Answer 2

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.

Answer 3

The most likely culprit is an extension that you have installed.

Extensions (with the correct permissions) are allowed to modify every page you visit and make arbitrary changes to the DOM, including injecting CSS.

Use Incognito mode and/or disable your extensions to verify this.