截图功能基本ok，代码可能还有小修改

2025-11-04 03:43:10 +08:00 · 2022-02-04 22:39:35 +08:00
parent d187418ee0
commit e836ce4ca5
31 changed files with 414 additions and 13323 deletions
--- a/packages/shell-chrome/assets/css/main.css
+++ b/packages/shell-chrome/assets/css/main.css
@@ -1,96 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-}
-li {
-  list-style: none;
-}
-a {
-  text-decoration: none;
-}
-#popup {
-  height: 250px;
-  width: 200px;
-  background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
-}
-#popup header {
-  width: inherit;
-  height: 30px;
-  background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
-}
-#popup header img {
-  height: inherit;
-}
-#popup .article ul li {
-  margin: 5px 0;
-  height: 45px;
-  background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
-}
-#popup .article ul li span {
-  font-size: 16px;
-  line-height: 45px;
-  margin-left: 5px;
-}
-#popup .article ul li #click-per .button {
-  position: relative;
-  float: right;
-  top: 6px;
-  right: 6px;
-  width: 66px;
-  height: 32px;
-  border-radius: 100px;
-}
-#popup .article ul li #click-per .button .checkbox {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  z-index: 3;
-}
-#popup .article ul li #click-per .button .knobs,
-#popup .article ul li #click-per .button .layer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-#popup .article ul li #click-per .button .knobs {
-  z-index: 2;
-}
-#popup .article ul li #click-per .button .layer {
-  border-radius: 100px;
-  width: 100%;
-  background-color: #ebf7fc;
-  z-index: 1;
-}
-#popup .article ul li #click-per .button .knobs::before {
-  content: "YES";
-  position: absolute;
-  top: 2px;
-  left: 34px;
-  width: 20px;
-  height: 10px;
-  color: #fff;
-  font-size: 10px;
-  font-weight: bold;
-  text-align: center;
-  line-height: 1;
-  padding: 9px 4px;
-  background-color: #03a9f4;
-  border-radius: 50%;
-}
-#popup .article ul li #click-per .button .checkbox:checked + .knobs:before {
-  content: "NO";
-  left: 3px;
-  background-color: #f44336;
-}
-#popup .article ul li #click-per .button .checkbox:checked ~ .layer {
-  background-color: #fcebeb;
-}
-#popup .article ul li #click-per .button .knobs,
-#popup .article ul li #click-per .button .knobs:before,
-#popup .article ul li #click-per .button .layer {
-  transition: 0.3s ease all;
-}
--- a/packages/shell-chrome/assets/css/main.less
+++ b/packages/shell-chrome/assets/css/main.less
@@ -1,105 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-}
-
-li {
-    list-style: none;
-}
-
-a {
-    text-decoration: none;
-}
-
-#popup {
-    height: 250px;
-    width: 200px;
-    background: linear-gradient(to right bottom, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
-    header{
-        width: inherit;
-        height: 30px;
-        background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);;
-        img {
-            height: inherit;
-        }
-    }
-    .article{
-        ul{
-            li{
-                margin: 5px 0;
-                height: 45px;
-                background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
-                span{
-                    font-size: 16px;
-                    line-height: 45px;
-                    margin-left: 5px;
-                }
-                #click-per{
-                    .button {
-                        position: relative;
-                        float: right;
-                        top: 6px;
-                        right: 6px;
-                        width: 66px;
-                        height: 32px;
-                        border-radius: 100px;
-                        .checkbox {
-                            position: relative;
-                            width: 100%;
-                            height: 100%;
-                            opacity: 0;
-                            cursor: pointer;
-                            z-index: 3;
-                        }
-                        .knobs,
-                        .layer {
-                            position: absolute;
-                            top: 0;
-                            right: 0;
-                            bottom: 0;
-                            left: 0;
-                        }
-                        .knobs {
-                            z-index: 2;
-                        }
-                        .layer{
-                            border-radius: 100px;
-                            width: 100%;
-                            background-color: #ebf7fc;
-                            z-index: 1;
-                        }
-                        .knobs::before {
-                            content: "YES";
-                            position: absolute;
-                            top: 2px;
-                            left: 34px;
-                            width: 20px;
-                            height: 10px;
-                            color: #fff;
-                            font-size: 10px;
-                            font-weight: bold;
-                            text-align: center;
-                            line-height: 1;
-                            padding: 9px 4px;
-                            background-color: #03a9f4;
-                            border-radius: 50%;
-                        }
-                        .checkbox:checked+.knobs:before {
-                            content: "NO";
-                            left: 3px;
-                            background-color: #f44336;
-                        }
-                        .checkbox:checked~.layer {
-                            background-color: #fcebeb;
-                        }
-                        .knobs,
-                        .knobs:before,
-                        .layer{
-                            transition: 0.3s ease all;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
--- a/packages/shell-chrome/assets/image/logo.png
+++ b/packages/shell-chrome/assets/image/logo.png
--- a/packages/shell-chrome/assets/image/mouse-effects/mouse.png
+++ b/packages/shell-chrome/assets/image/mouse-effects/mouse.png
--- a/packages/shell-chrome/assets/image/not-used/icon_disabled.png
+++ b/packages/shell-chrome/assets/image/not-used/icon_disabled.png
--- a/packages/shell-chrome/assets/image/not-used/icon_enabled.png
+++ b/packages/shell-chrome/assets/image/not-used/icon_enabled.png
--- a/packages/shell-chrome/assets/image/search-256.png
+++ b/packages/shell-chrome/assets/image/search-256.png
--- a/packages/shell-chrome/assets/js/advanced-search/background.js
+++ b/packages/shell-chrome/assets/js/advanced-search/background.js
@@ -1,812 +0,0 @@
-// 注册右键菜单
-chrome.contextMenus.create({
-  id: 'bitdance-advanced-search',
-  title: '高级搜索',
-  parentId: 'bitdance',
-  onclick: function (info) {
-    alert('当前菜单信息:' + JSON.stringify(info))
-    alert("[BitDance extension] 学生助手插件 - 高级搜索 已点击菜单")
-  }
-})
-
-
-
-/**
- * ss 的寓意
- *
- * - 搜索 (sou suo)
- *
- * - 超级搜索 (super search)
- * - 智慧搜索 (smart search)
- * - 洞见搜索 (sagacious search)
- * - 流畅搜索 (smooth search)
- * - 安全搜索 (safe search)
- *
- * 当然还有...
- * - 简单搜索 (simple search)
- * - 愚蠢搜索 (stupid search)
- *
- * 即使有上面那么多的功能，但我们不往初心，
- *
- * - 开创探索 (seminal search)
- * - 启航 (set sail)
- */
-
-/**
- * refer:
- *
- * omnibox 搜索
- * GitHub demo: https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/mv2-archive/extensions/chrome_search
- * Blog: https://www.cnblogs.com/cc11001100/p/12353361.html
- * Debug: https://chrome.google.com/webstore/detail/omnibox-debug/nhgkpjdgjmjhgjhgjhgjhgjhgjhgjhgjhg
- */
-
-
-
-/**
- * ****************************************************************************************
- *
- * app.js/base.js
- *
- * ****************************************************************************************
- */
-//  'use strict';
-
-const app = {};
-window.app = app;
-
-/* runtime */
-app.runtime = {
-  on(e, callback) {
-    if (e === 'start') {
-      chrome.runtime.onStartup.addListener(callback);
-      chrome.runtime.onInstalled.addListener(callback);
-    }
-  },
-  get manifest() {
-    return chrome.runtime.getManifest();
-  },
-  connect(tabId, connectInfo) {
-    let port;
-    if (typeof tabId === 'object') {
-      port = chrome.runtime.connect(tabId);
-    }
-    else {
-      port = chrome.tabs.connect(tabId, connectInfo);
-    }
-    return {
-      on(e, callback) {
-        if (e === 'message') {
-          port.onMessage.addListener(callback);
-        }
-      },
-      post(msg) {
-        port.postMessage(msg);
-      }
-    };
-  }
-};
-
-//  /* storage */
-//  app.storage = {
-//    get(prefs, type = 'managed') {
-//      return new Promise(resolve => {
-//        if (type === 'managed') {
-//          chrome.storage.managed.get(prefs, ps => {
-//            chrome.storage.local.get(chrome.runtime.lastError ? prefs : ps || prefs, resolve);
-//          });
-//        }
-//        else {
-//          chrome.storage[type].get(prefs, resolve);
-//        }
-//      });
-//    },
-//    set(prefs, type = 'managed') {
-//      return new Promise(resolve => {
-//        chrome.storage[type === 'remote' ? 'remote' : 'local'].set(prefs, resolve);
-//      });
-//    },
-//    on(e, callback) {
-//      if (e === 'changed') {
-//        chrome.storage.onChanged.addListener(callback);
-//      }
-//    }
-//  };
-
-//  /* button */
-//  app.button = {
-//    set({
-//      popup
-//    }, tabId) {
-//      if (popup !== undefined) {
-//        chrome.browserAction.setPopup({
-//          tabId,
-//          popup
-//        });
-//      }
-//    },
-//    on(e, callback) {
-//      if (e === 'clicked') {
-//        chrome.browserAction.onClicked.addListener(callback);
-//      }
-//    }
-//  };
-
-// /* tab */
-// app.tabs = {
-//   open({
-//     url
-//   }) {
-//     return new Promise(resolve => chrome.tabs.create({ url }, resolve));
-//   },
-//   current() {
-//     return new Promise(resolve => chrome.tabs.query({
-//       active: true,
-//       currentWindow: true
-//     }, (tabs = []) => resolve(tabs[0])));
-//   },
-//   inject: {
-//     js(tabId, details) {
-//       if (typeof tabId === 'object') {
-//         details = tabId;
-//         tabId = undefined;
-//       }
-//       return new Promise((resolve, reject) => {
-//         chrome.tabs.executeScript(tabId, Object.assign({
-//           runAt: 'document_start'
-//         }, details), results => {
-//           const lastError = chrome.runtime.lastError;
-//           if (lastError) {
-//             reject(lastError);
-//           }
-//           else {
-//             resolve(results);
-//           }
-//         });
-//       });
-//     },
-//     css(tabId, details) {
-//       if (typeof tabId === 'object') {
-//         details = tabId;
-//         tabId = undefined;
-//       }
-//       return new Promise((resolve, reject) => {
-//         chrome.tabs.insertCSS(tabId, Object.assign({
-//           runAt: 'document_start'
-//         }, details), results => {
-//           const lastError = chrome.runtime.lastError;
-//           if (lastError) {
-//             reject(lastError);
-//           }
-//           else {
-//             resolve(results);
-//           }
-//         });
-//       });
-//     }
-//   }
-// };
-
-//  /* window */
-//  app.windows = {
-//    open({url, left, top, width, height, type}) {
-//      width = width || 700;
-//      height = height || 500;
-//      if (left === undefined) {
-//        left = screen.availLeft + Math.round((screen.availWidth - width) / 2);
-//      }
-//      if (top === undefined) {
-//        top = screen.availTop + Math.round((screen.availHeight - height) / 2);
-//      }
-//      return new Promise(resolve => chrome.windows.create(
-//        {url, width, height, left, top, type: type || 'popup'},
-//        resolve
-//      ));
-//    }
-//  };
-
-//  /* menus */
-//  app.menus = {
-//    add(...items) {
-//      for (const item of items) {
-//        chrome.contextMenus.create(Object.assign({
-//          contexts: item.contexts || ['browser_action']
-//        }, item));
-//      }
-//    },
-//    on(e, callback) {
-//      if (e === 'clicked') {
-//        chrome.contextMenus.onClicked.addListener(callback);
-//      }
-//    }
-//  };
-
-
-
-/**
- * ****************************************************************************************
- *
- * 搜索模式配置部分
- *
- * ****************************************************************************************
- */
-
-/**
- * 支持的搜索方式
- *
- * Notes:
- * - 第一位需要保留为默认搜索方式（文字）
- * - getSuggestions / search 方法传入参数应该是经过 getInputText 过滤前面搜索模式字符的字符串
- */
-var omniboxSearchModes = [
-  // #############################################################################################################
-  {
-    key: "",
-    // 显示文字
-    showText: "文字",
-    // 搜索模式匹配
-    // match: function (text) { },
-    // 获取输入文字
-    getInputText: function (text, encodeText = true) {
-      return encodeText ? encodeXML(text) : text
-    },
-    // 搜索建议
-    getSuggestions: async function (text, suggest) {
-      // 如果前面已经有了 【[xx] 】，则先去掉
-      text = text.replace(/^\[.*?\]\s*/, "");
-      suggest([
-        { content: "[百度] " + text, description: "使用 <url>[百度]</url> 搜索 <match>" + text + "</match>", deletable: false },
-        { content: "[搜狗] " + text, description: "使用 <url>[搜狗]</url> 搜索 <match>" + text + "</match>", deletable: false },
-        { content: "[必应] " + text, description: "使用 <url>[必应]</url> 搜索 <match>" + text + "</match>", deletable: false },
-        { content: "[360] " + text, description: "使用 <url>[360]</url> 搜索 <match>" + text + "</match>", deletable: false },
-        { content: "[微博] " + text, description: "使用 <url>[微博]</url> 搜索 <match>" + text + "</match>", deletable: false },
-        { content: "[中国搜索] " + text, description: "使用 <url>[中国搜索]</url> 搜索 <match>" + text + "</match>", deletable: false },
-      ]);
-      return;
-
-      var url = "https://code.google.com/p/chromium/codesearch#search/&type=cs&q=" + query +
-        "&exact_package=chromium&type=cs";
-      var req = new XMLHttpRequest();
-      req.open("GET", url, true);
-      req.setRequestHeader("GData-Version", "2");
-      req.onreadystatechange = function () {
-        if (req.readyState == 4) callback(req.responseXML);
-      }
-      req.send(null);
-      // return req;
-
-
-      suggestions.forEach((suggestion) => { suggestion.deletable = false /* 用户不可删除 */ });
-      /**
-       * SuggestResult
-       * refer: https://developer.chrome.com/docs/extensions/reference/omnibox/
-       * { content, description[, deletable] }
-       */
-      suggest(suggestions);
-
-      // suggest([
-      //   { content: "one", description: "the <match>aaa</match><url>www</url>first one", deletable: false },
-      //   { content: "number two", description: "the second entry", deletable: false }
-      // ]);
-    },
-    // 执行搜索
-    search: function (text) {
-      let searchInput = /^(\[.*?\])?( )?(.*)$/.exec(text)
-      let searchType = /^\[(.*?)\]$/.exec((searchInput[1] ?? "[百度]"/* 默认百度搜索 */).trim())[0].trim()
-      let searchText = searchInput[3].trim()
-      console.log("[文字搜索开始]");
-      console.log("    传入参数为：", text);
-      console.log("    searchInput为：", searchInput);
-      console.log("    searchType为：", searchType);
-      console.log("    searchText为：", searchText);
-      switch (searchType) {
-        default:
-        case "[百度]":
-          navigate("https://www.baidu.com/s?wd="+ encodeURIComponent(searchText), true);
-          break;
-        case "[搜狗]":
-          navigate("https://www.sogou.com/web?query="+ encodeURIComponent(searchText), true);
-          break;
-        case "[必应]":
-          navigate("https://cn.bing.com/search?q="+ encodeURIComponent(searchText), true);
-          break;
-        case "[360]":
-          navigate("https://www.so.com/s?q="+ encodeURIComponent(searchText), true);
-          break;
-        case "[微博]":
-          navigate("https://s.weibo.com/weibo?q="+ encodeURIComponent(searchText), true);
-          break;
-        case "[中国搜索]":
-          navigate("http://www.chinaso.com/newssearch/all/allResults?q=" + encodeURIComponent(searchText), true);
-          break;
-      }
-      console.log("[文字搜索结束]");
-    }
-  },
-  // #############################################################################################################
-  {
-    key: "yn",
-    // 显示文字
-    showText: "网页内搜索(Todo)",
-    // 搜索模式匹配
-    match: function (text) {
-      return /^yn( |:|\uff1a)?/.test(text)
-    },
-    // 获取输入文字
-    getInputText: function (text, encodeText = true) {
-      let returnText = /^yn(:| |\uff1a)?(.*)$/.exec(text)[2].trim()
-      return encodeText ? encodeXML(returnText) : returnText
-    },
-    // 搜索建议
-    getSuggestions: async function (text, suggest) {
-      return;
-    },
-    // 执行搜索
-    search: function (text) {
-
-    }
-  },
-  // #############################################################################################################
-  {
-    key: "re",
-    // 显示文字
-    showText: "网页内正则表达式搜索(Todo)",
-    // 搜索模式匹配
-    match: function (text) {
-      return /^re( |:|\uff1a)?/.test(text)
-    },
-    // 获取输入文字
-    getInputText: function (text, encodeText = true) {
-      let returnText = /^re(:| |\uff1a)?(.*)$/.exec(text)[2].trim()
-      return encodeText ? encodeXML(returnText) : returnText
-    },
-    // 搜索建议
-    getSuggestions: async function (text, suggest) {
-      return;
-    },
-    // 执行搜索
-    search: function (text) {
-
-    }
-  },
-  // #############################################################################################################
-  {
-    key: "ls",
-    // 显示文字
-    showText: "历史记录搜索",
-    // 搜索模式匹配
-    match: function (text) {
-      return /^ls( |:|\uff1a)?/.test(text)
-    },
-    // 获取输入文字
-    getInputText: function (text, encodeText = true) {
-      let returnText = /^ls(:| |\uff1a)?(.*)$/.exec(text)[2].trim()
-      return encodeText ? encodeXML(returnText) : returnText
-    },
-    // 搜索建议
-    getSuggestions: async function (text, suggest) {
-      return;
-    },
-    // 执行搜索
-    search: function (text) {
-      function onGot(historyItems) {
-        for (item of historyItems) {
-          console.log(item.url);
-          console.log(new Date(item.lastVisitTime));
-        }
-      }
-
-      var searching = browser.history.search({ text: text, startTime: 0 });
-
-      searching.then(onGot);
-    }
-  },
-  // #############################################################################################################
-  {
-    key: "img",
-    // 显示文字
-    showText: "图片搜索",
-    // 搜索模式匹配
-    match: function (text) {
-      return /^img( |:|\uff1a)?/.test(text)
-    },
-    // 获取输入文字
-    getInputText: function (text, encodeText = true) {
-      let returnText = /^img(:| |\uff1a)?(.*)$/.exec(text)[2].trim()
-      return encodeText ? encodeXML(returnText) : returnText
-    },
-    // 搜索建议
-    getSuggestions: async function (text, suggest) {
-      // 如果前面已经有了 【[xx] 】，则先去掉
-      text = text.replace(/^\[.*?\]\s*/, "");
-      suggest([
-        { content: "img: [百度] " + text, description: "使用 <url>[百度图片]</url> 搜索 <match>" + text + "</match>", deletable: false },
-        { content: "img: [搜狗] " + text, description: "使用 <url>[搜狗图片]</url> 搜索 <match>" + text + "</match>", deletable: false },
-        { content: "img: [必应] " + text, description: "使用 <url>[必应图片]</url> 搜索 <match>" + text + "</match>", deletable: false },
-        { content: "img: [360] " + text, description: "使用 <url>[360图片]</url> 搜索 <match>" + text + "</match>", deletable: false },
-        { content: "img: [微博] " + text, description: "使用 <url>[微博图片]</url> 搜索 <match>" + text + "</match>", deletable: false },
-        { content: "img: [中国搜索] " + text, description: "使用 <url>[中国搜索图片]</url> 搜索 <match>" + text + "</match>", deletable: false },
-      ]);
-      return;
-    },
-    // 执行搜索
-    search: function (text) {
-      let searchInput = /^(\[.*?\])?( )?(.*)$/.exec(text)
-      let searchType = /^\[(.*?)\]$/.exec((searchInput[1] ?? "[百度]"/* 默认百度图片搜索 */).trim())[0].trim()
-      let searchText = searchInput[3].trim()
-      console.log("[图片搜索开始]");
-      console.log("    传入参数为：", text);
-      console.log("    searchInput为：", searchInput);
-      console.log("    searchType为：", searchType);
-      console.log("    searchText为：", searchText);
-      switch (searchType) {
-        default:
-        case "[百度]":
-          navigate("https://image.baidu.com/search/index?tn=baiduimage&word=" + encodeURIComponent(searchText), true);
-          break;
-        case "[搜狗]":
-          navigate("https://pic.sogou.com/pics?query=" + encodeURIComponent(searchText), true);
-          break;
-        case "[必应]":
-          navigate("https://cn.bing.com/images/search?q=" + encodeURIComponent(searchText), true);
-          break;
-        case "[360]":
-          navigate("https://image.so.com/i?q=" + encodeURIComponent(searchText), true);
-          break;
-        case "[微博]":
-          navigate("https://s.weibo.com/pic?q=" + encodeURIComponent(searchText), true);
-          break;
-        case "[中国搜索]":
-          navigate("http://www.chinaso.com/newssearch/image?q=" + encodeURIComponent(searchText), true);
-          break;
-
-      }
-      console.log("[图片搜索结束]");
-    }
-  },
-  // #############################################################################################################
-  // Todo: 视频搜索
-  // {
-  //   key: "video",
-  //   // 显示文字
-  //   showText: "视频搜索",
-  //   // 搜索模式匹配
-  //   match: function (text) {
-  //     return /^video( |:|\uff1a)?/.test(text)
-  //   },
-  //   // 获取输入文字
-  //   getInputText: function (text, encodeText = true) {
-  //     let returnText = /^video(:| |\uff1a)?(.*)$/.exec(text)[2].trim()
-  //     return encodeText ? encodeXML(returnText) : returnText
-  //   },
-  //   // 搜索建议
-  //   getSuggestions: async function (text, suggest) {
-  //     // 如果前面已经有了 【[xx] 】，则先去掉
-  //     text = text.replace(/^\[.*?\]\s*/, "");
-  //     suggest([
-  //       { content: "video: [百度] " + text, description: "使用 <url>[百度视频]</url> 搜索 <match>" + text + "</match>", deletable: false },
-  //       { content: "video: [搜狗] " + text, description: "使用 <url>[搜狗视频]</url> 搜索 <match>" + text + "</match>", deletable: false },
-  //       { content: "video: [必应] " + text, description: "使用 <url>[必应视频]</url> 搜索 <match>" + text + "</match>", deletable: false },
-  //       { content: "video: [360] " + text, description: "使用 <url>[360视频]</url> 搜索 <match>" + text + "</match>", deletable: false },
-  //       { content: "video: [微博] " + text, description: "使用 <url>[微博视频]</url> 搜索 <match>" + text + "</match>", deletable: false },
-  //       { content: "video: [中国搜索] " + text, description: "使用 <url>[中国搜索视频]</url> 搜索 <match>" + text + "</match>", deletable: false },
-  //     ]);
-  //     return;
-  //   },
-  //   // 执行搜索
-  //   search: function (text) {
-  //     let searchInput = /^(\[.*?\])?( )?(.*)$/.exec(text)
-  //     let searchType = /^\[(.*?)\]$/.exec((searchInput[1] ?? "[百度]"/* 默认百度视频搜索 */).trim())[0].trim()
-  //     let searchText = searchInput[3].trim()
-  //     console.log("[视频搜索开始]");
-  //     console.log("    传入参数为：", text);
-  //     console.log("    searchInput为：", searchInput);
-  //     console.log("    searchType为：", searchType);
-  //     console.log("    searchText为：", searchText);
-  //     switch (searchType) {
-  //       default:
-  //       case "[百度]":
-  //         navigate("https://v.baidu.com/v?word=" + encodeURIComponent(searchText), true);
-  //         break;
-  //       case "[搜狗]":
-  //         navigate("https://pic.sogou.com/pics?query=" + encodeURIComponent(searchText), true);
-  //         break;
-  //       case "[必应]":
-  //         navigate("https://cn.bing.com/images/search?q=" + encodeURIComponent(searchText), true);
-  //         break;
-  //       case "[360]":
-  //         navigate("https://image.so.com/i?q=" + encodeURIComponent(searchText), true);
-  //         break;
-  //       case "[微博]":
-  //         navigate("https://s.weibo.com/pic?q=" + encodeURIComponent(searchText), true);
-  //         break;
-  //       case "[中国搜索]":
-  //         navigate("http://www.chinaso.com/newssearch/image?q=" + encodeURIComponent(searchText), true);
-  //         break;
-
-  //     }
-  //     console.log("[图片搜索结束]");
-  //   }
-  // },
-  // #############################################################################################################
-  {
-    key: "boss",
-    // 显示文字
-    showText: "召唤“学生助手”",
-    // 搜索模式匹配
-    match: function (text) {
-      // return text.trim() == "boss"
-      return /^boss( |:|\uff1a)?$/.test(text)
-    },
-    // 获取输入文字
-    getInputText: (text) => "回车执行",
-    // 搜索建议
-    getSuggestions: async function (text, suggest) {
-      return;
-    },
-    // 执行搜索
-    search: function (text) {
-
-    }
-  }
-]
-
-
-
-/**
- * ****************************************************************************************
- *
- * 全局变量定义部分
- *
- * ****************************************************************************************
- */
-// 当前匹配的搜索模式的下标
-var currentSearchModeIndex = 0;
-
-// 当前正在向服务端进行的请求
-var currentRequest = null;
-
-//
-var ajaxUrl = "https://www.baidu.com/s?wd=";
-
-
-
-/**
- * ****************************************************************************************
- *
- * 搜索模式配置部分
- *
- * ****************************************************************************************
- */
-
-/**
- * 用户开始输入文本
- */
-chrome.omnibox.onInputStarted.addListener(function () {
-  console.log("chrome.omnibox.onInputStarted");
-  updateDefaultSuggestion('');
-});
-
-/**
- * 搜索框失去焦点
- */
-chrome.omnibox.onInputCancelled.addListener(function () {
-  console.log("chrome.omnibox.onInputCancelled");
-  updateDefaultSuggestion('');
-});
-
-/**
- * 输入框文本改变事件
- */
-chrome.omnibox.onInputChanged.addListener(function (text, suggest) {
-  console.log("chrome.omnibox.onInputChanged", text);
-
-  // 停止上一次搜索行为
-  if (currentRequest != null) {
-    currentRequest.onreadystatechange = null;
-    currentRequest.abort();
-    currentRequest = null;
-  }
-
-  // 更新输入框回显提示信息
-  updateDefaultSuggestion(text);
-
-  // 如果啥也没有输入就返回
-  if (text.trim() == '')
-    return;
-
-  // 访问后端服务获得搜索建议
-  var currentSearchMode = omniboxSearchModes[currentSearchModeIndex];
-  currentSearchMode.getSuggestions(currentSearchMode.getInputText(text), suggest);
-});
-
-/**
- * 用户输入完成，按下回车键
- */
-chrome.omnibox.onInputEntered.addListener(function (text) {
-  console.log("chrome.omnibox.onInputEntered");
-
-  // 更新输入框回显提示信息
-  // 注意：这里必须还要更新一次，因为用户在输入时使用上下键选择suggest项目时，会触发 chrome.omnibox.onInputChanged 事件
-  //       如果不执行，那么输入 ss img 之后上下选择对应搜索，按回车会被解析为文字搜索，而不是图片搜索
-  updateDefaultSuggestion(text);
-
-  var searchMode = omniboxSearchModes[currentSearchModeIndex];
-  var searchText = searchMode.getInputText(text);
-  searchMode.search(searchText);
-  console.log("用户输入：" + text);
-});
-
-
-
-/**
- * ****************************************************************************************
- *
- * 公共函数部分
- *
- * ****************************************************************************************
- */
-
-/**
- * 将 & < > 等特殊字符转义，但保留中文不进行转义
- *
- * 测试通过: [ re：    百度&nbsp;<>!@#$%%^&*()_+-=[]{}|\:;'",./? ]
- *
- * refer: https://www.javaroad.cn/questions/108186
- * @param string str
- * @returns
- */
-function encodeXML(str) {
-  var holder = document.createElement('div');
-  holder.textContent = str;
-  return holder.innerHTML;
-}
-
-
-/**
- * 将当前标签页导航到指定Url / 或者新建标签页
- *
- * @param String url 要导航到的url
- * @param bool openInNewTab 是否打开新标签页
- */
-function navigate(url, openInNewTab = false) {
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    if (!openInNewTab || isCurrentNewTab()) {
-      // 如果不在新标签页打开，或者当前标签页是新标签页
-      chrome.tabs.update(tabs[0].id, { url: url });
-    } else {
-      // 如果在新标签页打开，且当前标签页不是新标签页
-      chrome.tabs.create({ url: url });
-    }
-  });
-}
-
-
-
-/**
- * 获取当前是否是新标签页
- */
-function isCurrentNewTab() {
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    if (tabs && tabs.length > 0 && !!tabs[0].url && /^(.*?):\/\/newtab\/$/.test(tabs[0].url)) {
-      console.log("当前标签页是新标签页");
-      return true;
-    }
-    else {
-      console.log("当前标签页不是新标签页");
-      return false;
-    }
-  });
-}
-
-
-
-/**
- * 更新下拉框中提示
- * @param String text 用户输入文本
- */
-function updateDefaultSuggestion(text) {
-
-  var description = [
-    '<match><url>搜索方式</url></match>',
-    '<dim> [ </dim>',
-    '' /* 文字搜索 显示文字占位 */
-  ];
-
-  // 如果用户输入不为空，先假设为文字搜索，如果后面匹配上了其他搜索方式，则更新
-  let isPlaintext = !!text.trim().length;
-  currentSearchModeIndex = 0; // 初始化搜索方式下标
-
-  // 默认第 0 个为文字搜索，除此之外的搜索方式如果都没有匹配到，则显示文字搜索
-  for (var i = 1, keyword; i < omniboxSearchModes.length; i++) {
-    keyword = omniboxSearchModes[i];
-
-    // 分隔符
-    description.push('<dim> \| </dim>');
-
-    // 通过用户输入文本匹配搜索方式
-    if (keyword.match(text)) {
-      // 是当前这种搜索模式
-      isPlaintext = false; // 说明不是文字搜索
-      currentSearchModeIndex = i; // 记录当前搜索模式的下标
-      description.push('<match>' + keyword.showText + '：' + keyword.getInputText(text) + '</match>');
-    } else {
-      // 不是当前这种搜索模式
-      description.push('<dim>' + keyword.key + ": " + keyword.showText + '</dim>');
-    }
-  }
-  description.push('<dim> ] </dim>');
-
-  description[2] = isPlaintext ? ('<match>' + text.trim() + '</match>') : ('<dim>' + omniboxSearchModes[0].showText + '</dim>');
-
-  console.log("[更新下拉框提示开始]");
-  console.log("    text：", text);
-  console.log("    当前匹配搜索模式：", omniboxSearchModes[currentSearchModeIndex].showText);
-  console.log("    isPlaintext：", isPlaintext);
-  // console.log(description.join(''));
-  console.log("[更新下拉框提示结束]");
-
-  chrome.omnibox.setDefaultSuggestion({
-    description: description.join('')
-  });
-
-  // var isRegex = /^re:/.test(text);
-  // var isFile = /^file:/.test(text);
-  // var isHalp = (text == 'halp');
-  // var isPlaintext = text.length && !isRegex && !isFile && !isHalp;
-
-  // var description = '<match><url>搜索方式</url></match><dim> [ </dim>';
-  // description += isPlaintext ? ('<match>' + text + '</match>') : '文字';
-  // description += '<dim> | </dim>';
-  // description += isRegex ? ('<match>' + text + '</match>') : 're: 正则';
-  // description += '<dim> | </dim>';
-  // description += isFile ? ('<match>' + text + '</match>') : 'file:文件';
-  // description += '<dim> | </dim>';
-  // description += isHalp ? '<match>halp</match>' : 'halp';
-  // description += '<dim> ]</dim>';
-
-  // chrome.omnibox.setDefaultSuggestion({
-  //   description: description
-  // });
-}
-
-
-// /**
-//  * 执行搜索
-//  * @param {*} query
-//  * @param {*} callback
-//  * @returns
-//  */
-// function search(query, callback) {
-
-//   var url = "https://code.google.com/p/chromium/codesearch#search/&type=cs&q=" + query +
-//     "&exact_package=chromium&type=cs";
-//   var req = new XMLHttpRequest();
-//   req.open("GET", url, true);
-//   req.setRequestHeader("GData-Version", "2");
-//   req.onreadystatechange = function () {
-//     if (req.readyState == 4) {
-//       callback(req.responseXML);
-//     }
-//   }
-//   req.send(null);
-//   return req;
-// }
-
-
-/**
- * ****************************************************************************************
- *
- * 测试代码及其他
- *
- * ****************************************************************************************
- */
-
-/*
-先抛砖。未来在 Chrome 中输入：Chrome 过去1年最重要的变化？ 知乎(或者zh)我们将带你进入问题页面，如果没有类似问题，就会直接提问。这个东西带来的想象力是，你可以用浏览器简单快捷的做不少事情，比如发微博，就输入「wb 知乎很给力」，京东购物，就输入「jd买 iPhone 4」。但很可能是一个相对小众的工具。
-
-作者：李申申
-链接：https://www.zhihu.com/question/19565733/answer/12236808
-来源：知乎
-著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
- */
--- a/packages/shell-chrome/assets/js/advanced-search/content.js
+++ b/packages/shell-chrome/assets/js/advanced-search/content.js
@@ -1 +0,0 @@
-console.log("[BitDance extension] 学生助手插件 - 高级搜索功能模块加载成功")
--- a/packages/shell-chrome/assets/js/background.js
+++ b/packages/shell-chrome/assets/js/background.js
@@ -1,30 +0,0 @@
-chrome.contextMenus.create({
-    id: 'bitdance',
-    title: '学生助手'
-})
-
-// chrome.contextMenus.onClicked.addListener(function (info) {
-//     alert('当前菜单信息:'+ JSON.stringify(info))
-// })
-
-
-
-//refer: https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/mv2-archive/api/notifications/background.js
-function showNotification() {
-    var time = /(..)(:..)/.exec(new Date());     // The prettyprinted time.
-    var hour = time[1] % 12 || 12;               // The prettyprinted hour.
-    var period = time[1] < 12 ? 'a.m.' : 'p.m.'; // The period of the day.
-    new Notification(hour + time[2] + ' ' + period, {
-        icon: '48.png',
-        body: 'Time to make the toast.'
-    });
-}
-
-chrome.contextMenus.create({
-    id: 'bitdance-advanced-search-notification',
-    title: 'Notification',
-    parentId: 'bitdance',
-    onclick: function (info) {
-        showNotification()
-    }
-})
--- a/packages/shell-chrome/assets/js/content.js
+++ b/packages/shell-chrome/assets/js/content.js
@@ -1 +0,0 @@
-console.log("[BitDance extension] 学生助手插件已启用")
--- a/packages/shell-chrome/assets/js/expand-full-text/expand.js
+++ b/packages/shell-chrome/assets/js/expand-full-text/expand.js
@@ -1,25 +0,0 @@
-/**
- * TODO: 实现CSDN自动展开全文
- */
-
-$(function() {
-    console.log("[BitDance extension] 学生助手插件 - CSDN阅读全文自动展开模块加载成功");
-    // 全文自动展开
-    function removeDOM(querySelector) {
-        let element = document.querySelector(querySelector)
-        if (element != null) {
-            element.parentNode.removeChild(element);
-        }
-    }
-    removeDOM(".hide-article-box");
-    $(".article_content").removeAttr('style');
-    window.onload = () => {
-        // 代码块自动展开
-        document.querySelectorAll("pre").forEach(targetNode => {
-            removeDOM(".hide-preCode-box");
-            if (targetNode.classList.contains("set-code-hide")) {
-                targetNode.classList.remove("set-code-hide");
-            }
-        })
-    }
-})
--- a/packages/shell-chrome/assets/js/lib/jquery.min.js
+++ b/packages/shell-chrome/assets/js/lib/jquery.min.js
--- a/packages/shell-chrome/assets/js/lib/vue.js
+++ b/packages/shell-chrome/assets/js/lib/vue.js
--- a/packages/shell-chrome/assets/js/mouse-effects/click.js
+++ b/packages/shell-chrome/assets/js/mouse-effects/click.js
@@ -1,94 +0,0 @@
-/**
- * TODO: 鼠标点击效果
- */
-
-$(function() {
-    console.log("[BitDance extension] 学生助手插件 - 点击特效模块加载成功");
-
-    // 每次改变开关状态时刷新页面使功能及时生效
-    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-        location.reload();
-        sendResponse('Reload page');
-    })
-
-    // 控制功能是否开启
-    chrome.storage.sync.get('clickState', function(budget) {
-        // 得到按钮开关状态
-        if (budget.clickState == false || budget.clickState == undefined) {
-            // console.log('click功能启动');
-            var hearts = [];
-
-            walk();
-
-            // 走起（初始化）
-            function walk() {
-                // 灵魂 css
-                css(".heart{width: 10px;height: 10px;position: fixed;background: pink;transform: rotate(45deg);}.heart::after,.heart::before{position: absolute;content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;}.heart::after{top: -5px;}.heart::before{left: -5px;}");
-                attachEvent();
-                gameloop();
-            }
-
-            // 动画效果
-            function gameloop() {
-                for (var i = 0; i < hearts.length; i++) {
-                    if (hearts[i].alpha <= 0) {
-                        document.body.removeChild(hearts[i].el);
-                        hearts.splice(i, 1);
-                        continue;
-                    }
-                    hearts[i].y--;
-                    hearts[i].scale += 0.004;
-                    hearts[i].alpha -= 0.013;
-                    hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
-                }
-                // refer: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
-                requestAnimationFrame(gameloop);
-            }
-
-            function attachEvent() {
-                // 点击触发特效（♥）
-                window.onclick = function(event) {
-                    createHeart(event);
-                }
-            }
-
-            function createHeart(event) {
-                // 创建一个 div 并指定类名为 heart
-                var d = document.createElement("div");
-                d.className = "heart";
-                /**
-                 * @param el: 每个 div 的标识
-                 * @param x,y: 当前鼠标位置信息
-                 * @param scale: 放大系数
-                 * @param alpha: 透明度
-                 * @param color: 背景颜色
-                 */
-                hearts.push({
-                    el: d,
-                    x: event.clientX,
-                    y: event.clientY,
-                    scale: 1,
-                    alpha: 1,
-                    color: randomColor()
-                });
-                document.body.appendChild(d);
-            }
-
-            // 给网页加个 style 标签
-            function css(css) {
-                // 创建 style 标签
-                var style = document.createElement("style");
-                style.type = "text/css";
-                // css 内容注入
-                style.appendChild(document.createTextNode(css));
-
-                document.head.appendChild(style);
-            }
-
-            // 生成随机颜色
-            function randomColor() {
-                return "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")";
-            }
-        }
-    });
-})
--- a/packages/shell-chrome/assets/js/mouse-effects/mouse-style.js
+++ b/packages/shell-chrome/assets/js/mouse-effects/mouse-style.js
@@ -1,19 +0,0 @@
-/**
- * TODO: 鼠标样式
- */
-
-$(function() {
-    console.log("[BitDance extension] 学生助手插件 - 鼠标样式模块加载成功");
-    walk();
-
-    // 走起
-    function walk() {
-        changeMouse();
-    }
-
-    function changeMouse() {
-        $('*').hover(function() {
-            $(this).css("cursor", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c%0A6QAABPxJREFUWEe9lltIalkYx9feak1hDBonIvVM0ZyKLmAM3YyIqB6KCgrK%0Abj710G1gKooJJrCYiB4q6qHefIgoKoaChpiieojQJIWiy0GygzaO0RVhSDTb%0Ae+1hOSlb3d56aL+Iur/1/db3/77/Whj4/6kGAOgAAPq37x/2gQEAyrRa7V9s%0ANhuTSqXk5eXlGUVRTR8FgwC+HB0dfc3JyWG7tq3RaAiZTAY/AgYBgNTU1Bed%0AThfBVHcE09DQQFxfX1+EUJkoAMAnAMDfoWroBMAwTAsh/ClYUACYIQzDfkeg%0ACQkJ5Pz8PG6xWB4oihIEW9MJwCRDsECVSoUqQ97c3BgrKioSNzc3I+kxZrMZ%0AikQinKIoVw7GJd1/BpLBH8zr6ysVHx9Pra2tUS0tLS9CoRBfW1vjJCQksFDM%0Azs4OUV1dPffy8vKLvzXcAKHKQF9ILpeTVVVVFL2B9/f3SQSTlJSEraysRAiF%0AQlagKtDL4zMNwWSoqakhNzY2nLtlehBMSUkJAtgDAKDRfvB+z0OfcGUYHx9/%0ALS4uxgoKCtwj7J0Ax3EAIQR7e3tEc3MzcX9/r6TDeAC8RwYulwufn59xpgos%0ALi46Li4u8LGxMQ9ABINM7+npSeTdoWHLMDIyQqhUKmp7e5tDhzg9PSXFYjEG%0AIWSEQw0cExMz5TMiiYmJNoPB8F0w/en/Ly0tvba2tnIKCgpIkUhEra6u4vn5%0A+VClUjFKgyojk8msFEXxfQDeIwMdBu2Mw+Ewzr5WqyXz8vIICOGPAIB/nCbI%0AsNMvSqXyq0Qi8dtYTNVBLri6usoYY7FYkCkRVqu1CtkDPZ6RVCAQ2A0GQ8To%0A6Cg8Pj4GEokEDg4OemjsDVFbW0vy+XxSoVC4zxRUjeTkZIfJZPoVADDDBM4I%0AgGGYjsfjfdna2oLIZA4PD4ny8nJ8YGAAyuXyoCOHEvX19dlnZ2f/dDgcDYH6%0AiQlgqLKycmh4eJhFdzi0SFlZmaO9vZ2qr6/38H2RSARvb28JkiQj5ubmHB0d%0AHc4qZGdn205OTlJceodUAQzDKGQcaWlpdp1O5zMNLmPp6uoiULPNzMyw0G96%0AvZ64uroCubm5OI/Hc49eMAjvCkRJpdJ/l5eX2fn5+Xa1Wu0DUFhYSCqVSqf9%0ASiQSQq1Ws6Ojo6FCoYBSqZRRnjeIH4JaMQDgc29v7+XU1FSk0WgkHx4ePA4a%0AlLSxsZFYWFhg0UetqamJnJiYwAQCAaPp0OTwgfDpAdTJT09PzoWYZMBxHPpz%0At2DmlZWVZTs/P/eAYDIis8lkike7KSoqsh0cHKBrlvNB9trW1gY0Go37BOzp%0A6bFNT0+73wkXwt8YIm8nMjIyMLPZ7JThzT7Z9N2jOedyuX+kp6dXHR8fvwvC%0A73UpMjJyxuFw/AwAcMoxODhIeJ9qSUlJdqPRiBILxWLxZTgQKSkpdr1eHxXw%0AvvZWzl2Kokq9S4vslc/n99EcLiyIycnJ1/7+/u9DAfi8u7v7rbS01GPEuFyu%0Aw2q1ehgSupKLxeLrYJVYX1931NXVyQEA46EAgLi4ONvd3Z3bE9CplpOTU+F9%0AsLxVKSAEPbm/05CpkT1kYLFYLxDCQHeGT5mZmddnZ2cejemdPBwAtwxoGlpb%0AW5MD+burEnQIpuThAIDY2Fj74+NjJI7jFnSTCTbvdIjOzk68u7t7GGnuHRdS%0AD7gWw3H8NwhhT4jJ6a8hKWxMcf8BWQiA/lSw+WUAAAAASUVORK5CYII=), crosshair");
-        });
-    }
-})
--- a/packages/shell-chrome/assets/js/popup.js
+++ b/packages/shell-chrome/assets/js/popup.js
--- a/packages/shell-chrome/background.js
+++ b/packages/shell-chrome/background.js
@@ -0,0 +1,95 @@
+// 设置截图方法和存储方法。
+chrome.storage.sync.get((config) => {
+  chrome.storage.sync.set({method: 'crop'});
+  chrome.storage.sync.set({format: 'png'});
+  chrome.storage.sync.set({save: 'file'});
+  chrome.storage.sync.set({dpr: true});
+  if (config.save === 'clipboard') {
+    config.save = 'url'
+    chrome.storage.sync.set({save: 'url'})
+  }
+})
+  // 定义inject函数，（点击图标就执行）
+function inject (tab) {
+
+  chrome.tabs.sendMessage(tab.id, {message: 'init'}, (res) => {
+    if (res) {
+      // 停止植入css和js文件。
+      clearTimeout(timeout)
+    }
+  })
+
+// 植入css和js文件
+  var timeout = setTimeout(() => {
+    chrome.tabs.insertCSS(tab.id, {file: 'css/jquery.Jcrop.min.css', runAt: 'document_start'})
+    chrome.tabs.insertCSS(tab.id, {file: 'css/content.css', runAt: 'document_start'})
+    chrome.tabs.executeScript(tab.id, {file: 'js/jquery.min.js', runAt: 'document_start'})
+    chrome.tabs.executeScript(tab.id, {file: 'js/jquery.Jcrop.min.js', runAt: 'document_start'})
+    chrome.tabs.executeScript(tab.id, {file: 'js/content.js', runAt: 'document_start'})
+    // 间隔发送"init"message
+    setTimeout(() => {
+      chrome.tabs.sendMessage(tab.id, {message: 'init'})
+    }, 100)
+  }, 100)
+}
+
+// 点击图标后就执行函数inject
+chrome.browserAction.onClicked.addListener((tab) => {
+  inject(tab)
+})
+chrome.runtime.onMessage.addListener((req, sender, res) => {
+  if (req.message === 'capture') {
+    chrome.storage.sync.get((config) => {
+      chrome.tabs.getSelected(null, (tab) => {
+        chrome.tabs.captureVisibleTab(tab.windowId, {format: config.format}, (image) => {
+              crop(image, req.area, req.dpr, config.dpr, config.format, (cropped) => {
+                res({message: 'image', image: cropped})
+              })
+        })
+      })
+    })
+  }
+  else if (req.message === 'active') {
+    if (req.active) {
+          chrome.browserAction.setTitle({tabId: sender.tab.id, title: 'Crop and Save'})
+          // chrome.browserAction.setBadgeText({tabId: sender.tab.id, text: '◩'})
+    }
+    else {
+      chrome.browserAction.setTitle({tabId: sender.tab.id, title: 'Screenshot Capture'})
+      // chrome.browserAction.setBadgeText({tabId: sender.tab.id, text: ''})
+    }
+  }
+  return true
+})
+
+function crop (image, area, dpr, preserve, format, done) {
+  var top = area.y * dpr
+  var left = area.x * dpr
+  var width = area.w * dpr
+  var height = area.h * dpr
+  var w = (dpr !== 1 && preserve) ? width : area.w
+  var h = (dpr !== 1 && preserve) ? height : area.h
+
+  var canvas = null
+  if (!canvas) {
+    canvas = document.createElement('canvas')
+    document.body.appendChild(canvas)
+  }
+  canvas.width = w
+  canvas.height = h
+
+  var img = new Image()
+  img.onload = () => {
+    var context = canvas.getContext('2d')
+    context.drawImage(img,
+      left, top,
+      width, height,
+      0, 0,
+      w, h
+    )
+
+    var cropped = canvas.toDataURL(`image/${format}`)
+    done(cropped)
+  }
+  img.src = image
+}
--- a/packages/shell-chrome/css/content.css
+++ b/packages/shell-chrome/css/content.css
@@ -0,0 +1,18 @@
+
+img#fake-image,
+.jcrop-holder,
+.jcrop-holder img,
+.jcrop-tracker {
+  width: 100% !important; height: 100% !important;
+  max-width: 100% !important; max-height: 100% !important;
+  min-width: 100% !important; min-height: 100% !important;
+}
+
+img#fake-image {
+  position: fixed; top: 0; left: 0; z-index: 1;
+}
+
+.jcrop-holder {
+  position: fixed !important; top: 0 !important; left: 0 !important;
+  z-index: 2147483647 !important;
+}
--- a/packages/shell-chrome/css/icons.ttf
+++ b/packages/shell-chrome/css/icons.ttf
--- a/packages/shell-chrome/css/jquery.Jcrop.min.css
+++ b/packages/shell-chrome/css/jquery.Jcrop.min.css
@@ -0,0 +1,146 @@
+/* jquery.Jcrop.min.css v0.9.12 (build:20140524) */
+.jcrop-holder {
+  direction: ltr;
+  text-align: left;
+  -ms-touch-action: none;
+}
+.jcrop-hline,
+.jcrop-vline {
+  background-color: #fff;
+  font-size: 0;
+  position: absolute;
+}
+.jcrop-vline {
+  height: 100%;
+  width: 1px !important;
+}
+.jcrop-vline.right {
+  right: 0;
+}
+.jcrop-hline {
+  height: 1px !important;
+  width: 100%;
+}
+.jcrop-hline.bottom {
+  bottom: 0;
+}
+.jcrop-tracker {
+  height: 100%;
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+}
+.jcrop-handle {
+  background-color: #333;
+  border: 1px #eee solid;
+  width: 7px;
+  height: 7px;
+  font-size: 1px;
+}
+.jcrop-handle.ord-n {
+  left: 50%;
+  margin-left: -4px;
+  margin-top: -4px;
+  top: 0;
+}
+.jcrop-handle.ord-s {
+  bottom: 0;
+  left: 50%;
+  margin-bottom: -4px;
+  margin-left: -4px;
+}
+.jcrop-handle.ord-e {
+  margin-right: -4px;
+  margin-top: -4px;
+  right: 0;
+  top: 50%;
+}
+.jcrop-handle.ord-w {
+  left: 0;
+  margin-left: -4px;
+  margin-top: -4px;
+  top: 50%;
+}
+.jcrop-handle.ord-nw {
+  left: 0;
+  margin-left: -4px;
+  margin-top: -4px;
+  top: 0;
+}
+.jcrop-handle.ord-ne {
+  margin-right: -4px;
+  margin-top: -4px;
+  right: 0;
+  top: 0;
+}
+.jcrop-handle.ord-se {
+  bottom: 0;
+  margin-bottom: -4px;
+  margin-right: -4px;
+  right: 0;
+}
+.jcrop-handle.ord-sw {
+  bottom: 0;
+  left: 0;
+  margin-bottom: -4px;
+  margin-left: -4px;
+}
+.jcrop-dragbar.ord-n,
+.jcrop-dragbar.ord-s {
+  height: 7px;
+  width: 100%;
+}
+.jcrop-dragbar.ord-e,
+.jcrop-dragbar.ord-w {
+  height: 100%;
+  width: 7px;
+}
+.jcrop-dragbar.ord-n {
+  margin-top: -4px;
+}
+.jcrop-dragbar.ord-s {
+  bottom: 0;
+  margin-bottom: -4px;
+}
+.jcrop-dragbar.ord-e {
+  margin-right: -4px;
+  right: 0;
+}
+.jcrop-dragbar.ord-w {
+  margin-left: -4px;
+}
+.jcrop-light .jcrop-hline,
+.jcrop-light .jcrop-vline {
+  background: #fff;
+  filter: alpha(opacity=70) !important;
+  opacity: 0.7 !important;
+}
+.jcrop-light .jcrop-handle {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  background-color: #000;
+  border-color: #fff;
+  border-radius: 3px;
+}
+.jcrop-dark .jcrop-hline,
+.jcrop-dark .jcrop-vline {
+  background: #000;
+  filter: alpha(opacity=70) !important;
+  opacity: 0.7 !important;
+}
+.jcrop-dark .jcrop-handle {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  background-color: #fff;
+  border-color: #000;
+  border-radius: 3px;
+}
+.solid-line .jcrop-hline,
+.solid-line .jcrop-vline {
+  background: #fff;
+}
+.jcrop-holder img,
+img.jcrop-preview {
+  max-width: none;
+}
--- a/packages/shell-chrome/images/Jcrop.gif
+++ b/packages/shell-chrome/images/Jcrop.gif
--- a/packages/shell-chrome/images/pixel.png
+++ b/packages/shell-chrome/images/pixel.png
--- a/packages/shell-chrome/index.js
+++ b/packages/shell-chrome/index.js
@@ -1 +0,0 @@
-console.log('Hello World');
--- a/packages/shell-chrome/js/content.js
+++ b/packages/shell-chrome/js/content.js
@@ -0,0 +1,121 @@
+
+var jcrop,selection
+
+var overlay = ((active) => (state) => {
+  active = typeof state === 'boolean' ? state : state === null ? active : !active
+  $('.jcrop-holder')[active ? 'show' : 'hide']()
+  chrome.runtime.sendMessage({message: 'active', active})
+})(false)
+
+var image = (done) => {
+  var image = new Image()
+  image.id = 'fake-image'
+  image.src = chrome.runtime.getURL('/images/pixel.png')
+  image.onload = () => {
+    $('body').append(image)
+    done()
+  }
+}
+
+var init = (done) => {
+  $('#fake-image').Jcrop({
+    bgColor: 'none',
+    onSelect: (e) => {
+      selection = e
+      capture()
+    },
+    onChange: (e) => {
+      selection = e
+    },
+    onRelease: (e) => {
+      setTimeout(() => {
+        selection = null
+      }, 100)
+    }
+  }, function ready () {
+    jcrop = this
+
+    $('.jcrop-hline, .jcrop-vline').css({
+      backgroundImage: `url(${chrome.runtime.getURL('/images/Jcrop.gif')})`
+    })
+
+    if (selection) {
+      jcrop.setSelect([
+        selection.x, selection.y,
+        selection.x2, selection.y2
+      ])
+    }
+
+    done && done()
+  })
+}
+
+var capture = (force) => {
+  chrome.storage.sync.get((config) => {
+    if (selection && (config.method === 'crop' || (config.method === 'wait' && force))) {
+      jcrop.release()
+      setTimeout(() => {
+        chrome.runtime.sendMessage({
+          message: 'capture', area: selection, dpr: devicePixelRatio
+        }, (res) => {
+          overlay(false)
+          selection = null
+          save(res.image, config.format, config.save)
+        })
+      }, 50)
+    }
+    else if (config.method === 'view') {
+      chrome.runtime.sendMessage({
+        message: 'capture',
+        area: {x: 0, y: 0, w: innerWidth, h: innerHeight}, dpr: devicePixelRatio
+      }, (res) => {
+        overlay(false)
+        save(res.image, config.format, config.save)
+      })
+    }
+  })
+}
+
+var filename = (format) => {
+  var pad = (n) => (n = n + '', n.length >= 2 ? n : `0${n}`)
+  var ext = (format) => format === 'jpeg' ? 'jpg' : format === 'png' ? 'png' : 'png'
+  var timestamp = (now) =>
+    [pad(now.getFullYear()), pad(now.getMonth() + 1), pad(now.getDate())].join('-')
+    + ' - ' +
+    [pad(now.getHours()), pad(now.getMinutes()), pad(now.getSeconds())].join('-')
+  return `Screenshot Capture - ${timestamp(new Date())}.${ext(format)}`
+}
+
+var save = (image, format, save) => {
+    var link = document.createElement('a')
+    link.download = filename(format)
+    link.href = image
+    link.click()
+  
+}
+
+window.addEventListener('resize', ((timeout) => () => {
+  clearTimeout(timeout)
+  timeout = setTimeout(() => {
+    jcrop.destroy()
+    init(() => overlay(null))
+  }, 100)
+})())
+
+chrome.runtime.onMessage.addListener((req, sender, res) => {
+  if (req.message === 'init') {
+    res({}) // prevent re-injecting
+
+    if (!jcrop) {
+      image(() => init(() => {
+        overlay()
+        capture()
+      }))
+    }
+    else {
+      overlay()
+      capture(true)
+    }
+  }
+  return true
+})
--- a/packages/shell-chrome/js/jquery.Jcrop.min.js
+++ b/packages/shell-chrome/js/jquery.Jcrop.min.js
--- a/packages/shell-chrome/js/jquery.min.js
+++ b/packages/shell-chrome/js/jquery.min.js
--- a/packages/shell-chrome/manifest.json
+++ b/packages/shell-chrome/manifest.json
@@ -1,81 +1,36 @@
 {
-  "name": "学生助手",
-  "version": "0.1.0",
-  "description": "BitDance Chrome Extension",
  "manifest_version": 2,
-  "omnibox": {
-    "keyword": "ss"
-  },
-  "icons": {
-    "16": "assets/image/logo.png",
-    "48": "assets/image/logo.png",
-    "128": "assets/image/logo.png"
-  },
-  "background": {
-    "scripts": [
-      "assets/js/lib/jquery.min.js",
-      "assets/js/background.js",
-      "assets/js/advanced-search/background.js"
-    ]
-  },
-  "content_scripts": [
-    {
-      "matches": [
-        "<all_urls>",
-        "*://*/*"
-      ],
-      "js": [
-        "assets/js/lib/jquery.min.js",
-        "assets/js/content.js",
-        "assets/js/advanced-search/content.js",
-        "assets/js/mouse-effects/click.js",
-        "assets/js/mouse-effects/mouse-style.js"
-      ],
-      "css": [],
-      "run_at": "document_start"
-    },
-    {
-      "matches": [
-        "http://blog.csdn.net/*",
-        "https://blog.csdn.net/*"
-      ],
-      "js": [
-        "assets/js/lib/jquery.min.js",
-        "assets/js/expand-full-text/expand.js" //,
-        // "assets/js/content-scripts/click.js",
-        // "assets/js/content-scripts/mouse-style.js"
-      ],
-      "run_at": "document_start"
-    }
-  ],
+  "name"            : "Screenshot Capture",
+  "version"         : "2.0",
+  "description"     : "Screenshot Capture",
+
  "browser_action": {
-    "default_icon": "assets/image/logo.png",
-    "default_popup": "popup.html",
-    "default_title": "学生助手"
+    
+    "default_title": "Screenshot Capture"
  },
+
+  "background" : {
+    "scripts": [
+      "background.js"
+    ],
+    "persistent": false
+  },
+
+  "web_accessible_resources": [
+    "/images/Jcrop.gif",
+    "/images/pixel.png"
+  ],
+
  "commands": {
-    "_execute_browser_action": {
+    "take-screenshot": {
      "suggested_key": {
-        "default": "Alt+Comma",
-        "mac": "Alt+Comma"
+        "default": "Alt+S"
      },
-      "description": "打开 [学生助手] 插件"
+      "description": "Take Screenshot"
    }
  },
-  "web_accessible_resources": [
-    "/assets/image/*"
-  ],
-  // "default_locale": "zh_CN",
  "permissions": [
-    "background",
-    "contextMenus",
    "storage",
-    "unlimitedStorage",
-    "webRequest",
-    "webRequestBlocking",
-    "tabs",
-    "storage",
-    "activeTab",
-    "notifications"
+    "activeTab"
  ]
 }
--- a/packages/shell-chrome/package.json
+++ b/packages/shell-chrome/package.json
@@ -1,7 +0,0 @@
-{
-  "name": "@bitdance/shell-chrome",
-  "version": "0.0.0",
-  "scripts": {
-    "test": "node index.js"
-  }
-}
--- a/packages/shell-chrome/popup.html
+++ b/packages/shell-chrome/popup.html
@@ -1,42 +0,0 @@
-<!doctype html>
-<html lang="zh">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <title>BitDance</title>
-    <link href="assets/css/main.css" type="text/css" rel="stylesheet">
-</head>
-
-<body>
-    <div id="popup">
-        <header>
-            <img src="assets/image/logo.png" alt="Logo">
-        </header>
-        <div class="article">
-            <ul>
-                <li>
-                    <div id="expand">
-                    </div>
-                </li>
-                <li>
-                    <div id="mouse-style">
-                    </div>
-                </li>
-                <li>
-                    <div id="click-per">
-                        <span>点击特效</span>
-                        <div class="button">
-                            <input type="checkbox" id="button-3" class="checkbox" />
-                            <div class="knobs"></div>
-                            <div class="layer"></div>
-                        </div>
-                    </div>
-                </li>
-            </ul>
-        </div>
-    </div>
-    <!-- <script src="assets/js/lib/jquery.min.js"></script> -->
-    <!-- <script src="assets/js/popup.js"></script> -->
-</body>
-
-</html>
--- a/packages/shell-chrome/project.json
+++ b/packages/shell-chrome/project.json
@@ -1,3 +0,0 @@
-{
-  "root": "packages\\shell-chrome"
-}
				`@@ -1 +0,0 @@`
				`console.log("[BitDance extension] 学生助手插件 - 高级搜索功能模块加载成功")`