✨ Feat: [chrome]:完成页面向拓展传递数据

浏览器插件/bookmark-chrome/.editorConfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true

浏览器插件/bookmark-chrome/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "element-ui": "^2.12.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",

浏览器插件/bookmark-chrome/scripts/build-zip.js

@@ -12,20 +12,20 @@ const extractExtensionData = () => {
 
   return {
     name: extPackageJson.name,
-    version: extPackageJson.version
-  }
+    version: extPackageJson.version,
+  };
 };
 
 const makeDestZipDirIfNotExists = () => {
-  if(!fs.existsSync(DEST_ZIP_DIR)) {
+  if (!fs.existsSync(DEST_ZIP_DIR)) {
     fs.mkdirSync(DEST_ZIP_DIR);
   }
-}
+};
 
 const buildZip = (src, dist, zipFilename) => {
   console.info(`Building ${zipFilename}...`);
 
-  const archive = archiver('zip', { zlib: { level: 9 }});
+  const archive = archiver('zip', { zlib: { level: 9 } });
   const stream = fs.createWriteStream(path.join(dist, zipFilename));
 
   return new Promise((resolve, reject) => {
@@ -40,7 +40,7 @@ const buildZip = (src, dist, zipFilename) => {
 };
 
 const main = () => {
-  const {name, version} = extractExtensionData();
+  const { name, version } = extractExtensionData();
   const zipFilename = `${name}-v${version}.zip`;
 
   makeDestZipDirIfNotExists();

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

@@ -1,4 +1,15 @@
 import store from './store';
 global.browser = require('webextension-polyfill');
 
-alert(`Hello ${store.getters.foo}!`);
+chrome.extension.onConnect.addListener(port => {
+  console.log(port);
+  port.onMessage.addListener(msg => {
+    switch (msg.type) {
+      case 'sendToken':
+        localStorage.setItem('token', msg.data);
+        break;
+      default:
+        console.error('未知的数据', msg);
+    }
+  });
+});

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

@@ -19,5 +19,11 @@
   "options_ui": {
     "page": "options/options.html",
     "chrome_style": true
-  }
+  },
+  "content_scripts": [{
+      "matches": ["http://west.tapme.top/*", "http://bookmark.tapme.top/*","http://localhost:3000/*"],
+      "js": ["popup/static/sso.js"]
+    }
+
+  ]
 }

浏览器插件/bookmark-chrome/src/options/App.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <p>Hello world!</p>
+    <p>Hello world!这是选项页</p>
   </div>
 </template>
 
 <script>
 export default {
-  name: "App",
+  name: 'App',
 };
 </script>
 

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

@@ -1,15 +1,20 @@
 <template>
-  <div>
+  <div class="app">
     <router-view></router-view>
   </div>
 </template>
 
 <script>
 export default {
-  data () {
-    return {}
-  }
-}
+  data() {
+    return {};
+  },
+};
 </script>
 
-
+<style>
+.app {
+  width: 500px;
+  height: 500px;
+}
+</style>

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

@@ -1,15 +1,48 @@
-import Vue from 'vue'
-import App from './App'
-import store from '../store'
-import router from './router'
+import Vue from 'vue';
+import App from './App';
+import store from '../store';
+import router from './router';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import axios from 'axios';
 
-global.browser = require('webextension-polyfill')
-Vue.prototype.$browser = global.browser
+global.browser = require('webextension-polyfill');
+Vue.prototype.$browser = global.browser;
+Vue.use(ElementUI);
 
 /* eslint-disable no-new */
-new Vue({
+window.vueInstance = new Vue({
   el: '#app',
   store,
   router,
-  render: h => h(App)
-})
+  render: h => h(App),
+});
+
+/**
+ * 配置axios
+ */
+axios.defaults.timeout = 15000;
+
+/**
+ * 请求拦截器
+ */
+axios.interceptors.request.use(
+  function(config) {
+    console.log(config);
+    return config;
+  },
+  function(error) {
+    console.error(error);
+    return Promise.reject(error);
+  }
+);
+
+axios.interceptors.response.use(
+  res => {
+    console.log(res);
+    return res.data;
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);

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

@@ -1,9 +1,9 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import routes from './routes'
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import routes from './routes';
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 export default new VueRouter({
-  routes
-})
+  routes,
+});

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

@@ -1,17 +1,20 @@
 <template>
-  <p>Hello world!</p>
+  <div class="main">
+    <p>Hello world!</p>
+  </div>
 </template>
 
 <script>
 export default {
-  data () {
-    return {}
-  }
-}
+  data() {
+    return {};
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-p {
-  font-size: 20px;
+.main {
+  width: 50%;
+  height: 50%;
 }
 </style>

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="main">您还未登陆授权，<el-button type="primary" @click="go">前往授权页面</el-button></div>
+</template>
+
+<script>
+export default {
+  name: 'login',
+  data() {
+    return {
+      // href: 'http://west.tapme.top:8083',
+      href: 'http://localhost:3000/userSpace/ssoAuth',
+    };
+  },
+  mounted() {
+    this.checkToken();
+  },
+  methods: {
+    go() {
+      window.open(this.href);
+    },
+    // 循环检测token是否生效
+    checkToken() {
+      console.log('检测token是否获取到了');
+      let token = localStorage.getItem('token');
+      if (token == null || token.length === 0) {
+        setTimeout(this.checkToken.bind(this), 1000);
+      } else {
+        this.$router.replace('/');
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main {
+}
+</style>

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

@@ -1,8 +1,13 @@
-import PageIndex from './pages/Index'
+import PageIndex from './pages/Index';
+import Login from './pages/public/Login';
 
 export default [
   {
     path: '/',
-    component: PageIndex
-  }
-]
+    component: PageIndex,
+  },
+  {
+    path: '/public/login',
+    component: Login,
+  },
+];

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

@@ -0,0 +1,20 @@
+/**
+ * web页面植入脚本，用于授权等一系列操作。
+ */
+
+console.log('注入了页面');
+var port = chrome.extension.connect({ name: 'data' });
+
+window.addEventListener('message', event => {
+  if (event.data.type === undefined) {
+    return;
+  }
+  console.log('接受到消息', event.data);
+  switch (event.data.type) {
+    case 'sendToken':
+      port.postMessage(event.data);
+      break;
+    default:
+      console.error('未知的事件', event);
+  }
+});

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

@@ -1,17 +1,17 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from 'vue';
+import Vuex from 'vuex';
 
-import * as getters from './getters'
-import mutations from './mutations'
-import * as actions from './actions'
+import * as getters from './getters';
+import mutations from './mutations';
+import * as actions from './actions';
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    foo: 'bar'
+    foo: 'bar',
   },
   getters,
   mutations,
-  actions
-})
+  actions,
+});

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

@@ -10,7 +10,7 @@ const config = {
   mode: process.env.NODE_ENV,
   context: __dirname + '/src',
   entry: {
-    'background': './background.js',
+    background: './background.js',
     'popup/popup': './popup/popup.js',
     'options/options': './options/options.js',
   },
@@ -74,12 +74,13 @@ const config = {
     }),
     new CopyWebpackPlugin([
       { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
+      { from: 'static', to: 'popup/static' },
       { from: 'popup/popup.html', to: 'popup/popup.html', transform: transformHtml },
       { from: 'options/options.html', to: 'options/options.html', transform: transformHtml },
       {
         from: 'manifest.json',
         to: 'manifest.json',
-        transform: (content) => {
+        transform: content => {
           const jsonContent = JSON.parse(content);
           jsonContent.version = version;