Chrome 开发者工具中出现了额外的 CSS？

Question

当我在开发者工具中查看时，我在 Chrome 中打开的每个网站，包括我自己编写的网站，在其基础上都有以下 HTML/CSS。

<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>

截图如下：

如果您查看源代码，则此代码不可见。它来自哪里？

Answer 1

这是 Chrome 扩展“网页截图”中覆盖按钮的样式表信息。

如果禁用它，您会看到它消失。它是用于选择区域的工具栏弹出样式信息，您可以在该区域上通过浏览器呈现的叠加层直接在页面顶部进行剪切、绘制和保存。

Answer 2

这可能是一个 chrome 扩展。

要确认，请禁用 chrome://extensions 中的所有 chrome 扩展程序（您必须复制/粘贴或在 url 栏中输入）。

Answer 3

最有可能的罪魁祸首是您安装了一个扩展。

允许扩展（具有正确权限）修改您访问的每个页面并对 DOM 进行任意更改，包括注入 CSS。

使用隐身模式和/或禁用您的扩展程序来验证这一点。