分享当前页面

css/main.css

@@ -12,12 +12,14 @@ button, input, textarea {
 input:focus::-moz-placeholder ,.common-editor-inputer:focus::-moz-placeholder {
     color: #d3d3d3
 }
-
+input::placeholder ,.common-editor-inputer::placeholder {
+    color: #999;
+}
 input:focus::placeholder ,.common-editor-inputer:focus::placeholder {
     color: #d3d3d3
 }
 .body{
-    min-width:350px;
+    min-width:460px;
     background-color: #f6f5f4;
     padding:0 1rem 1rem;
     font-family: eafont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,STHeiti,WenQuanYi Micro Hei,Helvetica,Arial,sans-serif;
@@ -37,7 +39,7 @@ input:focus::placeholder ,.common-editor-inputer:focus::placeholder {
     border-radius: .5rem;
     background-color: rgb(255,255,255);
     margin-top:0.8rem;
-    padding: 0.8rem;
+    padding: 0.6rem;
     transition-property: all;
     transition-timing-function: cubic-bezier(.4,0,.2,1);
     transition-duration: .15s;
@@ -45,8 +47,6 @@ input:focus::placeholder ,.common-editor-inputer:focus::placeholder {
 .btns-container{text-align:right;}
 .common-editor-inputer,input.inputer{
     font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
-    margin-top: .25rem;
-    margin-bottom: .25rem;
     height: 100%;
     width: 100%;
     resize: none;
@@ -56,22 +56,29 @@ input:focus::placeholder ,.common-editor-inputer:focus::placeholder {
     background-color: transparent;
     font-size: 1rem;
     min-height: 40px;
-    max-height: 300px;
+    max-height: 400px;
     scrollbar-width: none;
+    line-height: 1.5rem;
 }
 input.inputer{border-bottom: 1px solid #ccc;width:75%;}
 
 #saveKey{margin:0;flex:1;}
+
 .common-tools-wrapper {
     position: relative;
     display: flex;
     width: 100%;
     flex-direction: row;
     align-items: center;
-    justify-content: space-between;
     margin-top: 1rem;
+    justify-content: space-between;
+}
+.common-tools-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
 }
-
 .confirm-btn {
     display: inline-flex;
     cursor: pointer;
@@ -99,9 +106,9 @@ input.inputer{border-bottom: 1px solid #ccc;width:75%;}
 }
 
 svg.icon{width:24px;height:24px;}
-
+#tags,#getlink{margin-right: .5rem;}
-#tags svg{opacity: 0.6;}
+#tags svg,#getlink svg{opacity: 0.6;}
-#tags:hover svg{opacity: 1;cursor: pointer;}
+#tags:hover svg,#getlink:hover svg{opacity: 1;cursor: pointer;}
 
 #taglist{display: none;}
 .tag-list {

html/popup.html

@@ -31,18 +31,18 @@
     <div class="memo-editor">
       <textarea
         class="common-editor-inputer"
-        rows="2"
+        rows="4"
         name="text"
         id="content"
         placeholder="现在的想法是..."
         required=""
-        style="height:80px;"
       ></textarea>
     </div>
 
   <div class="common-tools-wrapper">
-    <div id="tags">
+    <div class="common-tools-container">
-      <svg t="1665297587288" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="692" width="32" height="32"><path d="M128 341.333333m42.666667 0l682.666666 0q42.666667 0 42.666667 42.666667l0 0q0 42.666667-42.666667 42.666667l-682.666666 0q-42.666667 0-42.666667-42.666667l0 0q0-42.666667 42.666667-42.666667Z" fill="#666666" p-id="693"></path><path d="M422.613333 85.333333H426.666667a38.613333 38.613333 0 0 1 38.4 42.453334L387.84 900.266667a42.666667 42.666667 0 0 1-42.453333 38.4H341.333333a38.613333 38.613333 0 0 1-38.4-42.453334L380.16 123.733333a42.666667 42.666667 0 0 1 42.453333-38.4zM678.613333 85.333333H682.666667a38.613333 38.613333 0 0 1 38.4 42.453334L643.84 900.266667a42.666667 42.666667 0 0 1-42.453333 38.4H597.333333a38.613333 38.613333 0 0 1-38.4-42.453334L636.16 123.733333a42.666667 42.666667 0 0 1 42.453333-38.4z" fill="#666666" p-id="694"></path><path d="M128 597.333333m42.666667 0l682.666666 0q42.666667 0 42.666667 42.666667l0 0q0 42.666667-42.666667 42.666667l-682.666666 0q-42.666667 0-42.666667-42.666667l0 0q0-42.666667 42.666667-42.666667Z" fill="#666666" p-id="695"></path></svg>
+      <div id="tags"><svg t="1665297587288" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="692" width="32" height="32"><path d="M128 341.333333m42.666667 0l682.666666 0q42.666667 0 42.666667 42.666667l0 0q0 42.666667-42.666667 42.666667l-682.666666 0q-42.666667 0-42.666667-42.666667l0 0q0-42.666667 42.666667-42.666667Z" fill="#666666" p-id="693"></path><path d="M422.613333 85.333333H426.666667a38.613333 38.613333 0 0 1 38.4 42.453334L387.84 900.266667a42.666667 42.666667 0 0 1-42.453333 38.4H341.333333a38.613333 38.613333 0 0 1-38.4-42.453334L380.16 123.733333a42.666667 42.666667 0 0 1 42.453333-38.4zM678.613333 85.333333H682.666667a38.613333 38.613333 0 0 1 38.4 42.453334L643.84 900.266667a42.666667 42.666667 0 0 1-42.453333 38.4H597.333333a38.613333 38.613333 0 0 1-38.4-42.453334L636.16 123.733333a42.666667 42.666667 0 0 1 42.453333-38.4z" fill="#666666" p-id="694"></path><path d="M128 597.333333m42.666667 0l682.666666 0q42.666667 0 42.666667 42.666667l0 0q0 42.666667-42.666667 42.666667l-682.666666 0q-42.666667 0-42.666667-42.666667l0 0q0-42.666667 42.666667-42.666667Z" fill="#666666" p-id="695"></path></svg></div>
+      <div id="getlink"><svg t="1665404941848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5788" width="32" height="32"><path d="M599.552 696.832l-1.024 1.024c-1.024 1.024-61.952 50.176-93.696 75.776-41.472 33.28-93.184 48.64-145.92 43.008s-100.352-31.232-133.632-72.704c-69.12-84.992-55.808-210.944 29.696-279.552l99.328-80.896-46.08-57.344-99.328 80.896c-116.736 94.72-134.656 266.752-39.936 383.488 45.568 56.32 111.104 91.648 183.296 99.328 9.728 1.024 19.456 1.536 29.184 1.536 62.464 0 121.856-20.992 171.008-60.928l94.208-76.288-45.568-56.32-1.536-1.024zM856.064 232.96c-94.208-116.224-266.24-134.656-383.488-39.936l-90.112 73.216 46.08 57.344 90.112-73.216c84.992-69.12 210.944-55.808 279.552 29.696 69.12 85.504 55.808 210.944-29.696 279.552l-95.744 77.312-1.024 1.024 46.08 57.344 96.768-78.336c56.832-46.08 92.16-111.104 99.84-183.808 8.192-72.192-12.8-143.36-58.368-200.192z" p-id="5789" fill="#666666" ></path><path d="M388.096 667.648l305.664-254.464 1.024-1.024-47.616-56.32-305.664 254.976-1.024 0.512z" p-id="5790" fill="#666666" ></path></svg></div>
     </div>
     <div class="btns-container" type="submit" name="submit" id="submit">
       <button id="content_submit_text" class="action-btn confirm-btn">记下<img class="icon-img" src="../assets/logo_24x24.png"></button>

js/oper.js

@@ -62,6 +62,16 @@ $(document).on("click",".item-container",function () {
   var tagHtml = $(this).text()+" "
   add(tagHtml);
 })
+$('#getlink').click(function () {
+  chrome.tabs.getSelected(null, function (tab) {
+    var linkHtml = " ["+tab.title+"]("+tab.url+") "
+    if(tab.url){
+      add(linkHtml);
+    }else{
+      $.message({message: '获取失败 😂'})
+    }
+  });
+})
 
 function add(str) {
   var tc = document.getElementById("content");
@@ -107,44 +117,48 @@ function get_info(callback) {
 
 //发送操作
 $('#content_submit_text').click(function () {
-  sendText()
+  var contentVal = $('#content').val()
+  if(contentVal){
+    sendText()
+  }else{
+    $.message({message: '写点什么，再记呗？'})
+  }
 })
 function sendText() {
   get_info(function (info) {
     if (info.status) {
       //信息满足了
-      $.message({message: '发送中'})
+      $.message({message: '发送中～～'})
-      $("#content_submit_text").attr('disabled','disabled');
+      //$("#content_submit_text").attr('disabled','disabled');
       let content = $('#content').val()
-$.ajax({
+      $.ajax({
-  url:info.apiUrl,
+        url:info.apiUrl,
-  type:"POST",
+        type:"POST",
-  data:JSON.stringify({'content': content}),
+        data:JSON.stringify({'content': content}),
-  contentType:"application/json;",
+        contentType:"application/json;",
-  dataType:"json",
+        dataType:"json",
-  success: function(result){
+        success: function(result){
-        //发送成功
+              //发送成功
-        chrome.storage.sync.set(
+              chrome.storage.sync.set(
-          { open_action: '', open_content: '' },
+                { open_action: '', open_content: '' },
-          function () {
+                function () {
-            $.message({
+                  $.message({
-              message: '发送成功！'
+                    message: '发送成功！😊'
-            })
+                  })
-            $("#content_submit_text").removeAttr('disabled');
+                  //$("#content_submit_text").removeAttr('disabled');
-            $('#content').val('')
+                  $('#content').val('')
-          }
+                }
-    )
+          )
-  },
+      },error:function(err){//清空open_action（打开时候进行的操作）,同时清空open_content
-  error:function(err){//清空open_action（打开时候进行的操作）,同时清空open_content
+              chrome.storage.sync.set(
-        chrome.storage.sync.set(
+                { open_action: '', open_content: '' },
-          { open_action: '', open_content: '' },
+                function () {
-          function () {
+                  $.message({
-            $.message({
+                    message: '网络问题，发送失败！😭'
-              message: '网络问题发送成功！'
+                  })
-            })
+                }
-          }
+              )},
-        )},
+      })
-})      
     } else {
       $.message({
         message: '请先填写好 API 链接'