temp

bookmark_front/src/App.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: "App",
+  name: "App"
 };
 </script>
 
@@ -17,7 +17,7 @@ body {
   margin: 0;
   padding: 0;
   font-size: 100px;
-  background-color: @bgColor;
+  // background-color: @bgColor;
   height: initial;
 }
 #app {

bookmark_front/src/router/index.js

@@ -1,13 +1,14 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import * as vuex from "../store/index.js";
-import { GLOBAL_CONFIG, SUPPORT_NO_LOGIN, TOKEN } from "@/store/modules/globalConfig";
+import { GLOBAL_CONFIG, SUPPORT_NO_LOGIN, TOKEN, setToken } from "@/store/modules/globalConfig";
 import { checkJwtValid } from "@/util/UserUtil";
 
 Vue.use(VueRouter);
 
 const routes = [
   { path: "/", component: () => import("@/views/home/index") },
+  { path: "/noHead/addBookmark", component: () => import("@/views/noHead/addBookmark/index") },
   {
     path: "/manage",
     component: () => import("@/views/manage/index"),
@@ -15,7 +16,7 @@ const routes = [
       { path: "", redirect: "/manage/bookmarkTree" },
       { path: "bookmarkTree", component: () => import("@/views/manage/bookmarkTree/index") },
       { path: "personSpace/userInfo", component: () => import("@/views/manage/personSpace/index") },
-      { path: "sso", component: () => import("@/views/manage/sso/index") }
+      { path: "sso/auth", component: () => import("@/views/manage/sso/auth/index") }
     ]
   },
   {
@@ -42,8 +43,12 @@ const router = new VueRouter({
  * 在此进行登录信息判断，以及重定向到登录页面
  */
 router.beforeEach(async (to, from, next) => {
-  //进入主页面/管理页面时，确认已经进行初始化操作
+  if (to.query.token && checkJwtValid(to.query.token)) {
-  if (to.path === "/" || to.path.startsWith("/manage")) {
+    console.log("获取到页面token", to.query.token);
+    await vuex.default.dispatch(GLOBAL_CONFIG + "/" + setToken, to.query.token);
+  }
+  //进入除/public以外的路由，确认已经进行初始化操作
+  if (!to.path.startsWith("/public")) {
     await vuex.loginInit();
   }
   let supportNoLogin = to.path === "/" || to.path.startsWith("/public");

bookmark_front/src/store/modules/globalConfig.js

@@ -11,95 +11,100 @@ export const IS_PHONE = "isPhone";
 
 export const noLoginInit = "noLoginInit";
 export const loginInit = "loginInit";
+/**
+ * 登出清除数据
+ */
 export const clear = "clear";
+/**
+ * 设置token
+ */
+export const setToken = "setToken";
 /**
  * 存储全局配置
  */
 const state = {
-	/**
+  /**
-	 * 用户信息
+   * 用户信息
-	 */
+   */
-	[USER_INFO]: null,
+  [USER_INFO]: null,
-	/**
+  /**
-	 * token,null说明未获取登录凭证
+   * token,null说明未获取登录凭证
-	 */
+   */
-	[TOKEN]: null,
+  [TOKEN]: null,
-	/**
+  /**
-	 * 是否已经初始化完成,避免多次重复初始化
+   * 是否已经初始化完成,避免多次重复初始化
-	 */
+   */
-	[IS_INIT]: false,
+  [IS_INIT]: false,
-	/**
+  /**
-	 * 是否移动端
+   * 是否移动端
-	 */
+   */
-	[IS_PHONE]: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
+  [IS_PHONE]: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
-	/**
+  /**
-	 * 是否支持未登录进入页面
+   * 是否支持未登录进入页面
-	 */
+   */
-	[SUPPORT_NO_LOGIN]: false,
+  [SUPPORT_NO_LOGIN]: false,
-	/**
+  /**
-	 * 服务端全局配置
+   * 服务端全局配置
-	 */
+   */
-	[SERVER_CONFIG]: {}
+  [SERVER_CONFIG]: {}
 };
 
 const getters = {};
 
 const actions = {
-	//未登录需要进行的初始化
+  //未登录需要进行的初始化
-	async [noLoginInit] ({ commit }) {
+  async [noLoginInit]({ commit }) {
-		commit(SERVER_CONFIG, await HttpUtil.get("/common/config/global"));
+    commit(SERVER_CONFIG, await HttpUtil.get("/common/config/global"));
-		let token = await localforage.getItem(TOKEN);
+    let token = await localforage.getItem(TOKEN);
-		if (token) {
+    if (token) {
-			commit(TOKEN, token);
+      commit(TOKEN, token);
-			window.jwtToken = token;
+      window.jwtToken = token;
-		}
+    }
-	},
+  },
-	//登陆后的，初始化数据
+  //登陆后的，初始化数据
-	async [loginInit] (context) {
+  async [loginInit](context) {
-		if (context.state.isInit) {
+    if (context.state.isInit) {
-			return;
+      return;
-		}
+    }
-		let userInfo = await HttpUtil.get("/user/currentUserInfo");
+    let userInfo = await HttpUtil.get("/user/currentUserInfo");
-		context.commit(USER_INFO, userInfo);
+    context.commit(USER_INFO, userInfo);
-		context.commit(IS_INIT, true);
+    context.commit(IS_INIT, true);
-	},
+  },
-	async setToken ({ commit }, token) {
+  async [setToken]({ commit }, token) {
-		await localforage.setItem(TOKEN, token);
+    await localforage.setItem(TOKEN, token);
-		window.jwtToken = token;
+    window.jwtToken = token;
-		commit(TOKEN, token);
+    commit(TOKEN, token);
-	},
+  },
-	//登出清除数据
+  async [clear](context) {
-	async [clear] (context) {
+    await localforage.removeItem(TOKEN);
-		await localforage.removeItem(TOKEN);
+    context.commit(USER_INFO, null);
-		context.commit(USER_INFO, null);
+    context.commit(TOKEN, null);
-		context.commit(TOKEN, null);
+    context.commit(IS_INIT, false);
-		context.commit(IS_INIT, false);
+  }
-	},
 };
 
 const mutations = {
-	[USER_INFO] (state, userInfo) {
+  [USER_INFO](state, userInfo) {
-		state[USER_INFO] = userInfo;
+    state[USER_INFO] = userInfo;
-	},
+  },
-	[TOKEN] (state, token) {
+  [TOKEN](state, token) {
-		state[TOKEN] = token;
+    state[TOKEN] = token;
-	},
+  },
-	[IS_INIT] (state, isInit) {
+  [IS_INIT](state, isInit) {
-		state[IS_INIT] = isInit;
+    state[IS_INIT] = isInit;
-	},
+  },
-	[SERVER_CONFIG] (state, serverConfig) {
+  [SERVER_CONFIG](state, serverConfig) {
-		state[SERVER_CONFIG] = serverConfig;
+    state[SERVER_CONFIG] = serverConfig;
-	},
+  },
-	[SUPPORT_NO_LOGIN] (state, val) {
+  [SUPPORT_NO_LOGIN](state, val) {
-		state[SUPPORT_NO_LOGIN] = val;
+    state[SUPPORT_NO_LOGIN] = val;
-	}
+  }
 };
 
-
 export const store = {
-	namespaced: true,
+  namespaced: true,
-	state,
+  state,
-	getters,
+  getters,
-	actions,
+  actions,
-	mutations
+  mutations
 };

bookmark_front/src/views/noHead/addBookmark/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="ssoAddBookmark">正在添加，请稍后！！！</div>
+</template>
+
+<script>
+import HttpUtil from "@/util/HttpUtil";
+export default {
+  data() {
+    return {
+      form: {
+        icon: null,
+        name: null,
+        url: null,
+        type: 0,
+        path: ""
+      }
+    };
+  },
+  mounted() {
+    window.addEventListener("message", event => {
+      if (!event.data.code) {
+        return;
+      }
+      console.log("收到content消息", event);
+      if (event.data.code == "addBookmarkAction") {
+        console.log("新增书签");
+        this.form.icon = event.data.data.icon ? event.data.data.icon : null;
+        this.form.name = event.data.data.name;
+        this.form.url = event.data.data.url;
+        this.addBookmark();
+      }
+    });
+    console.log("向父节点获取数据");
+    window.parent.postMessage({ code: "getBookmarkData", receiver: "content" }, "*");
+  },
+  methods: {
+    closeIframe() {
+      window.parent.postMessage({ code: "closeIframe", receiver: "content" }, "*");
+    },
+    //新增书签
+    async addBookmark() {
+      let res = await HttpUtil.put("/bookmark", null, this.form);
+      this.$message.success("添加成功");
+      // setTimeout(this.closeIframe, 2000);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.ssoAddBookmark {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

浏览器插件/bookmarkBrowserPlugin/background.js

@@ -1,44 +1,42 @@
-chrome.contextMenus.create(
+chrome.runtime.onInstalled.addListener(() => {
-  {
+  chrome.contextMenus.create(
-    title: '添加到书签',
+    {
-    id: "addBookmark",
+      title: '添加到书签',
-  },
+      id: "addBookmark",
-  () => console.log("创建右键菜单成功")
+    },
-);
+    () => console.log("创建右键菜单成功")
+  );
+});
+
 
 
 chrome.contextMenus.onClicked.addListener(async function (info, tab) {
   console.log(info, tab);
   let body = {
-    path: "",
     name: tab.title,
     url: tab.url,
-    type: 0,
     iconUrl: tab.favIconUrl
   };
   sendToContent(tab.id, { code: "addBookmark", data: body, token: await getVal("token") });
-})
+});
 
 
-
+// 接收content/popup发送的消息
-/**
- * 构建一个标准命令
- * @param {*} code code
- * @param {*} data data
- */
-function createMsg (code, data) {
-  return JSON.stringify({ code, data });
-}
-
-// 接收content发送的消息
 chrome.runtime.onMessage.addListener(async (data, sender, sendResponse) => {
-  if (!data.code) {
+  if (!data.code || !data.receiver == 'background') {
     return;
   }
-  console.log("收到content发送消息：", data);
+  sendResponse("ok");
+  console.log("收到消息：", data, sender);
   if (data.code == 'setToken') {
-    setVal("token", data.data);
+    await setVal("token", data.data);
-    sendResponse({ code: "setTokenOk" });
+    // sendToContent
+    await sendToContent(sender.tab.id, { code: "setTokenOk" });
+  } else if (data.code == 'getToken') {
+    let token = await getVal("token");
+    sendToPopup({ code: "setToken", data: await getVal("token") });
+  } else if (data.code == "clearToken") {
+    await clearVal("token");
   }
 })
 
@@ -49,11 +47,27 @@ chrome.runtime.onMessage.addListener(async (data, sender, sendResponse) => {
  */
 function sendToContent (tabId, data) {
   console.log(tabId, data);
+  data.receiver = "content";
   chrome.tabs.sendMessage(tabId, data, res => {
     console.log("接受响应", res);
   })
 }
 
+/**
+ * 向popup发送消息
+ * @param {*} data 
+ */
+function sendToPopup (data) {
+  data.receiver = "popup";
+  chrome.runtime.sendMessage(data, res => console.log(res));
+}
+
+/**
+ * 设置值
+ * @param {*} key 
+ * @param {*} val 
+ * @returns 
+ */
 function setVal (key, val) {
   return new Promise((resolve, reject) => {
     chrome.storage.local.set({ [key]: val }, function () {
@@ -63,6 +77,11 @@ function setVal (key, val) {
   })
 }
 
+/**
+ * 获取值
+ * @param {*} key 
+ * @returns 
+ */
 function getVal (key) {
   return new Promise((resolve, reject) => {
     chrome.storage.local.get([key], function (res) {
@@ -70,4 +89,13 @@ function getVal (key) {
       resolve(res[key]);
     })
   })
+}
+
+function clearVal (key) {
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.remove(key, function () {
+      console.log("remove成功", key);
+      resolve();
+    })
+  })
 }

浏览器插件/bookmarkBrowserPlugin/popup/index.html

@@ -7,8 +7,8 @@
     <style>
       html,
       body {
-        width: 40em;
+        padding: 0.2em;
-        width: 80em;
+        width: 8em;
       }
       #content {
         color: red;
@@ -16,7 +16,12 @@
     </style>
   </head>
   <body>
-    <a href="https://fleyx.com/userSpace/ssoAuth" target="_blank">点击登录</a>
+    <a id="login" href="https://fleyx.com/userSpace/ssoAuth" target="_blank">点击登录</a>
+    <div id="action" style="display: none">
+      <button id="logout">退出登陆</button>
+      <button title="同步云端书签到浏览器（覆盖本地）">同步云端书签</button>
+      <button title="同步浏览器书签到云端(覆盖云端)">同步浏览器</button>
+    </div>
     <p id="content"></p>
     <script type="text/javascript" src="/static/js/axios.min.js"></script>
     <script type="text/javascript" src="/static/js/config.js"></script>

浏览器插件/bookmarkBrowserPlugin/popup/index.js

@@ -1,2 +1,49 @@
 console.log("asdf");
-console.log(bookmarkHost);
+console.log(bookmarkHost);
+
+var token;
+var login = document.getElementById("login");
+var action = document.getElementById("action");
+
+(async () => {
+	//初始化
+	login.href = bookmarkHost + "/manage/sso/auth";
+	sendToBg("getToken", null);
+})();
+
+/**
+ * 退出登陆
+ */
+document.getElementById("logout").addEventListener("click", () => {
+	console.log("click");
+	sendToBg("clearToken", null);
+	action.style.display = "none";
+	login.style.display = "block";
+});
+
+/**
+ * 发送消息到后台
+ * @param {*} data 
+ */
+function sendToBg (code, data) {
+	chrome.runtime.sendMessage({ code, data, receiver: "background" }, res => console.log(res));
+}
+
+
+// 接收content/background发送的消息
+chrome.runtime.onMessage.addListener(async (data, sender, sendResponse) => {
+	if (!data.code || !data.receiver == 'popup') {
+		return;
+	}
+	sendResponse("ok");
+	console.log("popup收到消息：", data);
+	if (data.code == 'setToken') {
+		token = data.data;
+		if (token) {
+			action.style.display = "block";
+			login.style.display = "none";
+		} else {
+			login.style.display = "block";
+		}
+	}
+})

浏览器插件/bookmarkBrowserPlugin/static/js/content.js

@@ -1,59 +1,88 @@
 console.log('注入了页面');
 
+var bookmarkInfo = null;
+var addBlockDiv = null;
+var iframe = null;
+
 /**
  * 接收当前注入页面传来的消息
  */
 window.addEventListener('message', function (event) {
+  console.log(event);
   if (event.data.code === undefined) {
     return;
   }
   console.log('接受到网页消息:', event.data);
-  sendToBg(event.data);
+  if (event.data.code === 'getBookmarkData') {
+    iframe.contentWindow.postMessage({ code: "addBookmarkAction", data: bookmarkInfo }, "*");
+  } else if (event.data.code === 'setToken') {
+    sendToBg(event.data);
+  } else if (event.data.code == 'closeIframe') {
+    addBlockDiv.remove();
+  }
 });
 
 
 /**
- * 接收background发送的消息
+ * 接收content/background发送的消息
  */
-chrome.runtime.onMessage.addListener((data, sender, sendResponse) => dealBgMessage(data));
+chrome.runtime.onMessage.addListener(async (data, sender, sendResponse) => {
+  if (!data || !data.code || data.receiver != "content") {
+    return;
+  }
+  sendResponse("ok");
+  console.log('收到消息：', data);
+  if (data.code == 'setTokenOk') {
+    sendToPage(data);
+  } else if (data.code == 'addBookmark') {
+    await addBookmark(data);
+  }
+});
+
+async function addBookmark (data) {
+  if (!checkTokenValid(data.token)) {
+    alert("登陆失效，请登陆后，重试");
+    window.open(bookmarkHost + "/manage/sso/auth");
+    return;
+  }
+  //新增书签
+  try {
+    if (data.data.iconUrl) {
+      let icon = await axios.get(data.data.iconUrl, { responseType: 'arraybuffer' });
+      data.data.icon = `data:` + icon.headers['content-type'] + ';base64,' + window.btoa(String.fromCharCode(...new Uint8Array(icon.data)));
+    }
+  } catch (error) {
+    console.error(error);
+  }
+  console.log("新增书签", data.data);
+  bookmarkInfo = data.data;
+
+  addBlockDiv = document.createElement("div");
+  addBlockDiv.setAttribute("style", "position:fixed;width:100%;height:100vh;z-index:100000;left:0;top:0;background:rgba(211, 211, 205, 0.8)");
+  document.getElementsByTagName("body")[0].appendChild(addBlockDiv);
+  iframe = document.createElement("iframe");
+  iframe.src = bookmarkHost + "/noHead/addBookmark?token=" + data.token;
+  iframe.setAttribute("style", "width:70%;min-height:60vh;margin-left:15%;margin-top:10vh;padding:0.3em;");
+  addBlockDiv.appendChild(iframe);
+}
 
 /**
  * 发送消息给bg
  * @param {*} data 
  */
 function sendToBg (data) {
-  chrome.runtime.sendMessage(data, response => dealBgMessage(response));
+  data.receiver = "background";
+  chrome.runtime.sendMessage(data, response => {
+    console.log(response);
+  });
 }
 
-/**
- * 处理后台发送的消息
- */
-async function dealBgMessage (data) {
-  if (!data || !data.code) {
-    return;
-  }
-  console.log('收到来自bg的回复：', data);
-  if (data.code == 'setTokenOk') {
-    sendToPage(data);
-  } else if (data.code == 'addBookmark') {
-    if (!checkTokenValid(data.token)) {
-      alert("登陆失效，请登陆后，重试");
-      window.open(bookmarkHost + "/manage/sso");
-      return;
-    }
-    //新增书签
-    let icon = await axios.get(data.data.iconUrl, { responseType: 'arraybuffer' });
-    data.data.icon = `data:` + icon.headers['content-type'] + ';base64,' + window.btoa(String.fromCharCode(...new Uint8Array(icon.data)));
-    await axios.put("/bookmark", data.data);
-  }
-}
-
-
 /**
  * 发消息到页面
  * @param {*} data 
  */
 function sendToPage (data) {
+  data.receiver = "page";
   window.postMessage(data, "*");
 }