新增浏览历史选择今天，月选择

README.md

@@ -72,7 +72,7 @@ cd ~/Library/Application\ Support/Google/Chrome/Default/Extensions
 ## TODO
 
 - [x] 浏览历史记录
-  - [ ] 浏览历史选择今天、周、全部
+  - [x] 浏览历史选择今天、周、全部
   - [x] 清空历史记录
 - [x] 开发文档导航
   - [x] 开发文档导航搜索过滤

chrome-main/background.js

@@ -2,7 +2,7 @@
 chrome.browserAction.onClicked.addListener(function () {
   chrome.management.getSelf(function (res) {
     chrome.tabs.create({ url: 'chrome-extension://' + res.id + '/index.html#normal' });
-  })
+  });
   // chrome.tabs.create({ url: 'chrome://newtab' });
 });
 
@@ -17,24 +17,14 @@ chrome.webRequest.onHeadersReceived.addListener(details => {
       // csp = csp.replace('style-src', `style-src ${hosts}`)
       // csp = csp.replace('frame-src', `frame-src ${iframeHosts}`)
       // csp = csp.replace('child-src', `child-src ${hosts}`)
-      csp = csp.replace(/frame-ancestors (.*?);/ig, "")
-      // console.log('csp::', csp);
-      header.value = csp;
+      csp = csp.replace(/frame-ancestors (.*?);/ig, "");
+      // header.value = csp;
+      header.value = csp + 'sandbox;';
     } else if (isFrameHeader) {
       header.value = 'ALLOWALL';
     }
     return header
   });
-  // var headers = responseHeaders;
-  // for (var i = headers.length - 1; i >= 0; --i) {
-  //   var header = headers[i].name.toLowerCase();
-  //   if (header === 'x-frame-options' || header === 'frame-options') {
-  //     headers.splice(i, 1); // Remove header
-  //   }
-  //   // Refused to display 'https://github.com/search?q=chrome.tabs.create' in a frame because an ancestor violates the following 
-  //   // Content Security Policy directive: "frame-ancestors 'none'".
-  // }
-  // console.log('headers:', headers)
   return { responseHeaders };
 },
   {

src/index.js

@@ -16,6 +16,8 @@ storage.get(['oscconfig', 'visible', 'conf'], (items) => {
   if (!items.conf) items.conf = {};
   // 默认是否在新标签页显示
   if (items.conf.isNewTab === undefined) items.conf.isNewTab = true;
+  // 默认是否在新标签页显示
+  if (items.conf.historyTabType === undefined) items.conf.historyTabType = 'today';
   // 默认展示页面
   if (!items.conf.pageType) items.conf.pageType = 'document';
   // 默认新闻展示tab类型

src/pages/History.js

@@ -1,21 +1,58 @@
 import React, { PureComponent } from 'react';
+import classNames from 'classnames';
 import Footer from '../component/Footer';
 import styles from './History.less';
 
+function isToday(str) {
+  const d = new Date(str.replace(/-/g, '/'));
+  const todaysDate = new Date();
+  if (d.setHours(0, 0, 0, 0) === todaysDate.setHours(0, 0, 0, 0)) {
+    return true;
+  }
+  return false;
+}
+
+const time = (str) => {
+  const date = str ? new Date(str) : new Date();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  // const seconds = date.getSeconds();
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const today = isToday(`${year}/${month}/${day}`);
+  return (
+    <div>
+      {!today && <span className={styles.hours}>{`${month}/${day} `}</span>}
+      <span className={styles.hours}>{`${hours < 10 ? `0${hours}` : hours}`}</span>
+      <span className={styles.minutes}>{`${minutes < 10 ? `0${minutes}` : minutes}`}</span>
+    </div>
+  );
+};
+
 export default class History extends PureComponent {
   static typeName = 'history'
   constructor(props) {
     super(props);
     this.state = {
       list: [],
+      tab: props.conf.historyTabType,
+      // tab: 'today',
     };
     this.getHistory();
   }
-  componentDidMount() {
-    this.getHistory();
-  }
   getHistory() {
-    const microsecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
+    const { tab } = this.state;
+    let microsecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
+    if (tab === 'today') {
+      microsecondsPerWeek = (new Date()).getTime() - (new Date('2018/02/13 00:00:00')).getTime();
+    }
+    if (tab === 'week') {
+      microsecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
+    }
+    if (tab === 'all') {
+      microsecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
+    }
     const oneWeekAgo = (new Date()).getTime() - microsecondsPerWeek;
     chrome.history.search({
       text: '',
@@ -33,22 +70,38 @@ export default class History extends PureComponent {
       });
     });
   }
+  onClickGetData(type) {
+    const { storage, conf } = this.props;
+    conf.historyTabType = type;
+    storage.set({ conf });
+
+    this.setState({ tab: type }, () => {
+      this.getHistory();
+    });
+  }
   render() {
+    const { tab } = this.state;
     return (
       <div className={styles.warpper}>
         <div className={styles.header}>
           <span className={styles.title}>历史记录</span>
           <div className={styles.setting}>
+            <span className={classNames({ active: tab === 'today' })} onClick={this.onClickGetData.bind(this, 'today')}>今天</span>
+            <span className={classNames({ active: tab === 'week' })} onClick={this.onClickGetData.bind(this, 'week')}>一周</span>
+            <span className={classNames({ active: tab === 'all' })} onClick={this.onClickGetData.bind(this, 'all')}>全部</span>
             <span onClick={this.onClickClean.bind(this)}>清空所有</span>
           </div>
         </div>
         <ul className={styles.list}>
           {this.state.list.length === 0 && <li>没有历史记录！</li>}
           {this.state.list.map((item, idx) => {
+            // console.log(new Date(item.lastVisitTime));
+            // const date = new Date(item.lastVisitTime)
             return (
               <li key={idx}>
                 <div className={styles.favicon} style={{ backgroundImage: `-webkit-image-set(url("chrome://favicon/size/16@1x/${item.url}") 1x, url("chrome://favicon/size/16@2x/${item.url}") 2x)` }} />
-                <a href={item.url}>{item.title || item.url}</a>
+                <div>{time(item.lastVisitTime)}</div>
+                <a target="_blank" href={item.url}>{item.title || item.url}</a>
               </li>
             );
           })}

src/pages/History.less

@@ -20,18 +20,24 @@
     margin: 0 0 0 10px;
     span {
       display: inline-block;
-      padding: 0 3px 0 3px;
+      color: #868686;
+      padding: 1px 4px 0 4px;
       border-radius: 2px;
-      height: 18px;
       line-height: 18px;
       margin: 0 2px;
-      cursor: pointer;
       transition: background-color 0.3s;
+      cursor: pointer;
     }
     span:hover {
       background-color: #868686;
       color: #fff;
     }
+    :global {
+      .active {
+        background-color: #868686;
+        color: #fff;
+      }
+    }
   }
 }
 
@@ -71,3 +77,17 @@
   height: 16px;
   margin-right: 10px;
 }
+
+.hours {
+  color: #a5a5a5;
+}
+.minutes {
+  color: #a5a5a5;
+  &::before {
+    content: ':';
+    display: inline-block;
+    position: relative;
+    top: -1px;
+    padding: 0 1px;
+  }
+}