完成快速引用插件

mp-fastquote/css/main.css

@@ -22,13 +22,12 @@
 
 #__extend_fast_quote #__extend_fastquote_container #_____mp_fastquote  {
     position: fixed;
-    width: 500px;
-    height: 70%;
+    width: 60%;
     top: 10%;
     z-index: 999;
     background-image: linear-gradient(125deg, rgb(239 223 143), rgb(235 209 84), rgb(122 60 25));
     background-size: 400%;
-    left:calc((100% - 500px)/2);
+    left: 20%;
     color: #23283f;
     padding-top: 10px;
 }
@@ -82,7 +81,6 @@
     border: 1px solid transparent;
     display: inline-block;
     padding: 6px 12px;
-    margin-bottom: 0;
     font-size: 14px;
     font-weight: normal;
     line-height: 1.42857143;
@@ -99,4 +97,5 @@
     background-image: none;
     border-radius: 4px;
     color: #ffffff;
+    margin-bottom: 20px;
 }
\ No newline at end of file

mp-fastquote/html/index.html

+
 <div id="_____mp_fastquote" class="row">
+    <div class="" style="position: absolute;top: -24px;right: -24px;z-index: 9999;">
+        <img id="closeBtn" style="width: 48px;height: 48px;" >
+    </div>
+
         <div class="col-12">
             <h4>添加有米使用记录</h4>
         </div>

mp-fastquote/js/main.js

@@ -2,29 +2,43 @@ let ACCESS_TOKEN = "";
 let host ="https://api.mepai.me/manage";
 let UI =  chrome.runtime.getURL("/html/index.html")
 let icon = chrome.runtime.getURL("/images/icon.png")
+let closePng = chrome.runtime.getURL("/images/close.png")
 let extendDom = document.createElement("div");
 extendDom.id = "__extend_fast_quote"
-extendDom.innerHTML = "<div class='icon'><div><img src='" + icon + "'/></div></div>";
+var iconDom = document.createElement("div")
+iconDom.innerHTML = "<div><img src='" + icon + "'/></div>"
+iconDom.setAttribute("class", "icon");
+extendDom.appendChild(iconDom)
 extendDom.style = "z-index:999;";
+let isShow = false;
 var body = document.getElementById("__nuxt");
+let container = document.createElement("div");
+container.id = "__extend_fastquote_container";
+container.style.display = "none";
+iconDom.onclick = function () {
+    prop();
+}
+
 fetch(UI).then(function(res) {
     return res.text();
 }).then(html => {
-    let container = document.createElement("div");
-    container.id = "__extend_fastquote_container";
     container.innerHTML = html;
     extendDom.appendChild(container)
     body.appendChild(extendDom);
-}).then(() => {
-
-});
-
-function showUi() {
-
-}
-
-function hiddenUi() {
+    var closeDom = document.getElementById("closeBtn");
+    closeDom.setAttribute("src", closePng);
+    closeDom.onclick = function () {
+        prop();
+    }
+})
 
+function prop() {
+    if (isShow) {
+        container.style.display = "none";
+    } else {
+        container.style.display = "block";
+    }
+    isShow = !isShow
 }
 
 function getWorksId() {
@@ -165,7 +179,6 @@ function goNext() {
     var quoteCountDom = document.getElementById("quoteCount");
     var statusDom = document.getElementById("status");
     var worksDom = document.getElementById("worksId");
-
     getChannels(function(res) {
         var channels = res;
         for (var i in channels) {
@@ -175,7 +188,6 @@ function goNext() {
             channelDom.appendChild(d)
         }
     });
-
     getManagers(function(res) {
         var managers = res;
         for (var i in managers) {
@@ -187,7 +199,6 @@ function goNext() {
     });
     todayInput.value = getToday();
     worksDom.value =  getWorksId();
-
     var sendBtn = document.getElementById("send")
     sendBtn.onclick = function () {
         var postData = {
@@ -208,7 +219,8 @@ function goNext() {
                 alert(res.message);
                 return;
             }
-            alert("操作成功")
+            alert("操作成功");
+            prop();
             return ;
         });
     }

mp-fastquote/manifest.json

@@ -23,7 +23,8 @@
     {
       "resources": [
         "html/index.html",
-        "images/icon.png"
+        "images/icon.png",
+        "images/close.png"
       ],
       "matches": [
         "*://*.mepai.me/*"