diff --git a/README.md b/README.md
new file mode 100644
index 0000000..410d7cd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,50 @@
+# Sketch-Measure-Compare
+
+A tool for easy comparison of UI and web pages
+
+## Guide
+
+### Step1: Installation
+#### Method 1: Using CDN in HTML (Recommend)
+```js
+const script = document.createElement('script');
+script.onload = () => {
+    // sketchMeasureCompare.init();
+    // or init with options
+    sketchMeasureCompare.init({
+      zIndex: 10000,
+      width: 0,
+      enableDomRulers: false,
+      enableTextReplace: false,
+      offsetX: 0,
+      offsetY: 0
+    });
+};
+script.src = "https://unpkg.com/sketch-measure-compare@latest/index.min.js";
+document.head.appendChild(script);
+```
+
+Available CDN:
+
+- https://unpkg.com/sketch-measure-compare@latest/index.min.js
+- https://cdn.jsdelivr.net/gh/Neco86/Sketch-Measure-Compare@latest/index.min.js
+
+Backup:
+
+- https://neco86.github.io/Sketch-Measure-Compare/index.min.js
+
+#### Method 2: Using Chrome Extension
+Download and unzip: https://github.com/Neco86/Sketch-Measure-Compare/archive/refs/heads/extension.zip
+
+[Load the unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked)
+
+
+### Step2: Click the UI button to switch page
+
+### Step3: Choose files
+
+Click `upload` button to upload local sketch measure folder;
+
+### Step4: Compare UI and your website page
+
+![demo](https://raw.githubusercontent.com/Neco86/Sketch-Measure-Compare/main/demo.png)
diff --git a/img/icon.png b/img/icon.png
new file mode 100644
index 0000000..3fe3c42
Binary files /dev/null and b/img/icon.png differ
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 0000000..c4fb0b0
--- /dev/null
+++ b/index.d.ts
@@ -0,0 +1,36 @@
+interface Config {
+    /**
+     * 页面层级
+     */
+    zIndex?: number;
+    /**
+     * 页面测量尺
+     */
+    enableDomRulers?: Boolean;
+    /**
+     * 右键文本替换
+     */
+    enableTextReplace?: Boolean;
+    /**
+     * 水平方向折叠
+     */
+    offsetX?: number;
+    /**
+     * 垂直方向折叠
+     */
+    offsetY?: number;
+    /**
+     * 窗口大小
+     */
+    width?: number;
+    enableBlockClose?: boolean;
+}
+
+interface SketchMeasureCompare {
+    init: (config?: Config) => void;
+}
+
+declare module 'sketch-measure-compare' {
+    const sketchMeasureCompare: SketchMeasureCompare;
+    export = sketchMeasureCompare;
+}
\ No newline at end of file
diff --git a/index.min.js b/index.min.js
new file mode 100644
index 0000000..fc5501a
--- /dev/null
+++ b/index.min.js
@@ -0,0 +1 @@
+(()=>{"use strict";var e={539:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,a,l){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(o)for(var r=0;r<this.length;r++){var c=this[r][0];null!=c&&(i[c]=!0)}for(var d=0;d<e.length;d++){var s=[].concat(e[d]);o&&i[s[0]]||(void 0!==l&&(void 0===s[5]||(s[1]="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {").concat(s[1],"}")),s[5]=l),n&&(s[2]?(s[1]="@media ".concat(s[2]," {").concat(s[1],"}"),s[2]=n):s[2]=n),a&&(s[4]?(s[1]="@supports (".concat(s[4],") {").concat(s[1],"}"),s[4]=a):s[4]="".concat(a)),t.push(s))}},t}},725:e=>{e.exports=function(e){return e[1]}},693:(e,t,n)=>{n.d(t,{Z:()=>r});var o=n(725),a=n.n(o),l=n(539),i=n.n(l)()(a());i.push([e.id,"html,body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;background-color:#fff;display:flex;align-items:center;justify-content:center}#iframe{width:100vw;height:100vh;border:0;display:none}",""]);const r=URL.createObjectURL(new Blob([i],{type:"text/css"}))}},t={};function n(o){var a=t[o];if(void 0!==a)return a.exports;var l=t[o]={id:o,exports:{}};return e[o](l,l.exports,n),l.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var o={};(()=>{n.d(o,{default:()=>y});const e=URL.createObjectURL(new Blob(["("+function(){!function e(t){if(t.isInitSketchMeasureRulersDoc)return;t.isInitSketchMeasureRulersDoc=!0;var n=function(){!function(e){Array.from(e.querySelectorAll("*")).filter((function(e){return!["SCRIPT","STYLE","TITLE","HTML","HEAD","META","BODY","NOSCRIPT"].includes(e.nodeName)})).forEach((function(e){e.isInitSketchMeasureRulersNode||(e.isInitSketchMeasureRulersNode=!0,e.addEventListener("mouseenter",(function(){window.top.sketchMeasureCompare.hover=e,window.top.sketchMeasureCompare.config.enableDomRulers&&window.parent.postMessage({msg:"updateRulers",payload:e.getBoundingClientRect()},"*")})),e.addEventListener("mouseleave",(function(){window.top.sketchMeasureCompare.hover=null,window.top.sketchMeasureCompare.config.enableDomRulers&&window.parent.postMessage({msg:"updateRulers",payload:{width:0,height:0,top:0,left:0}},"*")})))}))}(t),document.querySelectorAll("iframe").forEach((function(t){t.contentDocument&&e(t.contentDocument)}))};n(),new MutationObserver(n).observe(t.documentElement,{attributes:!0,childList:!0,subtree:!0})}(document)}.toString()+")()"],{type:"text/javascript"})),t=URL.createObjectURL(new Blob(["("+function(){var e,t,n,o,a,l,i,r,c,d,s,p,u,h,m,f,v,b,y,g=function(e,t){Object.keys(t).forEach((function(n){e.style[n]=t[n]}))},w=function(){var e=window.top.sketchMeasureCompare.config.offsetY;g(i,{top:"".concat(e,"px"),height:"calc(100% - ".concat(e,"px)")})},x=function(){var e=window.top.sketchMeasureCompare.config.offsetX;g(i,{left:"".concat(e,"px"),width:"calc(100% - ".concat(e,"px)")})},k=function(){b=window.top.sketchMeasureCompare.config.enableBlockClose,window.top.sketchMeasureCompare.config.enableBlockClose=!1},C=function(){window.top.sketchMeasureCompare.config.enableBlockClose=b},M=function(e){var t=o.cloneNode(!0);return t.appendChild(t.childNodes[0].cloneNode(!0)),t.appendChild(t.childNodes[1].cloneNode(!0)),g(t.childNodes[0],{border:"none",borderLeft:"1px dashed ".concat(e),width:"0px"}),g(t.childNodes[1],{border:"none",borderTop:"1px dashed ".concat(e),height:"0px"}),g(t.childNodes[2],{border:"none",borderRight:"1px dashed ".concat(e),width:"0px"}),g(t.childNodes[3],{border:"none",borderBottom:"1px dashed ".concat(e),height:"0px"}),t},N=function(){var e,t,l=n.style,r=l.width,c=l.height,b=l.marginTop;r!==v.style.width&&(k(),i.src="",i.src=f.value,C()),g(v,{width:r,height:c,marginTop:b,marginLeft:a.checked?0:"".concat(parseFloat(r)/2+10,"px"),opacity:a.checked?.5:1}),v.className=n.className,g(f,{width:r,marginTop:"-".concat(parseFloat(c)/2+20+10,"px"),marginLeft:a.checked?0:"".concat(parseFloat(r)/2+10,"px")}),f.className=n.className,g(d,o.style),g(d.childNodes[0],{left:o.childNodes[0].style.left}),g(d.childNodes[1],{top:o.childNodes[1].style.top}),g(d.childNodes[2],{left:"".concat(parseFloat(o.childNodes[0].style.left)+parseFloat(o.childNodes[0].style.width),"px")}),g(d.childNodes[3],{top:"".concat(parseFloat(o.childNodes[1].style.top)+parseFloat(o.childNodes[1].style.height),"px")});var y=null===(e=document.getElementsByClassName("selected"))||void 0===e||null===(t=e[0])||void 0===t?void 0:t.style;y&&(g(s,{display:""}),g(s.childNodes[0],{left:y.left}),g(s.childNodes[1],{top:y.top}),g(s.childNodes[2],{left:"".concat(parseFloat(y.left)+parseFloat(y.width),"px")}),g(s.childNodes[3],{top:"".concat(parseFloat(y.top)+parseFloat(y.height),"px")})),a.checked&&(g(o,{display:"none"}),g(d,{display:"none"}),g(s,{display:"none"}),g(p,{display:"none"}),g(m,{display:"none"}),g(u,{display:"none"}),g(h,{display:"none"}),inspector.className=inspector.className.replace("active",""))},R=function(){var b,R,E,L,T,S;e||(t=null===(T=document.getElementsByClassName("screen-viewer-inner"))||void 0===T?void 0:T[0],n=document.getElementById("screen"),o=document.getElementById("rulers"),a=document.getElementById("flow-mode"),l=null===(S=document.getElementsByClassName("header-center"))||void 0===S?void 0:S[0],t&&n&&o&&a&&l&&(e=!0,window.top.onbeforeunload=function(){return!1},(L=document.createElement("style")).innerHTML="\n        .layer {\n            z-index: 1;\n        }\n        .color-bg {\n            position: relative;\n            background-color: #fff;\n            background-image: linear-gradient(45deg, #dddadc 25%, transparent 25%, transparent 75%, #dddadc 75%, #dddadc), linear-gradient(45deg, #dddadc 25%, transparent 25%, transparent 75%, #dddadc 75%, #dddadc);\n            background-size: 12px 12px;\n            background-position: 0 0, 6px 6px;\n            border-radius: 2px;\n            overflow: hidden;\n            width: 24px;\n            height: 24px;\n        }\n        .color-bg span {\n            display: block;\n            width: 24px;\n            height: 24px;\n        }\n        ",document.head.appendChild(L),R=document.createElement("div"),(E=document.createElement("div")).innerHTML="CLEAR UI",g(R,{display:"flex",alignItems:"center",justifyContent:"center",padding:"0 25px 0 10px",whiteSpace:"nowrap"}),g(E,{padding:"5px",border:"1px solid",cursor:"pointer"}),E.onclick=function(){window.parent.postMessage({msg:"CLEAR UI"},"*")},R.appendChild(E),l.appendChild(R),i=document.createElement("iframe"),x(),w(),g(i,{border:"none",position:"absolute"}),i.width="100%",i.height="100%",i.src=window.top.location.href,i.onload=function(){if(x(),w(),i.contentDocument){if(window.top.sketchMeasureCompare.config.enableBlockClose&&(i.contentWindow.onbeforeunload=function(){return!1}),r=window.top.sketchMeasureCompare.config.enableDomRulers){var e=document.createElement("script");e.src=window.top.sketchMeasureCompare.rulers,i.contentDocument.head.appendChild(e)}if(c=window.top.sketchMeasureCompare.config.enableTextReplace){var t=document.createElement("script");t.src=window.top.sketchMeasureCompare.textReplace,i.contentDocument.head.appendChild(t)}}},d=M("#419bf9"),s=M("#ee6723"),p=document.getElementById("ld").cloneNode(!0),m=document.getElementById("td").cloneNode(!0),u=document.getElementById("rd").cloneNode(!0),h=document.getElementById("bd").cloneNode(!0),f=document.createElement("input"),g(f,{border:"none",outline:"none",height:"20px"}),f.placeholder="url",f.value=i.src,f.oninput=function(e){k(),i.src=e.target.value,C()},f.onkeyup=function(e){"Enter"===e.key&&(k(),i.src="",i.src=e.target.value,C())},v=n.cloneNode(!1),g(v,{backgroundImage:"",overflowY:"hidden"}),v.appendChild(i),v.appendChild(d),v.appendChild(s),v.appendChild(p),v.appendChild(m),v.appendChild(u),v.appendChild(h),t.appendChild(f),t.appendChild(v),fetch(window.top.sketchMeasureCompare.inspectorCenterTpl).then((function(e){return e.text()})).then((function(e){y=e})),t.addEventListener("click",(function(){inspector.className=inspector.className.replace("active","")})),b={get:function(e,t){return e[t]},set:function(e,t,n){if(e[t]=n,"offsetX"===t&&x(),"offsetY"===t&&w(),"enableBlockClose"===t&&i.contentDocument&&(i.contentWindow.onbeforeunload=function(){return!n&&void 0}),"enableDomRulers"===t&&!r){k();var o=i.src;i.src="",i.src=o,C()}if("enableTextReplace"===t&&!c){k();var a=i.src;i.src="",i.src=a,C()}}},window.top.sketchMeasureCompare.config=new Proxy(window.top.sketchMeasureCompare.config,b),new MutationObserver(N).observe(n,{attributes:!0,childList:!0,subtree:!0}),N(),window.addEventListener("message",(function(e){var t=e.data;if(t&&t.msg){var n=t.msg,l=t.payload,i=window.top.sketchMeasureCompare.config.offsetY;if("updateRulers"===n&&(g(o,{display:a.checked?"none":""}),g(o.childNodes[0],{left:"".concat(l.left,"px"),width:"".concat(l.width,"px")}),g(o.childNodes[1],{top:"".concat(l.top+i,"px"),height:"".concat(l.height,"px")}),g(d,{display:a.checked?"none":""}),g(d.childNodes[0],{left:"".concat(l.left,"px")}),g(d.childNodes[1],{top:"".concat(l.top+i,"px")}),g(d.childNodes[2],{left:"".concat(l.left+l.width,"px")}),g(d.childNodes[3],{top:"".concat(l.top+l.height+i,"px")}),"none"!==s.style.display)){var r=parseFloat(s.childNodes[0].style.left),c=parseFloat(s.childNodes[1].style.top),f=parseFloat(s.childNodes[2].style.left),v=parseFloat(s.childNodes[3].style.top),b=l.left,y=l.top+i,w=l.left+l.width,x=l.top+l.height+i,k=b||y||w||x;g(p,w<=r?{display:k?"":"none",left:"".concat(w,"px"),top:"".concat(c+(v-c)/2,"px"),width:"".concat(r-w,"px")}:{display:b<f&&k?"":"none",left:"".concat(b<r?b:r,"px"),top:"".concat(c+(v-c)/2,"px"),width:"".concat(Math.abs(b-r),"px")}),p.childNodes[0].dataset.width=p.style.width,g(u,b>=f?{display:k?"":"none",left:"".concat(f,"px"),top:"".concat(c+(v-c)/2,"px"),width:"".concat(b-f,"px")}:{display:w>r&&k?"":"none",left:"".concat(w>f?f:w,"px"),top:"".concat(c+(v-c)/2,"px"),width:"".concat(Math.abs(w-f),"px")}),u.childNodes[0].dataset.width=u.style.width,g(m,x<=c?{display:k?"":"none",left:"".concat(r+(f-r)/2,"px"),top:"".concat(x,"px"),height:"".concat(c-x,"px")}:{display:y<v&&k?"":"none",left:"".concat(r+(f-r)/2,"px"),top:"".concat(y<c?y:c,"px"),height:"".concat(Math.abs(y-c),"px")}),m.childNodes[0].dataset.height=m.style.height,g(h,y>=v?{display:k?"":"none",left:"".concat(r+(f-r)/2,"px"),top:"".concat(v,"px"),height:"".concat(y-v,"px")}:{display:x>c&&k?"":"none",left:"".concat(r+(f-r)/2,"px"),top:"".concat(x>v?v:x,"px"),height:"".concat(Math.abs(x-v),"px")}),h.childNodes[0].dataset.height=h.style.height}}})),window.addEventListener("keyup",(function(e){if("c"===e.key&&!a.checked){var n=window.top.sketchMeasureCompare.hover;t.click(),g(s,{display:""}),g(s.childNodes[0],{left:d.childNodes[0].style.left}),g(s.childNodes[1],{top:d.childNodes[1].style.top}),g(s.childNodes[2],{left:d.childNodes[2].style.left}),g(s.childNodes[3],{top:d.childNodes[3].style.top});var o=function(e){var t=+parseFloat(e).toFixed(2);return"NaN"==="".concat(t)?e:"".concat(t,"px")};if(n&&y&&inspector){inspector.className=inspector.className+" active";var l=getComputedStyle(n),i={width:o(l.width),height:o(l.height),marginTop:o(l.marginTop),marginBottom:o(l.marginBottom),marginRight:o(l.marginRight),marginLeft:o(l.marginLeft),paddingTop:o(l.paddingTop),paddingBottom:o(l.paddingTop),paddingRight:o(l.paddingRight),paddingLeft:o(l.paddingLeft),fontSize:o(l.fontSize),lineHeight:o(l.lineHeight),borderRadius:o(l.borderRadius),borderWidth:o(l.borderWidth),opacity:"".concat(100*+l.opacity,"%"),fontFamily:l.fontFamily.replace(/"/g,""),letterSpacing:l.letterSpacing,textAlign:l.textAlign,fontWeight:l.fontWeight,borderStyle:l.borderStyle,borderColor:l.borderColor,color:l.color,backgroundColor:l.backgroundColor,innerText:n.innerText.trim()};inspectorCenter.innerHTML=y.split(/([a-z]+="\${.*?}")/).map((function(e){if(/([a-z]+="\${.*?}")/.test(e)){var t=e.match(/([a-z]+)="\${(.*?)}"/),n=t[1],o=t[2];if("color"===n)return'style="background-color: '.concat(i[o],';"');if("value"===n)return'value="'.concat(i[o],'"')}return e})).join("").replace("${innerText}",i.innerText)}}})),window.addEventListener("keyup",(function(e){if("r"===e.key&&!a.checked){k();var t=i.src;i.src="",i.src=t,C()}}))))};setTimeout(R,0),setTimeout(R,220),setTimeout(R,500),setTimeout(R,1e3),setTimeout(R,3e3),setTimeout(R,5e3)}.toString()+")()"],{type:"text/javascript"})),a=URL.createObjectURL(new Blob(["("+function(){var e=document.getElementById("uploader"),t=document.getElementById("iframe"),n=document.getElementById("placeholder"),o=[];e.onchange=function(a){var l,i,r,c,d=a.target.files;if(d.length){var s=!!(o=Array.from(d)).find((function(e){return"index.html"===e.name})),p=o.filter((function(e){return/image/.test(e.type)}));if(!s&&!p.length)return e.value="",void alert("WRONG FOLDER!");!s&&p.length&&(window.top.sketchMeasureCompare.tplImgList=p.map((function(e){return{name:e.name.replace(/\.[^\.]+$/g,""),url:"".concat(URL.createObjectURL(e),"#")}})));var u=null!==(l=null===(i=o.find((function(e){return"index.html"===e.name})))||void 0===i||null===(r=i.webkitRelativePath)||void 0===r||null===(c=r.replace)||void 0===c?void 0:c.call(r,"index.html",""))&&void 0!==l?l:"",h=new RegExp("^".concat(u)),m=(o=o.map((function(e){return{name:e.name,path:e.webkitRelativePath.replace(h,""),url:URL.createObjectURL(e)}}))).find((function(e){return"index.html"===e.name}))||{url:window.top.sketchMeasureCompare.tpl};m&&fetch(m.url).then((function(e){return e.text()})).then((function(e){return o.forEach((function(t){var n=t.path.split("/").map(encodeURIComponent).join("/");e=e.replace(n,"".concat(t.url,"#"))})),e=e.replace(/\.\/blob/g,"blob")})).then((function(e){return e=e.replace("</head>",'<script src="'.concat(window.top.sketchMeasureCompare.sketchMeasure,'"><\/script></head>')).replace("meaxure.render(data)","\n                            meaxure.render({\n                                ...data,\n                                artboards: (data.artboards || []).map((t) => {\n                                    const width = window.top.sketchMeasureCompare.config.width || t.width;\n                                    const scale = width / t.width;\n                                    return {\n                                        ...t,\n                                        width,\n                                        height: t.height * scale,\n                                        layers: (t.layers || []).map((l) => ({\n                                            ...l,\n                                            rect: {\n                                                x: l.rect.x * scale,\n                                                y: l.rect.y * scale,\n                                                width: l.rect.width * scale,\n                                                height: l.rect.height * scale,\n                                            },\n                                        })),\n                                    };\n                                }),\n                            });\n                            ")})).then((function(e){var o=new Blob([e],{type:"text/html"}),a=URL.createObjectURL(o);t.src=a,n.style.display="none",t.style.display="block"}))}};var a=function(){var a=window.top.sketchMeasureCompare.config.enableBlockClose;window.top.sketchMeasureCompare.config.enableBlockClose=!1,URL.revokeObjectURL(t.src),o.forEach((function(e){URL.revokeObjectURL(e.url)})),(window.top.sketchMeasureCompare.tplImgList||[]).forEach((function(e){return URL.revokeObjectURL(e.url)})),delete window.top.sketchMeasureCompare.tplImgList,o=[],t.src="",e.value="",n.style.display="block",t.style.display="none",window.top.sketchMeasureCompare.config.enableBlockClose=a};document.addEventListener("beforeunload",a),window.addEventListener("message",(function(e){var t=e.data;t&&t.msg&&("CLEAR UI"===t.msg&&a())}));var l={get:function(e,t){return e[t]},set:function(e,n,o){if(e[n]=o,"width"===n){var a=window.top.sketchMeasureCompare.config.enableBlockClose;window.top.sketchMeasureCompare.config.enableBlockClose=!1;var l=t.src;t.src="",t.src=l,window.top.sketchMeasureCompare.config.enableBlockClose=a}}};window.top.sketchMeasureCompare.config=new Proxy(window.top.sketchMeasureCompare.config,l)}.toString()+")()"],{type:"text/javascript"}));var l=n(693);const i=URL.createObjectURL(new Blob(['<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title>Sketch Measure Compare</title> </head> <body> <div id="placeholder"> <div>Please Choose UI Folder!</div> <br/> <input type="file" webkitdirectory id="uploader"/> </div> <iframe id="iframe"></iframe> <script>(()=>{"use strict";const e=document.createElement("script");e.src=window.top.sketchMeasureCompare.index,document.body.appendChild(e);const t=document.createElement("link");t.rel="stylesheet",t.href=window.top.sketchMeasureCompare.css,document.head.appendChild(t)})()<\/script> </body> </html> '],{type:"text/html"})),r=URL.createObjectURL(new Blob(["("+function(){var e=window.top.sketchMeasureCompare.tplImgList||[];e.length&&Promise.all(e.map((function(e){return new Promise((function(t){var n=document.createElement("img");n.onload=function(){return t({img:n,name:e.name})},n.onerror=function(){return t(null)},n.src=e.url}))}))).then((function(e){var t={resolution:1,unit:"px",colorFormat:"color-hex",artboards:e.filter(Boolean).map((function(e){var t=e.img,n=e.name,o=window.top.sketchMeasureCompare.config.width||t.width,a=o/t.width;return{notes:[],layers:[],name:n,pageName:"",width:o,height:t.height*a,imagePath:t.src,imageIconPath:t.src}}))};meaxure.render(t)}))}.toString()+")()"],{type:"text/javascript"}));const c=URL.createObjectURL(new Blob(['<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title>Spec Export - Sketch MeaXure</title> <script src="https://hubzyy.gitee.io/sketch-meaxure/src/jquery.js"><\/script> <script src="https://hubzyy.gitee.io/sketch-meaxure/src/index.js"><\/script> <link rel="stylesheet" href="https://hubzyy.gitee.io/sketch-meaxure/src/index.css"/> </head> <body id="app"> <script>(()=>{"use strict";const e=document.createElement("script");e.src=window.top.sketchMeasureCompare.tplIndex,document.body.appendChild(e)})()<\/script> </body> </html> '],{type:"text/html"})),d=URL.createObjectURL(new Blob(["("+function(){!function e(t){if(t.isInitSketchMeasureTextPlaceDoc)return;t.isInitSketchMeasureTextPlaceDoc=!0;var n=function(){!function(e){Array.from(e.querySelectorAll("*")).filter((function(e){return!["SCRIPT","STYLE","TITLE","HTML","HEAD","META","BODY","NOSCRIPT"].includes(e.nodeName)&&Array.from(e.childNodes).filter((function(e){return"#text"===e.nodeName||"#comment"===e.nodeName})).length===e.childNodes.length})).forEach((function(e){e.isInitSketchMeasureTextPlaceNode||(e.isInitSketchMeasureTextPlaceNode=!0,e.addEventListener("contextmenu",(function(e){e.preventDefault()})),e.addEventListener("mousedown",(function(e){var t,n,o=null===(t=window)||void 0===t||null===(n=t.parent)||void 0===n?void 0:n.content;2===e.button&&o&&window.top.sketchMeasureCompare.config.enableTextReplace&&(e.preventDefault(),e.target.innerHTML=o.innerHTML.replace(/\s/g,""))})),e.addEventListener("mouseenter",(function(e){e.target.contentEditable=!!window.top.sketchMeasureCompare.config.enableTextReplace})),e.addEventListener("mouseleave",(function(e){e.target.isFocus||(e.target.contentEditable=!1)})),e.addEventListener("focus",(function(e){e.target.isFocus=!0})),e.addEventListener("blur",(function(e){e.target.isFocus=!1,e.target.contentEditable=!1})),e.onclick=function(e){if(window.top.sketchMeasureCompare.config.enableTextReplace)return e.preventDefault(),e.stopPropagation(),!1})}))}(t),document.querySelectorAll("iframe").forEach((function(t){t.contentDocument&&e(t.contentDocument)}))};n(),new MutationObserver(n).observe(t.documentElement,{attributes:!0,childList:!0,subtree:!0})}(document)}.toString()+")()"],{type:"text/javascript"}));const s=URL.createObjectURL(new Blob(['<h2>DOM</h2> <section> <h3>属性</h3> <div class="context"> <div class="item" data-label="大小:"> <label data-label="宽度"> <input type="text" value="${width}" readonly="readonly"/> </label> <label data-label="高度"> <input type="text" value="${height}" readonly="readonly"/> </label> </div> <div class="item" data-label="内边距:"> <label data-label="上"> <input type="text" value="${paddingTop}" readonly="readonly"/> </label> <label data-label="右"> <input type="text" value="${paddingRight}" readonly="readonly"/> </label> </div> <div class="item" data-label=" "> <label data-label="下"> <input type="text" value="${paddingBottom}" readonly="readonly"/> </label> <label data-label="左"> <input type="text" value="${paddingLeft}" readonly="readonly"/> </label> </div> <div class="item" data-label="外边距:"> <label data-label="上"> <input type="text" value="${marginTop}" readonly="readonly"/> </label> <label data-label="右"> <input type="text" value="${marginRight}" readonly="readonly"/> </label> </div> <div class="item" data-label=" "> <label data-label="下"> <input type="text" value="${marginBottom}" readonly="readonly"/> </label> <label data-label="左"> <input type="text" value="${marginLeft}" readonly="readonly"/> </label> </div> <div class="item" data-label="圆角:"> <label> <input type="text" value="${borderRadius}" readonly="readonly"/> </label> </div> <div class="item" data-label="边框:"> <label data-label="宽度"> <input type="text" value="${borderWidth}" readonly="readonly"/> </label> <label data-label="类型"> <input type="text" value="${borderStyle}" readonly="readonly"/> </label> </div> <div class="item" data-label=""> <span class="color-bg"> <span color="${borderColor}"> </span> </span> <label data-label="颜色"> <input type="text" value="${borderColor}" readonly="readonly"/> </label> </div> <div class="item" data-label="不透明度:"> <label> <input type="text" value="${opacity}" readonly="readonly"/> </label> </div> <div class="item" data-label="背景色:"> <span class="color-bg"> <span color="${backgroundColor}"> </span> </span> <label> <input type="text" value="${backgroundColor}" readonly="readonly"/> </label> </div> </div> </section> <section> <h3>字体</h3> <div class="context"> <div class="item" data-label="字体:"> <label> <input type="text" value="${fontFamily}" readonly="readonly"/> </label> </div> <div class="item" data-label="颜色:"> <span class="color-bg"> <span color="${color}"> </span> </span> <label> <input type="text" value="${color}" readonly="readonly"/> </label> </div> <div class="item" data-label="大小:"> <label> <input type="text" value="${fontSize}" readonly="readonly"/> </label> </div> <div class="item" data-label="行高:"> <label> <input type="text" value="${lineHeight}" readonly="readonly"/> </label> </div> <div class="item" data-label="字重:"> <label> <input type="text" value="${fontWeight}" readonly="readonly"/> </label> </div> <div class="item" data-label="字间距:"> <label> <input type="text" value="${letterSpacing}" readonly="readonly"/> </label> </div> <div class="item" data-label="对齐方式:"> <label> <input type="text" value="${textAlign}" readonly="readonly"/> </label> </div> <div class="item"> <label data-label="内容"> <textarea id="content" rows="2" readonly="readonly" style="font-family:PingFang SC,sans-serif">${innerText}</textarea> </label> </div> </div> </section> '],{type:"text/html"}));var p=!1;const u=function(e){var t,n,o,a,l,i,r;if(!p){p=!0;var c=null!==(t=null==e?void 0:e.zIndex)&&void 0!==t?t:1e4,d=null!==(n=null==e?void 0:e.enableDomRulers)&&void 0!==n&&n,s=null!==(o=null==e?void 0:e.enableTextReplace)&&void 0!==o&&o,u=null!==(a=null==e?void 0:e.offsetY)&&void 0!==a?a:0,h={zIndex:c,enableDomRulers:d,enableTextReplace:s,offsetX:null!==(l=null==e?void 0:e.offsetX)&&void 0!==l?l:0,offsetY:u,width:null!==(i=null==e?void 0:e.width)&&void 0!==i?i:0,enableBlockClose:null===(r=null==e?void 0:e.enableBlockClose)||void 0===r||r},m={get:function(e,t){return e[t]},set:function(e,t,n){e[t]=n,"zIndex"===t&&(v(f,{zIndex:"".concat(n)}),v(b,{zIndex:"".concat(n)}),v(y,{zIndex:"".concat(n)}))}};window.top.sketchMeasureCompare.config=new Proxy(h,m);var f=document.createElement("iframe"),v=function(e,t){Object.keys(t).forEach((function(n){e.style[n]=t[n]}))};v(f,{width:"100vw",height:"100vh",position:"fixed",top:"0",left:"0",border:"none",zIndex:"".concat(c),display:"none"});var b=document.createElement("div");v(b,{position:"fixed",zIndex:"".concat(c),width:"100vw",height:"0",top:"0",left:"0"});var y=document.createElement("div");v(y,{position:"fixed",zIndex:"".concat(c),right:"0",bottom:"40px",backgroundColor:"#04BE02",padding:"2px 14px",borderRadius:"3px",color:"#fff",height:"26px",lineHeight:"22px",fontSize:"16px",userSelect:"none",webkitUserSelect:"none",boxSizing:"border-box"}),y.innerText="UI";var g=0,w=0,x=!1,k=0,C=0,M=0,N=0;y.onclick=function(e){var t=y.getBoundingClientRect(),n=t.left,o=t.top;(Math.abs(n-k)<1||Math.abs(o-C)<1||!(null!=e&&e.isTrusted))&&(f.style.display="none"===f.style.display?"block":"none")};var R=function(e){var t,n,o,a,l,i;b.style.height="100vh";var r=y.getBoundingClientRect(),c=r.left,d=r.top,s=r.width,p=r.height,u=b.getBoundingClientRect(),h=u.width,m=u.height;k=c,C=d,M=m,N=h;var f=null!==(t=null==e||null===(n=e.touches)||void 0===n||null===(o=n[0])||void 0===o?void 0:o.clientX)&&void 0!==t?t:null==e?void 0:e.clientX,v=null!==(a=null==e||null===(l=e.touches)||void 0===l||null===(i=l[0])||void 0===i?void 0:i.clientY)&&void 0!==a?a:null==e?void 0:e.clientY;g=f-k-s,w=v-C-p,x=!0},E=function(){b.style.height="0",x=!1},L=function(e){if(e.preventDefault(),x){var t,n,o,a,l,i,r=null!==(t=null==e||null===(n=e.touches)||void 0===n||null===(o=n[0])||void 0===o?void 0:o.clientX)&&void 0!==t?t:null==e?void 0:e.clientX,c=null!==(a=null==e||null===(l=e.touches)||void 0===l||null===(i=l[0])||void 0===i?void 0:i.clientY)&&void 0!==a?a:null==e?void 0:e.clientY;y.style.right=N-r+g+"px",y.style.bottom=M-c+w+"px"}};y.onmousedown=R,b.onmousemove=L,b.onmouseup=E,y.ontouchstart=R,b.ontouchmove=L,b.ontouchend=E,b.appendChild(y),f.src=window.top.sketchMeasureCompare.html,document.body.appendChild(f),document.body.appendChild(b)}};function h(e){return h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},h(e)}function m(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,(a=o.key,l=void 0,l=function(e,t){if("object"!==h(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!==h(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(a,"string"),"symbol"===h(l)?l:String(l)),o)}var a,l}function f(e,t,n){return t&&m(e.prototype,t),n&&m(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}var v=f((function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.init=u}));if(v.prototype.rulers=e,v.prototype.sketchMeasure=t,v.prototype.index=a,v.prototype.css=l.Z,v.prototype.html=i,v.prototype.tplIndex=r,v.prototype.tpl=c,v.prototype.textReplace=d,v.prototype.inspectorCenterTpl=s,!window.top.sketchMeasureCompare){var b=new v;window.top.sketchMeasureCompare=b}const y=window.top.sketchMeasureCompare})(),window.sketchMeasureCompare=o.default})();
\ No newline at end of file
diff --git a/js/content.js b/js/content.js
new file mode 100644
index 0000000..607dadc
--- /dev/null
+++ b/js/content.js
@@ -0,0 +1 @@
+const script=document.createElement("script");script.src=chrome.runtime.getURL("js/load.js"),document.head.appendChild(script);const sendMsg2Load=({msg:s,payload:e})=>{window.postMessage({to:"load",msg:s,payload:e})},sendMsg2Popup=({msg:s,payload:e})=>{chrome.runtime.sendMessage({msg:s,payload:e},(()=>chrome.runtime.lastError))};chrome.runtime.onMessage.addListener((s=>{sendMsg2Load(s)})),window.addEventListener("message",(s=>{const{msg:e,to:o,payload:a}=s.data||{};"content"===o&&sendMsg2Popup({msg:e,payload:a})}));
\ No newline at end of file
diff --git a/js/load.js b/js/load.js
new file mode 100644
index 0000000..7575370
--- /dev/null
+++ b/js/load.js
@@ -0,0 +1 @@
+(()=>{let e=null;const t=({msg:e,payload:t})=>{"object"==typeof t&&(t=JSON.stringify(t)),void 0===t&&(t=""),window.postMessage({to:"content",msg:e,payload:t})};window.addEventListener("message",(o=>{const{msg:n,to:i,payload:d}=o.data||{};if("load"===i){if("getConfig"===n&&t({msg:"getConfig",payload:window.top.sketchMeasureCompare?.config}),"config"===n){const t=JSON.parse(d);e&&e.then((()=>{console.log("%c🎉 Sketch Measure Compare Config Success!","color: #ffffff; background-color: #87d068; padding:4px 10px;"),window.top.sketchMeasureCompare?.config?Object.keys(t).forEach((e=>{window.top.sketchMeasureCompare.config[e]!==t[e]&&(window.top.sketchMeasureCompare.config[e]=t[e])})):window.top.sketchMeasureCompare.init(t)}))}if("load"!==n||e||(e=new Promise((e=>{const t=document.createElement("script");t.src=d,document.head.appendChild(t),t.onload=e}))),"getScreenInfo"===n)try{const e=Array.from(document.querySelectorAll("iframe")).filter((e=>e.src===window.top.sketchMeasureCompare?.html))[0].contentDocument.querySelectorAll("iframe")[0].contentDocument.getElementById("screen").getBoundingClientRect();if(e&&e.x+e.width>0&&e.x+e.width+10<window.innerWidth){const o=window.top.sketchMeasureCompare.config.offsetY,n=window.top.sketchMeasureCompare.config.offsetX,i=o>0?o:0;let d=e.y+i;d<0&&(d=0);let c=e.y+e.height;c>window.innerHeight&&(c=window.innerHeight);const r=c-d,a=n>0?n:0;let s=e.x+a;s<0&&(s=0);let w=e.x+2*e.width+10;w>window.innerWidth&&(w=window.innerWidth);const h=e.x+e.width-s,g=w-(e.x+e.width+10),f=Math.min(h,g),l={win:{width:window.innerWidth,height:window.innerHeight},ui:{x:e.x+e.width-f,y:d,width:f,height:r},web:{x:e.x+e.width+10,y:d,width:f,height:r},title:document.title};t({msg:"getScreenInfo",payload:l})}}catch{}}})),t({msg:"getConfig",payload:window.top.sketchMeasureCompare?.config})})();
\ No newline at end of file
diff --git a/js/popup.js b/js/popup.js
new file mode 100644
index 0000000..30d41e6
--- /dev/null
+++ b/js/popup.js
@@ -0,0 +1 @@
+const sendMsg2Content=({msg:e,payload:t})=>{chrome.tabs.query({active:!0,currentWindow:!0},(a=>{/^http/.test(a[0]?.url)&&("object"==typeof t&&(t=JSON.stringify(t)),void 0===t&&(t=""),chrome.tabs.sendMessage(a[0].id,{msg:e,payload:t},(()=>chrome.runtime.lastError)))}))},DEFAULT_CONFIG={zIndex:1e4,width:0,offsetX:0,offsetY:0,enableDomRulers:!1,enableTextReplace:!1},setConfig=e=>{e.zIndex=+e.zIndex||DEFAULT_CONFIG.zIndex,e.width=+e.width||DEFAULT_CONFIG.width,e.offsetX=+e.offsetX||DEFAULT_CONFIG.offsetX,e.offsetY=+e.offsetY||DEFAULT_CONFIG.offsetY,e.enableDomRulers=!!e.enableDomRulers,e.enableTextReplace=!!e.enableTextReplace,zIndex.value=e.zIndex,width.value=e.width,offsetX.value=e.offsetX,offsetY.value=e.offsetY,enableDomRulers.checked=e.enableDomRulers,enableTextReplace.checked=e.enableTextReplace,chrome.storage.local.set({sketchMeasureCompareConfig:e})},getConfig=e=>e?Promise.resolve(JSON.parse(e)):new Promise((e=>{chrome.storage.local.get(["sketchMeasureCompareConfig"],(t=>{e(t.sketchMeasureCompareConfig||DEFAULT_CONFIG)}))}));sendMsg2Content({msg:"getConfig"}),sendMsg2Content({msg:"getScreenInfo"});let screenInfo=null;chrome.runtime.onMessage.addListener((e=>{const{msg:t,payload:a}=e||{};var n;"getConfig"===t&&(n=a,n?Promise.resolve(JSON.parse(n)):new Promise((e=>{chrome.storage.local.get(["sketchMeasureCompareConfig"],(t=>{e(t.sketchMeasureCompareConfig||DEFAULT_CONFIG)}))}))).then((e=>{setConfig(e),setTimeout((()=>{const e=document.createElement("style");e.innerHTML="\n                    .slider {\n                        transition: 0.1s;\n                    }\n                    .slider:before {\n                        transition: 0.1s;\n                    }\n                ",document.head.appendChild(e)}),100)})),"getScreenInfo"===t&&(diff.style.display="initial",screenInfo=JSON.parse(a))})),fetch(chrome.runtime.getURL("package.json")).then((e=>e.json())).then((e=>{version.innerHTML=`v${e.version}`})),apply.onclick=()=>{const e={zIndex:+zIndex.value||DEFAULT_CONFIG.zIndex,width:+width.value||DEFAULT_CONFIG.width,offsetY:+offsetY.value||DEFAULT_CONFIG.offsetY,offsetX:+offsetX.value||DEFAULT_CONFIG.offsetX,enableDomRulers:!!enableDomRulers.checked,enableTextReplace:!!enableTextReplace.checked};setConfig(e),sendMsg2Content({msg:"load",payload:chrome.runtime.getURL("index.min.js")}),sendMsg2Content({msg:"config",payload:e}),window.close()},diff.onclick=()=>{screenInfo&&!diff.disabled&&(diff.disabled=!0,chrome.tabs.captureVisibleTab({format:"png"},(e=>{const t=document.createElement("img");t.src=e,t.onload=()=>{const{win:e,ui:a,web:n,title:o}=screenInfo,s=t.width/e.width;Object.keys(e).forEach((t=>{e[t]=e[t]*s})),Object.keys(a).forEach((e=>{a[e]=a[e]*s})),Object.keys(n).forEach((e=>{n[e]=n[e]*s}));const i=document.createElement("canvas"),l=i.getContext("2d",{willReadFrequently:!0});i.width=3*a.width,i.height=a.height,l.drawImage(t,a.x,a.y,a.width,a.height,0,0,a.width,a.height),l.drawImage(t,n.x,n.y,n.width,n.height,a.width,0,n.width,n.height);const d=l.getImageData(0,0,a.width,a.height),f=l.getImageData(a.width,0,a.width,a.height),r=new ImageData(a.width,a.height);for(let e=0;e<r.data.length;e+=4){const t=Math.abs(d.data[e]-f.data[e]),a=Math.abs(d.data[e+1]-f.data[e+1]),n=Math.abs(d.data[e+2]-f.data[e+2]),o=128,s=t+a+n>256||t>o||a>o||n>o;r.data[e]=s?255:d.data[e],r.data[e+1]=s?0:d.data[e+1],r.data[e+2]=s?255:d.data[e+2],r.data[e+3]=255}l.putImageData(r,2*a.width,0),l.fillStyle="#fff",l.fillRect(0,0,50,30),l.fillRect(a.width,0,70,30),l.fillRect(2*a.width,0,70,30),l.fillStyle="#f00",l.font="20px Arial",l.fillText("UI",10,22),l.fillText("WEB",10+a.width,22),l.fillText("DIFF",10+2*a.width,22);const c=document.createElement("a");c.href=i.toDataURL(),c.download=`${o||"page"}-diff.png`,c.click()}})))};
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..ef9fef7
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,27 @@
+{
+    "manifest_version": 3,
+    "name": "Sketch Measure Compare",
+    "version": "1.0.3",
+    "description": "extension for sketch measure compare",
+    "icons": {
+        "16": "img/icon.png",
+        "48": "img/icon.png",
+        "128": "img/icon.png"
+    },
+    "action": {
+        "default_popup": "popup.html"
+    },
+    "content_scripts": [
+        {
+            "matches": ["http://*/*", "https://*/*"],
+            "js": ["js/content.js"]
+        }
+    ],
+    "web_accessible_resources": [
+        {
+            "resources": ["js/load.js", "index.min.js"],
+            "matches": ["http://*/*", "https://*/*"]
+        }
+    ],
+    "permissions": ["activeTab", "scripting", "tabs", "storage"]
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ede1a6c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "sketch-measure-compare",
+  "version": "1.2.6",
+  "main": "index.min.js",
+  "license": "MIT",
+  "homepage": "https://github.com/Neco86/Sketch-Measure-Compare",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Neco86/Sketch-Measure-Compare.git"
+  },
+  "typings": "index.d.ts",
+  "devDependencies": {
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@webpack-cli/generators": "^3.0.1",
+    "babel-loader": "^8.2.5",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.1",
+    "html-loader": "^4.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "prettier": "^2.7.1",
+    "terser-webpack-plugin": "^5.3.3",
+    "uglifycss-loader": "^1.0.2",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3"
+  },
+  "description": "Sketch Measure Compare",
+  "scripts": {
+    "build": "webpack --mode=production --node-env=production",
+    "build:dev": "webpack --mode=development --watch",
+    "build:prod": "webpack --mode=production --node-env=production",
+    "watch": "webpack --watch",
+    "serve": "webpack serve",
+    "dev": "webpack-dev-server --mode=development --open"
+  }
+}
diff --git a/popup.html b/popup.html
new file mode 100644
index 0000000..64dcf61
--- /dev/null
+++ b/popup.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>SketchMeasureCompare</title>
+        <style>
+            body {
+                padding: 16px;
+            }
+            .row {
+                display: flex;
+                align-items: center;
+                margin-bottom: 12px;
+            }
+            .row .title {
+                margin-right: 18px;
+                width: 80px;
+                text-align: right;
+            }
+            input {
+                box-sizing: border-box;
+                margin: 0;
+                padding: 2px 6px;
+                color: #000000d9;
+                background-color: #fff;
+                border: 1px solid #d9d9d9;
+                border-radius: 2px;
+                transition: all 0.1s;
+            }
+            input:focus {
+                border-color: #40a9ff;
+                box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+                border-right-width: 1px;
+                outline: 0;
+            }
+
+            .switch {
+                position: relative;
+                display: inline-block;
+                width: 44px;
+                height: 22px;
+            }
+
+            /* Hide default HTML checkbox */
+            .switch input {
+                opacity: 0;
+                width: 0;
+                height: 0;
+            }
+
+            /* The slider */
+            .slider {
+                position: absolute;
+                cursor: pointer;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: #ccc;
+            }
+
+            .slider:before {
+                position: absolute;
+                content: '';
+                height: 14px;
+                width: 14px;
+                left: 4px;
+                bottom: 4px;
+                background-color: white;
+            }
+
+            input:checked + .slider {
+                background-color: #2196f3;
+            }
+
+            input:focus + .slider {
+                box-shadow: 0 0 1px #2196f3;
+            }
+
+            input:checked + .slider:before {
+                transform: translateX(22px);
+            }
+
+            /* Rounded sliders */
+            .slider.round {
+                border-radius: 34px;
+            }
+
+            .slider.round:before {
+                border-radius: 50%;
+            }
+
+            button {
+                border: 1px solid #1890ff;
+                transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+                user-select: none;
+                height: 32px;
+                padding: 2px 12px;
+                font-size: 14px;
+                border-radius: 2px;
+                background: #1890ff;
+                text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
+                box-shadow: 0 2px #0000000b;
+                color: #fff;
+                cursor: pointer;
+                margin-right: 10px;
+                width: 62px;
+                text-align: center;
+            }
+
+            button:active {
+                opacity: 0.5;
+            }
+
+            button:disabled {
+                border-color: #ccc;
+                background-color: #ccc;
+                cursor: not-allowed;
+                opacity: 1;
+            }
+
+            .button-wrapper {
+                display: flex;
+                align-items: center;
+                margin-top: 20px;
+                padding-left: 95px;
+            }
+
+            #diff {
+                display: none;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="row">
+            <div class="title">version</div>
+            <div id="version"></div>
+        </div>
+        <label class="row">
+            <div class="title">zIndex</div>
+            <input id="zIndex" type="tel" />
+        </label>
+        <label class="row">
+            <div class="title">width</div>
+            <input id="width" type="tel" />
+        </label>
+        <label class="row">
+            <div class="title">offsetX</div>
+            <input id="offsetX" type="tel" />
+        </label>
+        <label class="row">
+            <div class="title">offsetY</div>
+            <input id="offsetY" type="tel" />
+        </label>
+        <label class="row">
+            <div class="title">domRulers</div>
+            <div class="switch">
+                <input id="enableDomRulers" type="checkbox" />
+                <span class="slider round"></span>
+            </div>
+        </label>
+        <label class="row">
+            <div class="title">textReplace</div>
+            <div class="switch">
+                <input id="enableTextReplace" type="checkbox" />
+                <span class="slider round"></span>
+            </div>
+        </label>
+        <div class="button-wrapper">
+            <button id="apply">Apply</button>
+            <button id="diff">Diff</button>
+        </div>
+        <script src="./js/popup.js"></script>
+    </body>
+</html>