https://github.com/zswang/selector-helper
A CSS selector preview tool.
https://github.com/zswang/selector-helper
css selector tool
Last synced: about 1 year ago
JSON representation
A CSS selector preview tool.
- Host: GitHub
- URL: https://github.com/zswang/selector-helper
- Owner: zswang
- Created: 2017-03-16T05:48:51.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-30T08:29:37.000Z (about 9 years ago)
- Last Synced: 2025-04-11T04:14:42.221Z (about 1 year ago)
- Topics: css, selector, tool
- Language: JavaScript
- Size: 20.5 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Selector Helper
## Usage
### Injection
```js
javascript:with(document)0[body.appendChild(createElement('script')).src='//raw.githubusercontent.com/zswang/selector-helper/master/injection.js?'+Math.random()]
```
### Inline
```js
javascript:void function()%7Bfunction%20e(e)%7Bif(!%2F%5B%7B%7D%5D%2F.test(e))%7Bvar%20t%3Dr.innerHTML.replace(%22%7B%7Binput%7D%7D%22%2Ce)%2Cn%3Do.firstChild%3Bn%3Fn.nodeValue%3Dt%3A(n%3Ddocument.createTextNode(t)%2Co.appendChild(n))%7D%7Dvar%20t%3Ddocument.querySelector(%22%23selector_helper%22)%3Bif(t)return%20t.style.display%3D%22%22%2Cvoid(t.onshow%26%26t.onshow())%3Bt%3Ddocument.createElement(%22div%22)%2Ct.id%3D%22selector_helper%22%2Ct.innerHTML%3D'%20%20%20%20%3Cstyle%3E%3C%2Fstyle%3E%5Cn%20%20%20%20%3Cstyle%3E%23selector_helper%7Bposition%3Afixed%3Bwidth%3A300px%3Bborder%3Agray%20solid%201px%3Bborder-radius%3A3px%3Bleft%3A100px%3Btop%3A30px%3Bz-index%3A2012122324%7D%23selector_helper%20a%2C%23selector_helper%20button%2C%23selector_helper%20input%2C%23selector_helper%20label%2C%23selector_helper%20li%2C%23selector_helper%20p%2C%23selector_helper%20select%2C%23selector_helper%20textarea%2C%23selector_helper%20ul%7Bmargin%3A0%3Bpadding%3A0%3Bbox-sizing%3Aborder-box%3Bfont%3A18px%2F1.125%20Arial%2CHelvetica%2Csans-serif%7D%23selector_helper%20.panel_header%7Bheight%3A24px%3Bline-height%3A24px%3Bposition%3Arelative%3Bbackground%3A%2324292e%3Bcolor%3A%23fff%3Bpadding%3A2px%205px%3B-webkit-user-select%3Anone%3B-moz-user-select%3Anone%3B-ms-user-select%3Anone%3Buser-select%3Anone%3Bcursor%3Amove%7D%23selector_helper%20.panel_header%20.image_logo%7Bfloat%3Aleft%3Bcursor%3Apointer%3Bcolor%3A%23fff%3Btext-decoration%3Anone%7D%23selector_helper%20.panel_header%20.label_title%7Bfloat%3Aleft%3Bmargin-left%3A5px%7D%23selector_helper%20.panel_header%20.btn_close%7Bfloat%3Aright%3Bcursor%3Apointer%7D%23selector_helper%20.list_drop_down%7Bleft%3A30px%3Bfont-size%3A18px%3Bposition%3Aabsolute%3Bpadding%3A5px%3Bborder%3Agray%20solid%201px%3Blist-style%3Anone%3Bmargin%3A-5px%200%200%200%3Bbackground%3A%23fff%3Bdisplay%3Anone%7D%23selector_helper%20.list_drop_down%20em%7Bcolor%3Ared%7D%23selector_helper%20.list_drop_down%20.selected%7Bbackground%3A%2300f%3Bcolor%3A%23fff%7D%23selector_helper%20.panel_content%7Bbackground%3A%23fff%3Bpadding%3A5px%7D%23selector_helper%20.panel_content%20.text_query%7Bwidth%3A100%25%3Bfont-size%3A18px%7D%23selector_helper%2C%23selector_helper%20*%7Boutline%3A0%3Banimation%3Anone%7D%40keyframes%20selector_helper_flash%7Bfrom%7Boutline-color%3A%231e90ff%3Boutline-offset%3A-3px%7Dto%7Boutline-color%3Ared%3Boutline-offset%3A0%7D%7D%3C%2Fstyle%3E%5Cn%20%20%20%20%3Cstyle%20type%3D%22text%2Ftemplate%22%3E%5Cn%20%20%20%20%20%20%7B%7Binput%7D%7D%20%7B%5Cn%20%20%20%20%20%20%20%20outline%3A%20dodgerblue%20dashed%202px%3B%5Cn%20%20%20%20%20%20%20%20animation%3A%20selector_helper_flash%202s%20infinite%20ease-in-out%3B%5Cn%20%20%20%20%20%20%20%20-webkit-animation%3A%20selector_helper_flash%202s%20infinite%20ease-in-out%3B%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%3C%2Fstyle%3E%5Cn%20%20%20%20%3Cdiv%20class%3D%22panel_header%22%3E%5Cn%20%20%20%20%20%20%3Ca%20href%3D%22https%3A%2F%2Fweibo.com%2Fzswang%22%20target%3D%22_blank%22%20class%3D%22image_logo%22%3Ez%3C%2Fa%3E%5Cn%20%20%20%20%20%20%3Cspan%20class%3D%22label_title%22%3ESelector%20Helper%3C%2Fspan%3E%5Cn%20%20%20%20%20%20%3Cspan%20class%3D%22btn_close%22%3E%C3%97%3C%2Fspan%3E%5Cn%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20%3Cdiv%20class%3D%22panel_content%22%3E%5Cn%20%20%20%20%20%20%3Cinput%20class%3D%22text_query%22%3E%5Cn%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20%3Cul%20class%3D%22list_drop_down%22%3E%5Cn%20%20%20%20%20%20%5Cn%20%20%20%20%3C%2Ful%3E'%2Cdocument.body.appendChild(t)%3Bvar%20n%3Dt.querySelector(%22.panel_content%20.text_query%22)%3Bt.onshow%3Dfunction()%7Bn%26%26(n.focus()%2Ce(n.value))%7D%3Bvar%20l%3Dfunction()%7Bvar%20e%3D%7B%7D%2Cn%3D%5B%5D.slice.apply(t.querySelectorAll(%22*%22))%3Breturn%20n.push(t)%2C%22%3Alink%3Avisited%3Aactive%3Ahover%3Afocus%3Afirst-letter%3Afirst-line%3Afirst-child%3Abefore%3Aafte%3Alang%3Afirst-of-type%3Alast-of-type%3Aonly-of-type%3Aonly-child%3Anth-child%3Anth-last-child%3Anth-of-type%3Anth-last-of-type%3Alast-child%3Aroot%3Aempty%3Atarget%3Aenabled%3Adisabled%3Achecked%3Anot%3A%3Aselection%22.replace(%2F%3A%2B%5B%5Cw%5C-%5D%2B%2Fg%2Cfunction(t)%7Be%5Bt%5D%3D!0%7D)%2C%5B%5D.slice.apply(document.querySelectorAll(%22*%22)).forEach(function(t)%7Bif(!(n.indexOf(t)%3E%3D0))%7Bvar%20l%3Dt.tagName.toLowerCase()%3B%5B%22style%22%2C%22script%22%2C%22link%22%2C%22meta%22%2C%22head%22%2C%22title%22%5D.indexOf(l)%3E%3D0%7C%7C(e%5Bl%5D%3D!0%2C%5B%5D.slice.apply(t.classList).forEach(function(t)%7Be%5B%22.%22%2Bt%5D%3D!0%7D)%2Ct.id%26%26(e%5B%22%23%22%2Bt.id%5D%3D!0))%7D%7D)%2CObject.keys(e).sort()%7D()%2Co%3Dt.querySelector(%22style%22)%3Bif(o)%7Bvar%20r%3Dt.querySelector('style%5Btype%3D%22text%2Ftemplate%22%5D')%3Bif(r)%7Bvar%20i%3Dt.querySelector(%22.panel_header%22)%3Bif(i)%7Bvar%20s%2Ca%3Bi.addEventListener(%22mousedown%22%2Cfunction(e)%7Bfunction%20n(e)%7Bt.style.left%3DMath.max(0%2CMath.min(document.documentElement.clientWidth-t.clientWidth%2Cs%5B0%5D%2B(e.screenX-a%5B0%5D)))%2B%22px%22%2Ct.style.top%3DMath.max(0%2CMath.min(document.documentElement.clientHeight-t.clientHeight%2Cs%5B1%5D%2B(e.screenY-a%5B1%5D)))%2B%22px%22%7Dfunction%20l(e)%7Bdocument.removeEventListener(%22mousemove%22%2Cn)%2Cdocument.removeEventListener(%22mouseup%22%2Cl)%7Dvar%20o%3DgetComputedStyle(t%2C!0)%3Bs%3D%5BparseFloat(o.left)%2CparseFloat(o.top)%5D%2Ca%3D%5Be.screenX%2Ce.screenY%5D%2Cdocument.addEventListener(%22mousemove%22%2Cn)%2Cdocument.addEventListener(%22mouseup%22%2Cl)%7D)%7Dvar%20c%3Dt.querySelector(%22.panel_header%20.btn_close%22)%3Bif(c%26%26c.addEventListener(%22click%22%2Cfunction()%7Bt.style.display%3D%22none%22%2Cn%26%26e(%22%22)%7D)%2Cn)%7Bvar%20d%3Ddocument.querySelector(%22.list_drop_down%22)%2Cp%3D%5B%5D%2Cu%3D0%3Bn.addEventListener(%22input%22%2Cfunction(t)%7Be(n.value)%3Bvar%20o%3Dn.value.slice(0%2Cn.selectionEnd)%2Cr%3D%22%22%3Bp%3D%5B%5D%2Cu%3D0%2Co.replace(%2F(%3A%3A%3F%7C%23%7C%5C.)%3F(%5B%5Cw%5C-%5D*)%24%2F%2Cfunction(e%2Ct%2Cn)%7BRegExp%5B%22%24%60%22%5D%3Bif(n%7C%7Ct)%7Bif(n%3Dn.toLowerCase()%2Cp%3Dl.filter(function(e)%7Breturn%20e.toLowerCase().indexOf(n)%3E%3D0%7D).sort(function(e%2Cl)%7Bif(!t)return%20e.indexOf(n)-l.indexOf(n)%3Bvar%20o%3D(e.match(%2F%5E(%3A%3A%3F%7C%23%7C%5C.)%2F)%7C%7C%5B%22%22%5D)%5B0%5D%2Cr%3D(l.match(%2F%5E(%3A%3A%3F%7C%23%7C%5C.)%2F)%7C%7C%5B%22%22%5D)%5B0%5D%3Bif(o!%3D%3Dr)%7Bif(o%3D%3D%3Dt)return-1%3Bif(r%3D%3D%3Dt)return%201%7Dreturn%20e.indexOf(n)-l.indexOf(n)%7D).slice(0%2C10)%2C1%3D%3D%3Dp.length%26%26p%5B0%5D%3D%3D%3De)return%20void(p%3D%5B%5D)%3Br%3Dp.map(function(e%2Ct)%7Breturn%22%3Cli%22%2B(0%3D%3D%3Dt%3F'%20class%3D%22selected%22'%3A%22%22)%2B'%20style%3D%22outline%3Anone%3B-webkit-animation%3Anone%3Banimation%3Anone%22%3E'%2Be.replace(new%20RegExp(n%2C%22gi%22)%2C%22%3Cem%3E%24%26%3C%2Fem%3E%22)%2B%22%3C%2Fli%3E%22%7D).join(%22%5Cn%22)%7D%7D)%2Cp.length%3C%3D0%3Fd.style.display%3D%22%22%3Ad.style.display%3D%22block%22%2Cd.innerHTML%3Dr%7D)%2Cn.addEventListener(%22keydown%22%2Cfunction(t)%7Bfunction%20l(e)%7Bif(!(p.length%3C%3D0))%7Bvar%20t%3DMath.min(Math.max(0%2Cu%2Be)%2Cp.length-1)%3Bif(t!%3D%3Du)%7Bu%3Dt%3Bvar%20n%3Dd.querySelector(%22li.selected%22)%3Bn%26%26n.classList.remove(%22selected%22)%3Bvar%20l%3Dd.querySelector(%22li%3Anth-of-type(%22%2B(u%2B1)%2B%22)%22)%3Bl%26%26l.classList.add(%22selected%22)%7D%7D%7Dswitch(t.keyCode)%7Bcase%2038%3Al(-1)%3Bbreak%3Bcase%2040%3Al(1)%3Bbreak%3Bcase%209%3Acase%2013%3A!function()%7Bif(!(p.length%3C%3D0))%7Bvar%20t%3Dn.value.slice(0%2Cn.selectionEnd)%2Cl%3Dn.value.slice(n.selectionEnd)%2Co%3Dt.replace(%2F(%3A%3A%3F%7C%23%7C%5C.)%3F(%5B%5Cw%5C-%5D*)%24%2F%2Cp%5Bu%5D)%3Bn.value%3Do%2Bl%2Cn.selectionEnd%3Dn.value.length-l.length%2Cd.style.display%3D%22%22%2Ce(n.value)%7D%7D()%3Bbreak%3Bcase%2027%3Ad.style.display%3D%22%22%3Bbreak%3Bdefault%3Areturn%7Dt.preventDefault()%7D)%7D%7D%7D%7D()%3B
```