From f29f49a17d9b37bc678886c14c51bbe2a68250d1 Mon Sep 17 00:00:00 2001
From: iamkun <kunhello@outlook.com>
Date: Fri, 9 Aug 2019 17:53:49 +0800
Subject: [PATCH] Chore: Theme Extension (#16686)

---
 .eslintrc                                     |   3 +-
 build/webpack.extension.js                    |  33 +++
 .../editor/borderRadius.vue                   |   2 +-
 .../theme-configurator/editor/boxShadow.vue   |   2 +-
 .../theme-configurator/editor/color.vue       |   2 +-
 .../editor/fontLineHeight.vue                 |   2 +-
 .../theme-configurator/editor/fontSize.vue    |   2 +-
 .../theme-configurator/editor/fontWeight.vue  |   2 +-
 .../theme-configurator/editor/simpleText.vue  |   2 +-
 .../components/theme-configurator/index.vue   |   2 +-
 .../components/theme-configurator/main.vue    |   4 +-
 examples/components/theme/theme-card.vue      |   7 +-
 examples/extension/.gitignore                 |   1 +
 examples/extension/src/app.js                 |  18 ++
 examples/extension/src/background.js          |   6 +
 examples/extension/src/editor/editor.vue      | 212 ++++++++++++++++++
 examples/extension/src/editor/gallery.vue     | 185 +++++++++++++++
 examples/extension/src/editor/icon-close.png  | Bin 0 -> 3170 bytes
 .../extension/src/editor/icon-entrance.png    | Bin 0 -> 6383 bytes
 examples/extension/src/editor/index.vue       |  13 ++
 examples/extension/src/editor/utils.js        |  18 ++
 examples/extension/src/entry.js               |   7 +
 examples/extension/src/icon.png               | Bin 0 -> 16873 bytes
 examples/extension/src/manifest.json          |  27 +++
 package.json                                  |   2 +
 25 files changed, 540 insertions(+), 12 deletions(-)
 create mode 100644 build/webpack.extension.js
 create mode 100644 examples/extension/.gitignore
 create mode 100644 examples/extension/src/app.js
 create mode 100644 examples/extension/src/background.js
 create mode 100644 examples/extension/src/editor/editor.vue
 create mode 100644 examples/extension/src/editor/gallery.vue
 create mode 100644 examples/extension/src/editor/icon-close.png
 create mode 100644 examples/extension/src/editor/icon-entrance.png
 create mode 100644 examples/extension/src/editor/index.vue
 create mode 100644 examples/extension/src/editor/utils.js
 create mode 100644 examples/extension/src/entry.js
 create mode 100644 examples/extension/src/icon.png
 create mode 100644 examples/extension/src/manifest.json

diff --git a/.eslintrc b/.eslintrc
index 71aefcfa96e..ad4aa56f7fb 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,6 +1,7 @@
 {
   "globals": {
-    "ga": true
+    "ga": true,
+    "chrome": true
   },
   "plugins": ["html", "json"],
   "extends": "elemefe",
diff --git a/build/webpack.extension.js b/build/webpack.extension.js
new file mode 100644
index 00000000000..2f8752c5956
--- /dev/null
+++ b/build/webpack.extension.js
@@ -0,0 +1,33 @@
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const demoConfig = require('./webpack.demo');
+const webpack = require('webpack');
+const ProgressBarPlugin = require('progress-bar-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+
+demoConfig.entry = {
+  background: path.join(process.cwd(), './examples/extension/src/background'),
+  entry: path.join(process.cwd(), './examples/extension/src/entry')
+};
+demoConfig.output = {
+  path: path.join(process.cwd(), './examples/extension/dist'),
+  filename: '[name].js'
+};
+demoConfig.plugins = [
+  new CopyWebpackPlugin([
+    { from: 'examples/extension/src/manifest.json' },
+    { from: 'examples/extension/src/icon.png' }
+  ]),
+  new VueLoaderPlugin(),
+  new ProgressBarPlugin(),
+  new webpack.LoaderOptionsPlugin({
+    vue: {
+      compilerOptions: {
+        preserveWhitespace: false
+      }
+    }
+  }),
+  new webpack.HotModuleReplacementPlugin()
+];
+demoConfig.module.rules.find(a => a.loader === 'url-loader').query = {};
+module.exports = demoConfig;
diff --git a/examples/components/theme-configurator/editor/borderRadius.vue b/examples/components/theme-configurator/editor/borderRadius.vue
index e266dc8cc3c..8ee85f267ac 100644
--- a/examples/components/theme-configurator/editor/borderRadius.vue
+++ b/examples/components/theme-configurator/editor/borderRadius.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>
diff --git a/examples/components/theme-configurator/editor/boxShadow.vue b/examples/components/theme-configurator/editor/boxShadow.vue
index 671db20f1e5..312fc6ead02 100644
--- a/examples/components/theme-configurator/editor/boxShadow.vue
+++ b/examples/components/theme-configurator/editor/boxShadow.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
       <el-button 
diff --git a/examples/components/theme-configurator/editor/color.vue b/examples/components/theme-configurator/editor/color.vue
index bec84920fcc..90705d6f2d4 100644
--- a/examples/components/theme-configurator/editor/color.vue
+++ b/examples/components/theme-configurator/editor/color.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>
diff --git a/examples/components/theme-configurator/editor/fontLineHeight.vue b/examples/components/theme-configurator/editor/fontLineHeight.vue
index 71663c4b283..ef7455f5ea7 100644
--- a/examples/components/theme-configurator/editor/fontLineHeight.vue
+++ b/examples/components/theme-configurator/editor/fontLineHeight.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>
diff --git a/examples/components/theme-configurator/editor/fontSize.vue b/examples/components/theme-configurator/editor/fontSize.vue
index 740dcd38eca..f78fd06cbee 100644
--- a/examples/components/theme-configurator/editor/fontSize.vue
+++ b/examples/components/theme-configurator/editor/fontSize.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>
diff --git a/examples/components/theme-configurator/editor/fontWeight.vue b/examples/components/theme-configurator/editor/fontWeight.vue
index 846ebaa62c0..9a30581fabc 100644
--- a/examples/components/theme-configurator/editor/fontWeight.vue
+++ b/examples/components/theme-configurator/editor/fontWeight.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>
diff --git a/examples/components/theme-configurator/editor/simpleText.vue b/examples/components/theme-configurator/editor/simpleText.vue
index 284a9518ea5..f0628c480e3 100644
--- a/examples/components/theme-configurator/editor/simpleText.vue
+++ b/examples/components/theme-configurator/editor/simpleText.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="config" :key="displayName">
     <div class="config-label">
-      <el-tooltip :content="displayName">
+      <el-tooltip :content="displayName" placement="top">
         <span>{{displayKeyName}}</span>
       </el-tooltip>
     </div>
diff --git a/examples/components/theme-configurator/index.vue b/examples/components/theme-configurator/index.vue
index a11591e22f4..6e7483bdeef 100644
--- a/examples/components/theme-configurator/index.vue
+++ b/examples/components/theme-configurator/index.vue
@@ -102,7 +102,7 @@ export default {
             defaultConfig = res;
           })
           .catch(err => {
-            this.onError(err);
+            this.onError && this.onError(err);
           })
           .then(() => {
             setTimeout(() => {
diff --git a/examples/components/theme-configurator/main.vue b/examples/components/theme-configurator/main.vue
index 737a87958ab..5acbc9c99d2 100644
--- a/examples/components/theme-configurator/main.vue
+++ b/examples/components/theme-configurator/main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main" ref="mainPanel">
+  <div class="editor-main" ref="mainPanel">
     <!-- <span>{{configName}}</span> -->
     <div v-for="(config, key) in configByOrder" :key="key">
       <span 
@@ -22,7 +22,7 @@
 </template>
 
 <style>
-.main {
+.editor-main {
   padding: 0 18px 15px;
   overflow-y: auto;
 }
diff --git a/examples/components/theme/theme-card.vue b/examples/components/theme/theme-card.vue
index bf7ee0d8df4..016961f66db 100644
--- a/examples/components/theme/theme-card.vue
+++ b/examples/components/theme/theme-card.vue
@@ -260,7 +260,8 @@ export default {
     base: {
       type: String,
       default: ''
-    }
+    },
+    from: String
   },
   data() {
     return {
@@ -308,6 +309,10 @@ export default {
       switch (e) {
         case 'preview':
         case 'edit':
+          if (this.from) {
+            this.$emit('action', e, this.config);
+            return;
+          }
           const { name, theme } = this.config;
           savePreviewToLocal({
             type: this.type,
diff --git a/examples/extension/.gitignore b/examples/extension/.gitignore
new file mode 100644
index 00000000000..53c37a16608
--- /dev/null
+++ b/examples/extension/.gitignore
@@ -0,0 +1 @@
+dist
\ No newline at end of file
diff --git a/examples/extension/src/app.js b/examples/extension/src/app.js
new file mode 100644
index 00000000000..740093a8777
--- /dev/null
+++ b/examples/extension/src/app.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import App from './editor/index';
+import Element from 'main/index.js';
+import 'packages/theme-chalk/src/index.scss';
+
+export default () => {
+  Vue.use(Element, { zIndex: 100000 });
+  const root = document.createElement('div');
+  document.body.appendChild(root);
+
+  window.ga = function() {
+    console.log(arguments);
+  };
+
+  new Vue({ // eslint-disable-line
+    render: h => h(App)
+  }).$mount(root);
+};
diff --git a/examples/extension/src/background.js b/examples/extension/src/background.js
new file mode 100644
index 00000000000..48a93ef82fc
--- /dev/null
+++ b/examples/extension/src/background.js
@@ -0,0 +1,6 @@
+chrome.browserAction.onClicked.addListener(tab => {
+  chrome.tabs.executeScript(tab.id, {
+    file: 'entry.js'
+  });
+})
+;
diff --git a/examples/extension/src/editor/editor.vue b/examples/extension/src/editor/editor.vue
new file mode 100644
index 00000000000..45e5c881e96
--- /dev/null
+++ b/examples/extension/src/editor/editor.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="ext-panel" :class="{moving : moving}" :style="{top: `${top}px`, left: `${left}px`}" ref="editor" >
+    <img class="entrance touch-icon" src="./icon-entrance.png" v-show="!showSidebar" @click="toggleSidebar" />
+    <img class="close touch-icon" src="./icon-close.png" v-show="showSidebar" @click="toggleSidebar" />
+    <div class="editor" :style="{height: `${height}px`}" v-show="showSidebar">
+      <el-tabs v-model="activeTab" @tab-click="onTabClick">
+        <el-tab-pane label="Config" name="config">
+          <theme-configurator
+            :themeConfig="themeConfig"
+            :previewConfig="previewConfig"
+            :onUserConfigUpdate="onUserConfigUpdate"
+            from="extension"
+          ></theme-configurator>
+        </el-tab-pane>
+        <el-tab-pane label="Gallery" name="gallery">
+          <gallery 
+            ref='gallery'
+            :height="height"
+            :width="width - 7"
+            @action="onGalleryAction"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemeConfigurator from '../../../components/theme-configurator';
+import themeLoader from '../../../components/theme/loader';
+import gallery from './gallery';
+import { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';
+import bus from '../../../bus.js';
+import {
+  ACTION_APPLY_THEME
+} from '../../../components/theme/constant.js';
+
+let initX;
+let initY;
+let leftX = 0;
+let topY = 25;
+export default {
+  mixins: [themeLoader],
+  components: {
+    ThemeConfigurator,
+    gallery
+  },
+  data() {
+    return {
+      showSidebar: true,
+      previewConfig: {},
+      themeConfig: {},
+      top: topY,
+      left: leftX,
+      height: window.innerHeight - 30 * 2,
+      width: 0,
+      moving: false,
+      activeTab: 'config',
+      themeName: '',
+      userTheme: []
+    };
+  },
+  mounted() {
+    const editor = this.$refs.editor;
+    this.width = editor.offsetWidth;
+    leftX = window.innerWidth - 20 - this.width;
+    this.left = leftX;
+    editor.addEventListener('mousedown', e => {
+      initX = e.clientX;
+      initY = e.clientY;
+      leftX = this.left;
+      topY = this.top;
+      document.addEventListener('mousemove', this.moveFunc);
+    });
+    document.addEventListener('mouseup', e => {
+      document.removeEventListener('mousemove', this.moveFunc);
+      setTimeout(() => {this.moving = false;}, 0);
+    });
+    // chrome.storage.local.remove('ELEMENT_THEME_USER_CONFIG');
+    loadUserThemeFromLocal()
+      .then((result) => {
+        if (result) {
+          this.activeTab = 'gallery';
+          this.userTheme = result;
+        }
+      });
+  },
+  methods: {
+    checkLocalThemeConfig() {}, // disable mixin auto loading
+    toggleSidebar() {
+      if (this.moving) return;
+      this.showSidebar = !this.showSidebar;
+      if (!this.showSidebar) {
+        const windowWidth = window.innerWidth;
+        if (this.left + this.width * 0.5 < windowWidth * 0.5) {
+          this.left = 0;
+        } else {
+          this.left = windowWidth - 50;
+        }
+      } else {
+        this.moveEditor(this.left, this.top);
+      }
+    },
+    moveFunc(e) {
+      e.preventDefault();
+      const deltaX = initX - e.clientX;
+      const deltaY = initY - e.clientY;
+      if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+        this.moving = true;
+      }
+      this.moveEditor(leftX - deltaX, topY - deltaY);
+    },
+    moveEditor(x, y) {
+      const showSidebar = this.showSidebar;
+      let nextTop = y;
+      if (nextTop < 0) nextTop = 0;
+      const maxTop = window.innerHeight - (showSidebar ? (this.height + 5) : 50);
+      if (nextTop > maxTop) nextTop = maxTop;
+      this.top = nextTop;
+      let nextLeft = x;
+      if (nextLeft < 0) nextLeft = 0;
+      const maxLeft = window.innerWidth - (showSidebar ? (this.width + 5) : 50);
+      if (nextLeft > maxLeft) nextLeft = maxLeft;
+      this.left = nextLeft;
+    },
+    onGalleryAction(key, value) {
+      switch (key) {
+        case 'edit':
+          this.themeName = value.name;
+          this.themeConfig = JSON.parse(value.theme);
+          bus.$emit(ACTION_APPLY_THEME, this.themeConfig);
+          this.activeTab = 'config';
+          break;
+        default:
+          return;
+      }
+    },
+    onTabClick(e) {
+      if (e && e.name === 'gallery') {
+        this.$refs.gallery.init();
+      }
+    },
+    onUserConfigUpdate(userConfig) {
+      if (this.themeName) {
+        this.userTheme.forEach((config) => {
+          if (config.name === this.themeName) {
+            config.update = Date.now();
+            config.theme = JSON.stringify(userConfig);
+          }
+        });
+      } else {
+        this.themeName = `Theme-${Date.now()}`;
+        this.userTheme.push({
+          update: Date.now(),
+          name: this.themeName,
+          theme: JSON.stringify(userConfig)
+        });
+      }
+      saveUserThemeToLocal(this.userTheme);
+    }
+  }
+};
+</script>
+<style scoped>
+.ext-panel {
+  position: fixed;
+  background: transparent;
+  user-select: none;
+  z-index: 100000;
+}
+.ext-panel.moving{
+  cursor: move;
+}
+.ext-panel.moving .touch-icon{
+  cursor: move;
+}
+.ext-panel .touch-icon{
+  cursor: pointer;
+}
+.ext-panel .close {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 20px;
+  width: 20px;
+  z-index: 100001;
+}
+.ext-panel .entrance {
+  height: 50px;
+  width: 50px;
+}
+.ext-panel .editor {
+  overflow: hidden;
+  background: #f5f7fa;
+  border: 1px solid #ebeef5;
+  border-radius: 5px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  margin: 5px 5px 0 0;
+  min-width: 261px;
+}
+</style>
+<style>
+.ext-panel  .editor .el-tabs__content, .ext-panel  .editor .el-tabs--top, .ext-panel  .editor .el-tab-pane {
+  height: 100%;
+}
+.ext-panel .el-tabs__nav-scroll >div {
+  transform: translateX(60px)!important;
+}
+.ext-panel .editor-main {
+  padding: 0 18px 70px;
+}
+</style>
\ No newline at end of file
diff --git a/examples/extension/src/editor/gallery.vue b/examples/extension/src/editor/gallery.vue
new file mode 100644
index 00000000000..6e2814683ca
--- /dev/null
+++ b/examples/extension/src/editor/gallery.vue
@@ -0,0 +1,185 @@
+<template>
+  <div :style="{ 
+    height: `${height}px`,
+      width: `${width}px`
+      }"
+    class="main"
+    >
+    <ul
+      class="theme-card-list"
+    >
+      <li class="theme-card" v-for="item in userTheme" :key="item.name">
+        <theme-card type="user" :config="item" @action="onAction" from="extension"></theme-card>
+      </li>
+      <li class="theme-card">
+        <theme-card type="upload" :config="{name: 'upload'}" @action="onAction"></theme-card>
+      </li>
+    </ul>
+    <el-dialog :visible.sync="copyDialogVisible" :modal-append-to-body="false">
+      <el-form :model="copyForm" ref="copyForm" :rules="copyFormRule">
+        <el-form-item label="主题名称" prop="name">
+          <el-input v-model="copyForm.name"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeCopyForm">取消</el-button>
+        <el-button type="primary" @click="copyToUser">确认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+ul, li {
+  padding: 0;
+  margin: 0;
+}
+.main {
+  overflow: auto;
+}
+.theme-card-list {
+  padding-bottom: 50px;
+  width: 90%;
+  margin: 0 auto;
+}
+.theme-card {
+  display: inline-block;
+  height: 140px;
+  height: 15vw;
+  width: 100%;
+  max-height: 230px;
+  flex: 0 0 24%;
+  cursor: default;
+  vertical-align: bottom;
+}
+</style>
+<style>
+.theme-card .theme-card-item {
+  margin-top: 0;
+}
+.theme-card .theme-card-item.is-upload {
+  height: 80%
+}
+</style>
+
+<script>
+import ThemeCard from '../../../components/theme/theme-card.vue';
+import { loadUserThemeFromLocal, saveUserThemeToLocal } from './utils';
+
+export default {
+  props: {
+    height: Number,
+    width: Number
+  },
+  data() {
+    return {
+      userTheme: [],
+      copyDialogVisible: false,
+      copyForm: {},
+      copyFormRule: {
+        name: [{
+          validator: this.validateCopyName,
+          trigger: 'blur'
+        }]
+      }
+    };
+  },
+  components: {
+    ThemeCard
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      loadUserThemeFromLocal().then(result => {
+        if (!result) return;
+        this.userTheme = result;
+      });
+    },
+    onAction(key, value) {
+      switch (key) {
+        case 'copy':
+          this.openCopyForm(value.theme);
+          break;
+        case 'upload':
+          this.openCopyForm(value);
+          break;
+        case 'delete':
+          this.$confirm('确定要删除这个主题?', '提示', {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.deleteUserThemeByName(value.name);
+          }).catch(() => {});
+          break;
+        case 'rename':
+          this.openRenameForm(value.name);
+          break;
+        default:
+          this.$emit('action', key, value);
+          return;
+      }
+    },
+    openCopyForm(theme) {
+      this.copyForm.theme = theme;
+      this.copyDialogVisible = true;
+    },
+    openRenameForm(name) {
+      this.copyForm.oldname = name;
+      this.copyDialogVisible = true;
+    },
+    closeCopyForm() {
+      this.copyDialogVisible = false;
+      this.$nextTick(() => {
+        this.copyForm = {};
+      });
+    },
+    validateCopyName(rule, value, callback) {
+      if (!value) {
+        callback(new Error('主题名称是必填项'));
+      } else if (this.filterUserThemeByName(value).length > 0) {
+        callback(new Error('主题名称重复'));
+      } else {
+        callback();
+      }
+    },
+    copyToUser() {
+      this.$refs.copyForm.validate((valid) => {
+        if (valid) {
+          const { theme, name, oldname } = this.copyForm;
+          if (theme) {
+            // copy
+            this.userTheme.push({
+              update: Date.now(),
+              name,
+              theme
+            });
+          } else {
+            // rename
+            this.userTheme.forEach((config) => {
+              if (config.name === oldname) {
+                config.update = Date.now();
+                config.name = name;
+              }
+            });
+          }
+          this.saveToLocal();
+          this.closeCopyForm();
+        }
+      });
+    },
+    filterUserThemeByName(name, include = true) {
+      return this.userTheme.filter((theme) => (include ? theme.name === name : theme.name !== name));
+    },
+    saveToLocal() {
+      saveUserThemeToLocal(this.userTheme);
+    },
+    deleteUserThemeByName(name) {
+      this.userTheme = this.filterUserThemeByName(name, false);
+      this.saveToLocal();
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/examples/extension/src/editor/icon-close.png b/examples/extension/src/editor/icon-close.png
new file mode 100644
index 0000000000000000000000000000000000000000..d102a54044a44a1715ebd7c3445e027f51c98149
GIT binary patch
literal 3170
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
IM6N<$g0?LZg8%>k

literal 0
HcmV?d00001

diff --git a/examples/extension/src/editor/icon-entrance.png b/examples/extension/src/editor/icon-entrance.png
new file mode 100644
index 0000000000000000000000000000000000000000..8effde9addbc61f541473f526b3e4262f86ce2d7
GIT binary patch
literal 6383
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

literal 0
HcmV?d00001

diff --git a/examples/extension/src/editor/index.vue b/examples/extension/src/editor/index.vue
new file mode 100644
index 00000000000..a148afca3a6
--- /dev/null
+++ b/examples/extension/src/editor/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <editor />
+</template>
+
+<script>
+import editor from './editor';
+
+export default {
+  components: {
+    editor
+  }
+};
+</script>
diff --git a/examples/extension/src/editor/utils.js b/examples/extension/src/editor/utils.js
new file mode 100644
index 00000000000..0d1929f89c5
--- /dev/null
+++ b/examples/extension/src/editor/utils.js
@@ -0,0 +1,18 @@
+const ELEMENT_THEME_USER_CONFIG = 'ELEMENT_THEME_USER_CONFIG';
+export const loadFromLocal = (key) => {
+  return new window.Promise((resolve) => {
+    chrome.storage.local.get([key], (result) => {
+      resolve(result[key]);
+    });
+  });
+};
+export const saveToLocal = (key, value) => {
+  chrome.storage.local.set({[key]: value});
+};
+
+export const loadUserThemeFromLocal = () => {
+  return loadFromLocal(ELEMENT_THEME_USER_CONFIG);
+};
+export const saveUserThemeToLocal = (value) => {
+  saveToLocal(ELEMENT_THEME_USER_CONFIG, value);
+};
diff --git a/examples/extension/src/entry.js b/examples/extension/src/entry.js
new file mode 100644
index 00000000000..a6390bb9ade
--- /dev/null
+++ b/examples/extension/src/entry.js
@@ -0,0 +1,7 @@
+import init from './app';
+
+if (!window.ElementThemeRollerInit) {
+  window.ElementThemeRollerInit = true;
+  init();
+}
+
diff --git a/examples/extension/src/icon.png b/examples/extension/src/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..faca4a31ba784fb16c4a5315cab7e6ffbddea403
GIT binary patch
literal 16873
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

literal 0
HcmV?d00001

diff --git a/examples/extension/src/manifest.json b/examples/extension/src/manifest.json
new file mode 100644
index 00000000000..c21e0b1fd7b
--- /dev/null
+++ b/examples/extension/src/manifest.json
@@ -0,0 +1,27 @@
+{
+  "name": "Element Theme Roller",
+  "version": "0.0.9",
+  "description": "Customize all Design Tokens of Element UI and preview in real-time",
+  "web_accessible_resources": ["entry.js"],
+  "background": {
+    "scripts": [
+      "background.js"
+    ],
+    "persistent": true
+  },
+  "icons": {
+    "128": "icon.png"
+  },
+  "browser_action": {
+    "default_icon": "icon.png",
+    "default_title": "Element Theme Roller"
+  },
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "manifest_version": 2,
+  "permissions": [
+    "activeTab",
+    "storage",
+    "https://*.ele.me/",
+    "https://*.elenet.me/"
+  ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index af6ca7436bf..8ba9641d560 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
     "build:umd": "node build/bin/build-locale.js",
     "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
     "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
+    "deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
+    "dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
     "dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
     "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
     "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",