Deploying to gh-pages from @ 6a0c36d 🚀

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)

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;
+}

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"]
+}

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"
+  }
+}

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>