feat: 增加安装引导页面修改popup 的文件路径增加全局css

vcan · Oct 16, 2018 · b1e9e98 · b1e9e98
1 parent 0931838
commit b1e9e98
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 8 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -1,11 +1,11 @@
 module.exports = {
     transform: {
-        '^.+\\.tsx?$': 'ts-jest',
+        '^.+\\.tsx?$': 'ts-jest'
     },
     testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
-    testPathIgnorePatterns: ['/lib/', '/node_modules/'],
+    testPathIgnorePatterns: ['/lib/', '/node_modules/', '/src/services/common/store/test.ts'],
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
     collectCoverage: true,
     testEnvironment: 'node',
-    verbose: true,
+    verbose: true
 };
diff --git a/src/background/index.ts b/src/background/index.ts
@@ -6,3 +6,12 @@ testStorageInChrome().then((_) => {
 }).catch((err: Error) => {
     console.log(err.message);
 });
+
+chrome.runtime.onInstalled.addListener(function (details) {
+    if (details.reason === 'install') {
+        console.log('安装成功');
+        chrome.windows.create({ url: chrome.extension.getURL('initialize.html'), type: 'normal' });
+    } else if (details.reason === 'update') {
+        console.log('更新成功');
+    }
+});
diff --git a/index.html → src/html/index.html b/index.html → src/html/index.html
diff --git a/src/html/initialize.html b/src/html/initialize.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8" />
+
+<head>
+    <title>语雀剪藏向导</title>
+    <script src="js/initialize.js"></script>
+    <script src="js/vendor.js"></script>
+</head>
+
+<body>
+    <div id="initializeWindow"></div>
+</body>
+
+</html>
diff --git a/src/pages/initialize/index.tsx b/src/pages/initialize/index.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Layout, Steps } from 'antd';
+const { Header, Content, Footer } = Layout;
+import './style/index.scss';
+
+const Step = Steps.Step;
+
+chrome.tabs.query({ active: true, currentWindow: true }, async () => {
+    ReactDOM.render(
+        <Layout>
+            <Header className="Header">
+                <p>语雀 剪藏 保存精彩网页</p>
+            </Header>
+            <Content className="content">
+                <div className="initializeForm" >
+                    <Steps>
+                        <Step title="第一步" />
+                        <Step title="第二步" />
+                        <Step title="第三步" />
+                    </Steps>
+                </div>
+            </Content>
+            <Footer style={{ textAlign: 'center' }}>
+                语雀 剪藏 ©2018 Created by <a href="https://github.com/DiamondYuan">DiamondYuan</a>
+            </Footer>
+        </Layout >,
+        document.getElementById('initializeWindow')
+    );
+});
+
diff --git a/src/pages/initialize/style/index.scss b/src/pages/initialize/style/index.scss
@@ -0,0 +1,18 @@
+@import '../../../styles/global.scss';
+
+body {
+  width: 100%;
+  height: 100%;
+}
+.Header{
+    background: white;
+    text-align: center;
+}
+.initializeForm{
+    background: #ffffff; 
+    padding: 24px; 
+    min-height: 500px;
+    min-width: 500px;
+    margin: 100px;
+    padding: 20px;
+}
diff --git a/src/popup/index.tsx → src/pages/popup/index.tsx b/src/popup/index.tsx → src/pages/popup/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import './popup.scss';
 
-import { testStorageInChrome } from '../services/common/store/test';
+import './style/index.scss';
+import { testStorageInChrome } from '../../services/common/store/test';
 
 testStorageInChrome().then((_) => {
     console.log('storage is ok in content');

diff --git a/src/popup/popup.scss → src/pages/popup/style/index.scss b/src/popup/popup.scss → src/pages/popup/style/index.scss
@@ -1,4 +1,5 @@
-@import '~antd/dist/antd.css';
+@import '../../../styles/global.scss';
+
 body {
   width: 600px;
   height: 300px;
@@ -7,5 +8,6 @@ body {
 .popup {
   width: 100%;
   height: 100%;
+  background: $color-brand;
   padding: 10px;
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -0,0 +1,5 @@
+@import '~antd/dist/antd.css';
+
+$color-brand:#34CC6B;
+
+$color-background:#F9F9F9;
diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
@@ -4,7 +4,8 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 module.exports = {
     entry: {
-        popup: path.join(__dirname, '../src/popup/index.tsx'),
+        popup: path.join(__dirname, '../src/pages/popup/index.tsx'),
+        initialize: path.join(__dirname, '../src/pages/initialize/index.tsx'),
         background: path.join(__dirname, '../src/background/index.ts'),
         content_script: path.join(__dirname, '../src/content/index.tsx')
     },
@@ -57,7 +58,7 @@ module.exports = {
                 ignore: ['.*']
             },
             {
-                from: path.resolve(__dirname, '../index.html'),
+                from: path.resolve(__dirname, '../src/html/'),
                 to: path.resolve(__dirname, '../dist'),
                 ignore: ['.*']
             }