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 扩展。

要确认，请在 chrome://extensions 中禁用所有 chrome 扩展程序（您必须 copy/paste 或在 url 栏中输入） .

Answer 2

最有可能的罪魁祸首是您安装的扩展程序。

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

使用隐身模式and/or 禁用您的扩展来验证这一点。

Answer 3

这是 Chrome 扩展 "Webpage Screenshot" 中叠加按钮的样式 sheet 信息。

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

Chrome 开发人员工具中出现了其他 CSS？

Additional CSS appearing in Chrome Developer Tools?

html

css

google-chrome

developer-tools