complete

Author: greycodee

README.md

@@ -1,2 +1,27 @@
-# flomo-code
-flomo 浮墨笔记 代码高亮显示插件
+![](./images/flomo128.png)
+
+# Flomo Code
+
+Flomo Code 是一款 Chrome 扩展程序，为您的 Flomo 笔记提供代码语法高亮功能。
+
+## 安装
+
+您可以从 [Release](https://github.com/greycodee/flomo-code/releases/) 下载安装 Flomo Code。
+
+## 使用
+
+要使用 Flomo Code，只需在 Flomo 笔记中添加 Markdown 代码块，点击 flomo 页面右下角`绿色按钮`，即可突出显示语法。
+
+### before
+![](./images/before.png)
+
+### after
+![](./images/after.png)
+
+## 贡献
+
+欢迎贡献！如果您发现错误或有功能请求，请在 [GitHub 存储库](https://github.com/greycodee/flomo-code) 上打开 Issue。
+
+## 许可证
+
+Flomo Code 在 [MIT 许可证](https://opensource.org/licenses/MIT) 下获得许可。

content.js

@@ -1,89 +1,77 @@
 window.onload = function () {
   const hljsbtn = document.createElement("button");
-  hljsbtn.innerHTML = "点击";
+  const img = document.createElement("img");
+  img.src = chrome.runtime.getURL("images/code.svg");
+  img.style.height = "20px";
+  img.style.width = "20px";
+  
+  hljsbtn.appendChild(img);
+
+  // hljsbtn.innerHTML = "点击";
   hljsbtn.type = "button";
-  hljsbtn.backgroundColor = "red";
-  hljsbtn.style.height = "20px";
-  hljsbtn.style.width = "40px";
-  // hljsbtn.style.position = 'fixed';
-  // hljsbtn.style.top = '100px';
-  // hljsbtn.style.left = '10';
+  hljsbtn.style.height = "36px";
+  hljsbtn.style.width = "36px";
+  hljsbtn.style.borderRadius = "36px";
+  hljsbtn.style.border = "none";
+  hljsbtn.style.backgroundColor = "#397354";
+  hljsbtn.style.color = "#fff";
+  hljsbtn.style.cursor = "pointer";
+  hljsbtn.style.position = "fixed";
+  hljsbtn.style.bottom = "60px";
+  hljsbtn.style.right = "30px";
+  hljsbtn.style.zIndex = "9999";
+  hljsbtn.style.display = "flex";
+  hljsbtn.style.justifyContent = "center";
+  hljsbtn.style.alignItems = "center";
 
   hljsbtn.addEventListener("click", () => {
+    console.log("点击了");
     const memos = document.getElementsByClassName("richText");
     const memos_array = Array.from(memos);
     console.log(memos_array.length);
     memos_array.forEach((memo) => {
-      const memo_p = memo.getElementsByTagName("p");
-      const memo_p_array = Array.from(memo_p);
-
-      const newRichText = document.createElement("div");
+      let children = memo.children;
+      console.log(children);
+      const memo_p_array = Array.from(children);
       let languageFlag = false;
-
-      let codeArr = [];
+      let codeContentArr = [];
       let languageType = "";
       for (let i = 0; i < memo_p_array.length; i++) {
         if (
           memo_p_array[i].innerHTML.startsWith("```") &&
           memo_p_array[i].innerHTML.substring(3) != ""
         ) {
+          languageType = "language-" + memo_p_array[i].innerHTML.substring(3);
           languageFlag = true;
-          let language = memo_p_array[i].innerHTML.substring(3);
-          languageType = "language-" + language;
+          memo.removeChild(memo_p_array[i]);
           continue;
         } else if (
           memo_p_array[i].innerHTML.startsWith("```") &&
           memo_p_array[i].innerHTML.substring(3) === ""
         ) {
+          // memo.removeChild(memo_p_array[i]);
           languageFlag = false;
-
           let pre = document.createElement("pre");
           let code = document.createElement("code");
-          code.innerHTML = codeArr.join("\n");
+          code.innerHTML = codeContentArr.join("\n");
           code.className = languageType;
           pre.appendChild(code);
-          newRichText.appendChild(pre);
+          memo_p_array[i].innerHTML = "";
+          memo_p_array[i].appendChild(pre);
+          // memo.appendChild(pre);
           //清空数组
-          codeArr = [];
+          codeContentArr = [];
           languageType = "";
           continue;
-        }
-
-        if (languageFlag) {
-          // code.innerHTML = code.innerHTML + memo_p_array[i].innerHTML;
-          codeArr.push(memo_p_array[i].innerHTML);
         } else {
-          let newP = document.createElement("p");
-          newP.innerHTML = memo_p_array[i].innerHTML;
-          newRichText.appendChild(newP);
+          if (languageFlag) {
+            codeContentArr.push(memo_p_array[i].innerHTML);
+            memo.removeChild(memo_p_array[i]);
+          }
         }
       }
-      memo.innerHTML = newRichText.innerHTML;
     });
     hljs.highlightAll();
   });
-
-  // document.body.appendChild(hljsbtn);
-
-  const memos = document.getElementsByClassName("memos")[0];
-  memos.appendChild(hljsbtn);
-
-  const send = document.createElement("button");
-  send.innerHTML = "发送";
-  send.type = "button";
-  send.style.height = "20px";
-  send.style.width = "40px";
-  send.addEventListener("click", () => {
-    chrome.runtime.sendMessage("get-user-data", (response) => {
-      // alert(response.username);
-    //   console.error(response.username);
-      initializeUI(response);
-    });
-  });
-  memos.appendChild(send);
-//   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-//     if (message === "refresh") {
-//         sendResponse("123ffff");
-//     }
-//   });
+  document.body.appendChild(hljsbtn);
 };

images/after.png

@@ -1,19 +1,23 @@
 {
-  "name": "My Chrome Extension",
+  "name": "flomo code",
   "version": "1.0",
   "manifest_version": 3,
-  "description": "This is my first Chrome extension!",
-  "permissions": [
-    "nativeMessaging"
-  ],
+  "description": "flomo md代码块高亮插件",
+  "icons": {
+
+    "128": "images/flomo128.png"
+  },
   "content_scripts": [
     {
       "matches": ["https://v.flomoapp.com/*"],
-      "js": ["content.js","highlight.min.js"],
-      "css": ["highlight.min.css"]
+      "js": ["content.js","include/highlight.min.js"],
+      "css": ["include/highlight.min.css"]
     }
   ],
-  "background": {
-    "service_worker": "service-worker.js"
-  }
+  "web_accessible_resources": [
+    {
+      "resources": ["images/*"],
+      "matches": ["https://v.flomoapp.com/*"]
+    }
+  ]
 }