diff --git a/ASoulCnki/background.js b/ASoulCnki/background.js
new file mode 100644
index 0000000..90c808a
--- /dev/null
+++ b/ASoulCnki/background.js
@@ -0,0 +1,92 @@
+//let color = '#3aa757';
+
+
+//chrome.runtime.onInstalled.addListener(() => {
+//  chrome.storage.sync.set({ color });
+//  console.log('Default background color set to %cgreen', `color: ${color}`);
+//});
+//https://api.bilibili.com/x/relation/followings?vmid=5468612&pn=1&ps=20&order=desc&order_type=attention&jsonp=jsonp&callback=__jp5
+
+
+function renderPage() {
+  let userNames = document.querySelectorAll("a.name");
+  for (let user of userNames) {
+    let bid = user.dataset.usercardMid;
+    let tmp = document.getElementById("fanType" + bid)
+    if(tmp !=null){
+      tmp.remove();
+    }
+    let htmlText = "<button id=\"fanType" + bid + "\" data-bid=\"" + bid + "\">成分查询</button>"
+    user.parentElement.innerHTML = user.parentElement.innerHTML + htmlText;
+    let fanType = document.getElementById("fanType" + bid);
+    fanType.addEventListener("click", function (event) {
+      let ava = { "name": "顶晚人", "icon": "", "color": "#9AC8E2", "bid": "672346917" };
+      let bella = { "name": "贝极星", "icon": "", "color": "#DB7D74", "bid": "672353429" };
+      let carol = { "name": "皇珈骑士", "icon": "", "color": "#B8A6D9", "bid": "351609538" };
+      let diana = { "name": "嘉心糖", "icon": "", "color": "#E799B0", "bid": "672328094" };
+      let eileen = { "name": "乃淇淋", "icon": "", "color": "#576690", "bid": "672342685" };
+      let user = event.target;
+      let bid = user.dataset.bid;
+      var step;
+      
+      console.log(step);
+      let followingList = "https://api.bilibili.com/x/relation/followings?vmid=" + bid + "&pn=1&ps=2000&order=desc&order_type=attention&jsonp=jsonp";//&callback=__jp5";
+      var xhr = new XMLHttpRequest();
+      xhr.open('get', followingList);
+      xhr.withCredentials = true;
+      xhr.send(null);
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState != 4) return;
+        if (xhr.readyState == 4 && xhr.status == 200) {
+          var res = xhr.responseText;
+          var result = JSON.parse(res);
+          if (result.code === 22115) {
+            console.log("无法查看用户关注列表");
+            user.innerHTML = "未公开";
+            return;
+          }
+          let tags = "";
+          console.log(result.data.list);
+          result.data.list.forEach(element => {
+            if (String(element.mid) === ava.bid) {
+              tags += ava.name;
+              console.log("a");
+            }
+            if (String(element.mid) === bella.bid) {
+              tags += bella.name;
+              console.log("b");
+            }
+            if (String(element.mid) === carol.bid) {
+              tags += carol.name;
+              console.log("c");
+            }
+            if (String(element.mid) === diana.bid) {
+              tags += diana.name;
+              console.log("d");
+            }
+            if (String(element.mid) === eileen.bid) {
+              tags += eileen.name;
+              console.log("e");
+            }
+          });
+          if (tags === "") {
+            user.innerHTML = "纯路人";
+          } else {
+            user.innerHTML = tags;
+          }
+        }
+      }
+
+    });
+  }
+}
+
+chrome.action.onClicked.addListener((tab) => {
+  chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    function: renderPage
+  });
+});
+
+
+
diff --git a/ASoulCnki/button.css b/ASoulCnki/button.css
new file mode 100644
index 0000000..a9946e2
--- /dev/null
+++ b/ASoulCnki/button.css
@@ -0,0 +1,13 @@
+button {
+    height: 30px;
+    width: 30px;
+    outline: none;
+    margin: 10px;
+    border: none;
+    border-radius: 2px;
+  }
+  
+  button.current {
+    box-shadow: 0 0 0 2px white,
+                0 0 0 4px black;
+  }
\ No newline at end of file
diff --git a/ASoulCnki/images/index.png b/ASoulCnki/images/index.png
new file mode 100644
index 0000000..d3a4da4
Binary files /dev/null and b/ASoulCnki/images/index.png differ
diff --git a/ASoulCnki/index.html b/ASoulCnki/index.html
new file mode 100644
index 0000000..4850c9a
--- /dev/null
+++ b/ASoulCnki/index.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="button.css">
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <button id="changeColor"></button>
+    <script src="popup.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/ASoulCnki/manifest.json b/ASoulCnki/manifest.json
new file mode 100644
index 0000000..cf8999c
--- /dev/null
+++ b/ASoulCnki/manifest.json
@@ -0,0 +1,35 @@
+{
+    "name": "Asoul Extensions",
+    "description": "mark asoul fan",
+    "version": "1.0",
+    "manifest_version": 3,
+    "action": {
+        //"default_popup": "index.html",
+        "default_icon": {
+            "16": "/images/index.png",
+            "32": "/images/index.png",
+            "48": "/images/index.png",
+            "128": "/images/index.png"
+          }
+    },
+    "commands": {
+        "_execute_action": {
+            "suggested_key": {
+                "default": "Ctrl+Shift+F",
+                "mac": "MacCtrl+Shift+F"
+            },
+            "description": "Opens index.html"
+        }
+    },
+    "background": {
+        "service_worker": "background.js"
+    },
+    "options_page": "options.html",
+    "permissions": ["storage", "activeTab", "scripting"],
+    "icons": {
+      "16": "/images/index.png",
+      "32": "/images/index.png",
+      "48": "/images/index.png",
+      "128": "/images/index.png"
+    }
+}
\ No newline at end of file
diff --git a/ASoulCnki/options.html b/ASoulCnki/options.html
new file mode 100644
index 0000000..e78da45
--- /dev/null
+++ b/ASoulCnki/options.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html5 >
+  <head>
+    <link rel="stylesheet" href="button.css">
+    <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
+  </head>
+  <body>
+    <div id="buttonDiv">
+    </div>
+    <div>
+      <p>选择要标记的一个魂</p>
+    </div>
+  </body>
+  <script src="options.js" type="text/javascript"></script>
+</html5>
\ No newline at end of file
diff --git a/ASoulCnki/options.js b/ASoulCnki/options.js
new file mode 100644
index 0000000..6015284
--- /dev/null
+++ b/ASoulCnki/options.js
@@ -0,0 +1,61 @@
+
+let page = document.getElementById("buttonDiv");
+let selectedClassName = "current";
+const presetButtonColors = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"];
+
+let ava = {"name":"顶晚人","icon":"","color":"#9AC8E2","bid":"672346917"};
+let bella = {"name":"贝极星","icon":"","color":"#DB7D74","bid":"672353429"};
+let carol = {"name":"皇珈骑士","icon":"","color":"#B8A6D9","bid":"351609538"};
+let diana = {"name":"嘉心糖","icon":"","color":"#E799B0","bid":"672328094"};
+let eileen = {"name":"乃淇淋","icon":"","color":"#576690","bid":"672342685"};
+
+const asoul = [ava,bella,carol,diana,eileen];
+
+// Reacts to a button click by marking the selected button and saving
+// the selection
+function handleButtonClick(event) {
+  // Remove styling from the previously selected color
+  let current = event.target.parentElement.querySelector(
+    `.${selectedClassName}`
+  );
+  if (current && current !== event.target) {
+    current.classList.remove(selectedClassName);
+  }
+
+  // Mark the button as selected
+  let color = event.target.dataset.color;
+  event.target.classList.add(selectedClassName);
+  console.log(color);
+  chrome.storage.sync.set({ color });
+}
+
+// Add a button to the page for each supplied color
+function constructOptions(buttonColors) {
+  chrome.storage.sync.get("color", (data) => {
+    let currentColor = data.color;
+    // For each color we were provided…
+    for (let buttonColor of buttonColors) {
+      // …create a button with that color…
+      let button = document.createElement("button");
+      let name = document.createTextNode("name");
+      button.dataset.color = buttonColor.color;
+      name.textContent = buttonColor.name;
+      let idol = document.createElement("idol");
+      idol.appendChild(button);
+      idol.appendChild(name);
+      button.style.backgroundColor = buttonColor.color;
+      // …mark the currently selected color…
+      if (buttonColor === currentColor) {
+        button.classList.add(selectedClassName);
+      }
+
+      // …and register a listener for when that button is clicked
+      button.addEventListener("click", handleButtonClick);
+      page.appendChild(idol);
+    }
+  });
+}
+
+// Initialize the page by constructing the color options
+//constructOptions(presetButtonColors);
+constructOptions(asoul);
\ No newline at end of file
diff --git a/ASoulCnki/popup.js b/ASoulCnki/popup.js
new file mode 100644
index 0000000..6828a0e
--- /dev/null
+++ b/ASoulCnki/popup.js
@@ -0,0 +1,73 @@
+let changeColor = document.getElementById("changeColor");
+
+
+
+chrome.storage.sync.get("color", ({ color }) => {
+  changeColor.style.backgroundColor = color;
+});
+
+// When the button is clicked, inject setPageBackgroundColor into current page
+changeColor.addEventListener("click", async () => {
+  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+
+  chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    function: setPageBackgroundColor,
+  });
+});
+
+
+// The body of this function will be executed as a content script inside the
+// current page
+function setPageBackgroundColor() {
+  chrome.storage.sync.get("color", ({ color }) => {
+    //document.body.style.backgroundColor = color;
+    let users = document.querySelectorAll("a.name");
+    let bid = "5468612";
+    let followingList = "https://api.bilibili.com/x/relation/followings?vmid=" + bid + "&pn=1&ps=2000&order=desc&order_type=attention&jsonp=jsonp";//&callback=__jp5";
+    var xhr = new XMLHttpRequest();
+    xhr.open('get', followingList);
+    xhr.withCredentials = true;
+    xhr.send(null);
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState != 4) return;
+      if (xhr.readyState == 4 && xhr.status == 200) {
+        var res = xhr.responseText;
+        var result = JSON.parse(res);
+        console.log(result);
+        if(result.code === 22115){
+          console.log("无法查看用户关注列表")
+        }
+        result.data.list.forEach(element => {
+          if (element.mid === 351609538) {
+            console.log("皇珈骑士");
+          }
+        });
+      } else {
+        console.error('服务器错误');
+      }
+    }
+    /*for (let user of users) {
+    console.log(user);
+    let bid = user.dataset.usercardMid;
+    console.log(bid);
+    let followingList = "https://api.bilibili.com/x/relation/followings?vmid=" + bid + "&pn=1&ps=2000&order=desc&order_type=attention&jsonp=jsonp&callback=__jp5";
+    let ref = "https://space.bilibili.com/"+bid+"/fans/follow";
+    var xhr = new XMLHttpRequest();
+    xhr.open('get', followingList);
+    xhr.withCredentials = true;
+    xhr.setRequestHeader('Referer', ref);
+    xhr.send(null);
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState != 4) return;
+      if (xhr.readyState == 4 && xhr.status == 200) {
+        var res = xhr.responseText;
+        console.log(res);
+      } else {
+        console.error('服务器错误');
+      }
+    }
+  }*/
+  });
+}
+
diff --git a/MarkFan/background.js b/MarkFan/background.js
new file mode 100644
index 0000000..b511cbf
--- /dev/null
+++ b/MarkFan/background.js
@@ -0,0 +1,83 @@
+
+function renderPage() {
+  let userNames = document.querySelectorAll("a.name");
+  for (let user of userNames) {
+    let bid = user.dataset.usercardMid;
+    let tmp = document.getElementById("fanType" + bid)
+    if(tmp !=null){
+      tmp.remove();
+    }
+    let htmlText = "<button id=\"fanType" + bid + "\" data-bid=\"" + bid + "\">成分查询</button>"
+    user.parentElement.innerHTML = user.parentElement.innerHTML + htmlText;
+    let fanType = document.getElementById("fanType" + bid);
+    fanType.addEventListener("click", function (event) {
+      let ava = { "name": "顶晚人", "icon": "", "color": "#9AC8E2", "bid": "672346917" };
+      let bella = { "name": "贝极星", "icon": "", "color": "#DB7D74", "bid": "672353429" };
+      let carol = { "name": "皇珈骑士", "icon": "", "color": "#B8A6D9", "bid": "351609538" };
+      let diana = { "name": "嘉心糖", "icon": "", "color": "#E799B0", "bid": "672328094" };
+      let eileen = { "name": "乃淇淋", "icon": "", "color": "#576690", "bid": "672342685" };
+      let user = event.target;
+      let bid = user.dataset.bid;
+      var step;
+      
+      console.log(step);
+      let followingList = "https://api.bilibili.com/x/relation/followings?vmid=" + bid + "&pn=1&ps=2000&order=desc&order_type=attention&jsonp=jsonp";//&callback=__jp5";
+      var xhr = new XMLHttpRequest();
+      xhr.open('get', followingList);
+      xhr.withCredentials = true;
+      xhr.send(null);
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState != 4) return;
+        if (xhr.readyState == 4 && xhr.status == 200) {
+          var res = xhr.responseText;
+          var result = JSON.parse(res);
+          if (result.code === 22115) {
+            console.log("无法查看用户关注列表");
+            user.innerHTML = "未公开";
+            return;
+          }
+          let tags = "";
+          console.log(result.data.list);
+          result.data.list.forEach(element => {
+            if (String(element.mid) === ava.bid) {
+              tags += "<p style=\"color:"+ava.color+"\">"+ava.name+"</p>";
+              console.log("a");
+            }
+            if (String(element.mid) === bella.bid) {
+              tags += "<p style=\"color:"+bella.color+"\">"+bella.name+"</p>";
+              console.log("b");
+            }
+            if (String(element.mid) === carol.bid) {
+              tags += "<p style=\"color:"+carol.color+"\">"+carol.name+"</p>";
+              console.log("c");
+            }
+            if (String(element.mid) === diana.bid) {
+              tags += "<p style=\"color:"+diana.color+"\">"+diana.name+"</p>";
+              console.log("d");
+            }
+            if (String(element.mid) === eileen.bid) {
+              tags += "<p style=\"color:"+eileen.color+"\">"+eileen.name+"</p>";
+              console.log("e");
+            }
+          });
+          if (tags === "") {
+            user.innerHTML = "纯路人";
+          } else {
+            user.innerHTML = tags;
+          }
+        }
+      }
+
+    });
+  }
+}
+
+chrome.action.onClicked.addListener((tab) => {
+  chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    function: renderPage
+  });
+});
+
+
+
diff --git a/MarkFan/images/index.png b/MarkFan/images/index.png
new file mode 100644
index 0000000..d3a4da4
Binary files /dev/null and b/MarkFan/images/index.png differ
diff --git a/MarkFan/manifest.json b/MarkFan/manifest.json
new file mode 100644
index 0000000..a7ba9c7
--- /dev/null
+++ b/MarkFan/manifest.json
@@ -0,0 +1,34 @@
+{
+    "name": "Asoul Extensions",
+    "description": "mark asoul fan",
+    "version": "1.0",
+    "manifest_version": 3,
+    "action": {
+        //"default_popup": "index.html",
+        "default_icon": {
+            "16": "/images/index.png",
+            "32": "/images/index.png",
+            "48": "/images/index.png",
+            "128": "/images/index.png"
+          }
+    },
+    "commands": {
+        "_execute_action": {
+            "suggested_key": {
+                "default": "Ctrl+Shift+F",
+                "mac": "MacCtrl+Shift+F"
+            },
+            "description": "Opens index.html"
+        }
+    },
+    "background": {
+        "service_worker": "background.js"
+    },
+    "permissions": ["storage", "activeTab", "scripting"],
+    "icons": {
+      "16": "/images/index.png",
+      "32": "/images/index.png",
+      "48": "/images/index.png",
+      "128": "/images/index.png"
+    }
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index ad0b86d..a6bbb7c 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,7 @@
 # asoul-fan-chrome-extensions
 专门为asoul粉丝娱乐用的chrome插件
+
+## 列表
+
+* MarkFan 标记粉丝成分，一眼识别评论区嘉心糖，顶晚人，奶淇淋，贝极星，皇家骑士，小心诈骗链接（受限于Bilibili api限制，只能拿到最近50个关注，存在误标，仅供娱乐）
+* ASoulCnki（开发中） 枝网浏览器插件，无需打开其他网页，一键识别
\ No newline at end of file