修改:改成了以对象的形式返回结果、可以通过getInnerStyle选择是否遍历子元素的样式
修改:使用styleSheet对象而不是用request请求获取样式表,因为在selenium中执行脚本,执行请求时会有安全性问题,此时styleSheet内容会与原始样式表有一定差异,但是等价的(浏览器做了格式化)
fix:去掉了一些不必要的Promise,优化部分代码
bugix:判断animation-name的逻辑存在一定问题,做了优化(经过styleSheet格式化后,animation-name一定是animation属性的最后一个值,但原先固定取第一个的逻辑是有问题的)
CSS-Used
Get all css rules used by the selected DOM and its children.
Get it at the Chrome Web Store : CSS Used >>
Overview
Get all css rules used by the selected DOM and its children. Used to extrac only the used CSS. So the unused css will be left out.
If the selected DOM is the body, the result will be all the used css by the whole page curently.
Usage
F12 open the Developer Tools, select the dom and active the "CSS Used" pannel. The used CSS rules of the Selected dom and its children's will be listed in the right textare.
You can click "Preview" to see the selected part with clean style rules.
FAQ
-
Permission to read my browsing history
See https://github.com/painty/CSS-Used-ChromeExt/wiki/Permission-to-read-my-browsing-history%3F
-
Local preview not right
As for the CSS rule like
.wrap p{...}
, if only<p>
is selected, the result.wrap p{...}
may not apply directly to<p>
. Either changing this rule's selector top{...}
or giving the<p>
a.wrap
parent in the final HTML. -
Not all the CSS is got
The result is generated based on the CURRENT HTML DOM. If a div doesn't exist in the document unless a specific user interaction, the result may miss out the style rules for the newly born div.
-
Always says to fresh the page
First check whether it's Chrome Web Store pages, which is
https://chrome.google.com/webstore/....
, which won't allow content script injection. If it's a normal webpage , please create an issue.
Changelog
Go to releases
For older version infomation: Go to the Changelog page
Dev
npm install
to install all the dependenciesnpm run build
gernerate/dest/asset/js/content.js
. Drag thedest
folder tochrome://extensions/
, remember to turn on the dev mode on the top right of the page.npm test
will start a localhttp://localhost:1234
server. Visiting the test page and check the console.