✨ Feat: chrome插件，首页搜索初步完成

浏览器插件/bookmark-chrome/src/background.js

@@ -7,6 +7,7 @@ chrome.extension.onConnect.addListener(port => {
     switch (msg.type) {
       case 'sendToken':
         localStorage.setItem('token', msg.data);
+        window.token = msg.data;
         break;
       default:
         console.error('未知的数据', msg);

浏览器插件/bookmark-chrome/src/manifest.json

@@ -22,7 +22,7 @@
   },
   "content_scripts": [{
       "matches": ["http://west.tapme.top/*", "http://bookmark.tapme.top/*","http://localhost:3000/*"],
-      "js": ["popup/static/sso.js"]
+      "js": ["static/sso.js"]
     }
 
   ]

浏览器插件/bookmark-chrome/src/popup/popup.js

@@ -4,31 +4,24 @@ import store from '../store';
 import router from './router';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import config from '../util/config';
 import axios from 'axios';
 
 global.browser = require('webextension-polyfill');
 Vue.prototype.$browser = global.browser;
 Vue.use(ElementUI);
 
-/* eslint-disable no-new */
-window.vueInstance = new Vue({
-  el: '#app',
-  store,
-  router,
-  render: h => h(App),
-});
-
 /**
  * 配置axios
  */
 axios.defaults.timeout = 15000;
-
+axios.defaults.baseURL = config.baseUrl;
 /**
  * 请求拦截器
  */
 axios.interceptors.request.use(
   function(config) {
-    console.log(config);
+    config.headers['jwt-token'] = window.token;
     return config;
   },
   function(error) {
@@ -39,10 +32,23 @@ axios.interceptors.request.use(
 
 axios.interceptors.response.use(
   res => {
-    console.log(res);
-    return res.data;
+    if (res.data.code === -1) {
+      window.vueInstance.$router.replace('/public/login');
+    } else if (res.data.code === 1) {
+      return res.data.data;
+    } else {
+      Promise.reject(res);
+    }
   },
   error => {
     return Promise.reject(error);
   }
 );
+
+/* eslint-disable no-new */
+window.vueInstance = new Vue({
+  el: '#app',
+  store,
+  router,
+  render: h => h(App),
+});

浏览器插件/bookmark-chrome/src/popup/router/pages/Index.vue

@@ -1,20 +1,71 @@
 <template>
-  <div class="main">
-    <p>Hello world!</p>
+  <div>
+    <div class="head">
+      <img width="30%" src="/static/img/bookmarkLogo.png" alt="icon" />
+      <span>{{personInfo.username}}</span>
+    </div>
+    <!-- 书签检索 -->
+    <div class="search">
+      <el-input placeholder="关键词检索" v-model="searchContent">
+        <el-button slot="append" icon="el-icon-search"></el-button>
+      </el-input>
+      <div class="searchResult">
+        <div class="item" v-for="item in searchList" :key="item.bookmarkId"><a target="_blank" :href="item.url">{{item.name}}</a></div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import axios from 'axios';
 export default {
   data() {
-    return {};
+    return {
+      personInfo: {},
+      searchContent: "",
+      searchList: [],
+      timeOut: null
+    };
   },
+  watch: {
+    searchContent(newVal, oldVal) {
+      if (newVal.trim() != oldVal) {
+        if (this.timeOut != null) {
+          clearTimeout(this.timeOut);
+        }
+        this.searchList = [];
+        this.timeOut = setTimeout(async () => {
+          this.searchList = await axios.get(`bookmark/searchUserBookmark?content=${newVal}`);
+          this.timeOut = null;
+        }, 200);
+      }
+    }
+  },
+  created() {
+    window.token = localStorage.getItem('token');
+    this.init();
+  },
+  methods: {
+    async init() {
+      let personInfo = await axios.get("/user/currentUserInfo");
+      window.personInfo = personInfo;
+      this.personInfo = personInfo;
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-.main {
-  width: 50%;
-  height: 50%;
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5% 0 5%;
+}
+.searchResult {
+}
+.item {
+  padding: 5px;
+  border-bottom: 1px solid black;
 }
 </style>

浏览器插件/bookmark-chrome/src/popup/router/pages/public/Login.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="main">您还未登陆授权，<el-button type="primary" @click="go">前往授权页面</el-button></div>
+  <div class="main">您还未登陆授权<br />
+    <el-button type="primary" @click="go">前往授权页面</el-button>
+  </div>
 </template>
 
 <script>
+import config from '../../../../util/config';
 export default {
   name: 'login',
   data() {
     return {
-      // href: 'http://west.tapme.top:8083',
-      href: 'http://localhost:3000/userSpace/ssoAuth',
     };
   },
   mounted() {
@@ -16,7 +17,7 @@ export default {
   },
   methods: {
     go() {
-      window.open(this.href);
+      window.open(config.ssoUrl);
     },
     // 循环检测token是否生效
     checkToken() {
@@ -33,6 +34,4 @@ export default {
 </script>
 
 <style scoped>
-.main {
-}
 </style>

浏览器插件/bookmark-chrome/src/util/config.js

@@ -0,0 +1,9 @@
+// const baseUri = 'https://bm.tapme.top';
+const baseUri = 'http://localhost:3000';
+
+const config = {
+  baseUrl: baseUri + '/bookmark/api',
+  ssoUrl: baseUri + '/userSpace/ssoAuth',
+};
+
+export default config;

浏览器插件/bookmark-chrome/webpack.config.js

@@ -74,7 +74,8 @@ const config = {
     }),
     new CopyWebpackPlugin([
       { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
-      { from: 'static', to: 'popup/static' },
+      { from: 'static', to: 'static' },
+      { from: 'static/fonts', to: 'fonts' },
       { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
       { from: 'options/options.html', to: 'options/options.html', transform: transformHtml },
       {