初始化代码

css/popup.css

@@ -0,0 +1,287 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+/* 容器样式 */
+
+.container {
+    position: relative;
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    padding: 20px 0 30px 0;
+}
+
+/* 输入框，链接按钮样式 */
+
+input, .btn {
+    width: 100%;
+    padding: 12px;
+    border: none;
+    border-radius: 4px;
+    margin: 5px 0;
+    opacity: 0.85;
+    display: inline-block;
+    font-size: 17px;
+    line-height: 20px;
+    text-decoration: none;
+    /* 移除锚文本链接下划线 */
+}
+
+input:hover, .btn:hover {
+    opacity: 1;
+}
+
+/* 按钮背景颜色 */
+
+.fb {
+    background-color: #3B5998;
+    color: white;
+}
+
+.twitter {
+    background-color: #55ACEE;
+    color: white;
+}
+
+.google {
+    background-color: #dd4b39;
+    color: white;
+}
+
+/* 提交按钮样式 */
+
+input[type=submit] {
+    background-color: #4CAF50;
+    color: white;
+    cursor: pointer;
+}
+
+input[type=submit]:hover {
+    background-color: #45a049;
+}
+
+/* 两列布局 */
+
+.col {
+    float: left;
+    width: 50%;
+    margin: auto;
+    padding: 0 50px;
+    margin-top: 6px;
+}
+
+/* 清除浮动 */
+
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+/* vertical line */
+
+.vl {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+    border: 2px solid #ddd;
+    height: 175px;
+}
+
+/* 水平方向的文本 */
+
+.vl-innertext {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #f1f1f1;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    padding: 8px 10px;
+}
+
+/* 大屏幕隐藏文本 */
+
+.hide-md-lg {
+    display: none;
+}
+
+/* 底部容器 */
+
+.bottom-container {
+    text-align: center;
+    background-color: #666;
+    border-radius: 0px 0px 4px 4px;
+}
+
+/* 响应式设计，在设备屏幕尺寸小于 650px ，上下丢跌显示 */
+
+@media screen and (max-width: 650px) {
+    .col {
+        width: 100%;
+        margin-top: 0;
+    }
+    /* hide the vertical line */
+    .vl {
+        display: none;
+    }
+    /* show the hidden text on small screens */
+    .hide-md-lg {
+        display: block;
+        text-align: center;
+    }
+}
+
+/* Rounded sliders */
+
+/**
+ * 隐藏默认的checkbox
+ */
+
+input[type=checkbox] {
+    visibility: hidden;
+}
+
+.checkboxThree {
+    width: 120px;
+    height: 40px;
+    background: #333;
+    margin: 20px 60px;
+    border-radius: 50px;
+    position: relative;
+}
+
+/**
+ * Create the text for the On position
+ */
+
+.checkboxThree:before {
+    content: 'Run';
+    position: absolute;
+    top: 12px;
+    left: 13px;
+    height: 2px;
+    color: #26ca28;
+    font-size: 16px;
+}
+
+/**
+ * Create the label for the off position
+ */
+
+.checkboxThree:after {
+    content: 'Stop';
+    position: absolute;
+    top: 12px;
+    left: 75px;
+    height: 2px;
+    color: #ddd;
+    font-size: 16px;
+}
+
+/**
+ * Create the pill to click
+ */
+
+.checkboxThree label {
+    display: block;
+    width: 52px;
+    height: 22px;
+    border-radius: 50px;
+    -webkit-transition: all .5s ease;
+    -moz-transition: all .5s ease;
+    -o-transition: all .5s ease;
+    -ms-transition: all .5s ease;
+    transition: all .5s ease;
+    cursor: pointer;
+    position: absolute;
+    top: 9px;
+    z-index: 1;
+    left: 12px;
+    background: #ddd;
+}
+
+/**
+ * Create the checkbox event for the label
+ */
+
+.checkboxThree input[type=checkbox]:checked+label {
+    left: 60px;
+    background: #26ca28;
+}
+
+.graphic-design {
+    width: 0%;
+    /* -moz-animation: graphic-design 2s ease-out;
+    -webkit-animation: graphic-design 2s ease-out; */
+    background-color: #f674a4;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#f674a4), to(#e06995));
+    background-image: -webkit-linear-gradient(top, #f674a4, #e06995);
+    background-image: -moz-linear-gradient(top, #f674a4, #e06995);
+    background-image: -ms-linear-gradient(top, #f674a4, #e06995);
+    background-image: -o-linear-gradient(top, #f674a4, #e06995);
+    background-image: linear-gradient(top, #f674a4, #e06995);
+}
+
+#skill {
+    list-style: none;
+    font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+    width: 240px;
+    margin: 50px auto 0;
+    position: relative;
+    line-height: 2em;
+    padding: 30px 0;
+}
+
+#skill li {
+    margin-bottom: 50px;
+    background: #e9e5e2;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
+    background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
+    background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
+    background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
+    background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
+    background-image: linear-gradient(top, #e1ddd9, #e9e5e2);
+    height: 20px;
+    border-radius: 10px;
+    -moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
+    -webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
+    box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
+}
+
+#skill li h3 {
+    position: relative;
+    top: -25px;
+}
+
+.bar {
+    height: 18px;
+    margin: 1px 2px;
+    position: absolute;
+    border-radius: 10px;
+    -moz-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
+    -webkit-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
+    box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
+}
+
+/* @-moz-keyframes graphic-design {
+    0% {
+        width: 0px;
+    }
+    100% {
+        width: 10%;
+    }
+}
+
+@-webkit-keyframes graphic-design {
+    0% {
+        width: 0px;
+    }
+    100% {
+        width: 10%;
+    }
+} */

js/background.js

@@ -0,0 +1,94 @@
+var g_tabArray = new Array();
+var g_isRunCmd = false;
+
+chrome.runtime.onInstalled.addListener(function () {
+    chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
+        chrome.declarativeContent.onPageChanged.addRules([
+            {
+                conditions: [
+                    new chrome.declarativeContent.PageStateMatcher({ pageUrl: { urlContains: 'oa.komect.com' } })
+                ],
+                actions: [new chrome.declarativeContent.ShowPageAction()]
+            }
+        ]);
+    });
+
+    setInterval(function () {
+        if (g_tabArray.length > 0) {
+            //console.log("%o", g_tabArray);
+            for (var i = 0; i < g_tabArray.length; i++) {
+                if (g_tabArray[i].status == "new") {
+                    chrome.tabs.update(g_tabArray[i].tab.id, { active: true });
+                    g_tabArray[i].status = "opened";
+                }
+                var now = new Date().getTime();
+
+                if (g_tabArray[i].lastClick == 0 || now - g_tabArray[i].stamp > 5 * 1000) {
+                    chrome.tabs.sendMessage(g_tabArray[i].tab.id, {
+                        from: 'background', to: 'content_scripts', action: 'read_page', tabId: g_tabArray[i].tab.id
+                    }, function (response) {
+                        console.log(response);
+                    });
+                    g_tabArray[i].lastClick = now;
+                }
+
+                console.log("%o", g_tabArray[i]);
+
+                if (now - g_tabArray[i].stamp > 120 * 1000) {
+                    console.log("timeout: %d, %d", now, g_tabArray[i].stamp);
+                    chrome.tabs.remove(g_tabArray[i].tab.id);
+                    g_tabArray.splice(i, 1);
+                }
+            }
+        }
+    }, 1000);
+});
+
+chrome.tabs.onRemoved.addListener(function (tabId, removeInfo) {
+    for (var i = 0; i < g_tabArray.length; i++) {
+        if (g_tabArray[i].tab.id = tabId) {
+            g_tabArray.splice(i, 1);
+            console.log("Remove Page[%d]:", tabId, removeInfo);
+        }
+
+        if (g_tabArray.length == 0) {
+            chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+                chrome.tabs.sendMessage(tabs[0].id, { from: 'background', to: 'content_scripts', action: 'run_cmd' }, function (response) {
+                    console.log(response);
+                    console.log("++++++++++++++++++++++ restart next process");
+                });
+            });
+        }
+    }
+});
+
+chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
+    var msg = "Recv Commond [" + request.action + "] from (" + request.from + ")";
+    sendResponse(msg);
+    console.log(msg);
+    if (request.action == "run_cmd") {
+        g_isRunCmd = true;
+    } else if (request.action == "stop_cmd") {
+        g_isRunCmd = false;
+    } else if (request.action == "run_table") {
+        for (var i = 0; i < 10; i++) {
+            chrome.tabs.query({ status: "complete", url: "https://oa.komect.com/oa/document*" }, function (tabs) {
+                if (tabs.length > 0) {
+                    console.log("%o", tabs);
+                }
+            });
+        }
+    } else if (request.action == "create_table") {
+        chrome.tabs.create({ url: request.url, active: false }, function (tb) {
+            g_tabArray.push({ tab: tb, stamp: new Date().getTime(), status: "new", lastClick: 0 })
+            console.log("%o", tb);
+        });
+    } else if (request.action == "click_table") {
+        for (var i = 0; i < g_tabArray.length; i++) {
+            if (g_tabArray[i].tab.id == request.tabId) {
+                g_tabArray[i].lastClick = new Date().getTime();
+                console.log("Tab %d Click On %d", tabId, g_tabArray[i].lastClick);
+            }
+        }
+    }
+});

js/oa.js

@@ -0,0 +1,140 @@
+var g_tolItem = 0;
+
+document.addEventListener('DOMContentLoaded', function () {
+    console.log('我被执行了！');
+    chrome.runtime.sendMessage({ from: "content_scripts" }, function (response) {
+        console.log(response);
+    });
+});
+
+function sleep(time) {
+    return new Promise((resolve) => setTimeout(resolve, time));
+}
+
+function queryUnReadItems() {
+    var doc = document.getElementById('document-filter');
+
+    for (var i = 0; i < doc.childElementCount; i++) {
+        var ctx = doc.children[i].innerText.split(" ");
+        if (ctx.length > 1 && ctx[0] == "我的待阅") {
+            return { index: i, nItem: parseInt(ctx[1], 10) };
+        }
+    }
+
+    return 0;
+}
+
+function flushUnReadList(id, nItems) {
+    var doc = document.getElementById('document-filter');
+
+    doc.children[id].firstElementChild.click();
+    var cob = document.getElementById('listpagination');
+    var selectObj = cob.children[1].firstElementChild;
+    console.log("Parent[1] = %o", cob.children[1]);
+    console.log("Parent[2] = %o", cob.children[1].firstElementChild);
+
+    var n = 0;// nItems / 10;
+
+    if (n == 2) {
+        selectObj.value = "20";
+    } else if (n == 3) {
+        selectObj.value = "30";
+    } else if (n >= 4) {
+        selectObj.value = "40";
+    } else {
+        selectObj.value = "10";
+    }
+
+    selectObj.dispatchEvent(new Event('change', { 'bubbles': true }));
+    console.log("Refresh Web Pages");
+}
+
+function getUnReadList() {
+    var doc = document.getElementsByClassName('tab-pane active');
+
+    for (var i = 0; i < doc.length; i++) {
+          if (doc[i].id == 'toread') {
+            var tbl = doc[i].children[0].children[0].children[1];
+            for (var j = 0; j < tbl.childElementCount; j++) {
+                if (tbl.children[j].className != "request") {
+                    /* console.log("item(%d): %s   %s", j,
+                        tbl.children[j].children[0].innerText,
+                        tbl.children[j].children[1].firstElementChild.href); */
+                    //tbl.children[j].children[1].firstElementChild.click();
+                    chrome.runtime.sendMessage({
+                        from: "content_scripts",
+                        action: 'create_table',
+                        url: tbl.children[j].children[1].firstElementChild.href
+                    }, function (response) {
+                        g_tolItem = g_tolItem + 1;
+                        console.log(response);
+                    });
+
+                    if (j >= 2) {
+                        return j;
+                    }
+                }
+            }
+
+            return 0;
+        }
+    }
+
+    return 0;
+}
+
+chrome.extension.onMessage.addListener(
+    function (request, sender, sendResponse) {
+        var msg = "Recv Commond [" + request.action + "] from (" + request.from + ")";
+        sendResponse(msg);
+        console.log(msg);
+        if (request.action == "run_cmd") {
+            if(g_tolItem >= 4) {
+                console.log("------------ Cancel do");
+                return;
+            }
+            for (var i = 0; i < 10; i++) {
+                var obj = queryUnReadItems();
+
+                if (obj.nItem > 0) {
+                    var msg = "待阅处理： [" + obj.nItem + "] 条";
+                    console.log(msg);
+                    flushUnReadList(obj.index, obj.nItem);
+
+                    sleep(3000).then(() => {
+                        var j = 0, n = 0;
+                        do {
+                            n = getUnReadList();
+                            console.log("Retry:%d --> %d", j++, n);
+                        } while (n == 0);
+
+                        console.log("Finish getUnReadList");
+                        return;
+                    });
+
+                    return;
+                }
+
+                sleep(1000).then(() => {
+                    console.log("第" + i + "次尝试获取待阅消息条数");
+                });
+            }
+
+            console.log("没有待阅消息需要处理");
+        } else if (request.action == "get_items") {
+            getUnReadList();
+        } else if (request.action == "tab_info") {
+            chrome.runtime.sendMessage({ from: "content_scripts", to: "background", action: 'run_table' }, function (response) {
+                console.log(response);
+            });
+        } else if (request.action == "read_page") {
+            sendResponse("");
+            var rd = document.getElementById('toRead');
+            rd.click();
+            console.log("Click Button:%o", rd);
+            chrome.runtime.sendMessage({ from: "content_scripts", to: "background", action: 'click_table', tabId: request.tabId }, function (response) {
+                console.log(response);
+            });
+        }
+    }
+);

js/popup.js

@@ -0,0 +1,76 @@
+var bg = chrome.extension.getBackgroundPage();
+
+/* var testButton = document.getElementById('test_btn');
+var getItemsButton = document.getElementById('getItems_btn');
+var tabInfoButton = document.getElementById('tabInfo_btn');
+
+testButton.addEventListener('click', function () {
+    console.log('debug tab:');
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, { from: 'popup', to: 'content_scripts', action: 'run_title' }, function (response) {
+            console.log(response);
+        });
+    });
+});
+
+getItemsButton.addEventListener('click', function () {
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, { from: 'popup', to: 'content_scripts', action: 'get_items' }, function (response) {
+            console.log(response);
+        });
+    });
+});
+
+tabInfoButton.addEventListener('click', function () {
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, { from: 'popup', to: 'content_scripts', action: 'tab_info' }, function (response) {
+            console.log(response);
+        });
+    });
+});
+ */
+
+var runButton = document.getElementById('checkboxThreeInput');
+
+runButton.addEventListener('click', function () {
+    console.log('debug tab:');
+    var cmd = "stop_cmd";
+    if (runButton.checked) {
+        cmd = "run_cmd"
+    }
+
+    chrome.runtime.sendMessage({ from: 'popup', to: 'content_scripts', action: cmd }, function (response) {
+        console.log(response);
+    });
+    /* chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+        chrome.tabs.sendMessage(tabs[0].id, { from: 'popup', to: 'content_scripts', action: cmd }, function (response) {
+            console.log(response);
+        });
+    }); */
+});
+
+//var tabInfoButton = document.getElementById('runProgress');
+
+/* chrome.extension.onMessage.addListener(
+    function (request, sender, sendResponse) {
+        console.log('收到消息', request);
+        sendResponse("回答处理结果");
+    }
+); */
+
+/* var prog = 0;
+
+window.onload = function () {
+    var tolProgress = document.getElementById('runProgress');
+    var prgTimer = setInterval(function () {
+        tolProgress.style.width = prog + "%";
+        console.log("Progress: %d", prog);
+        if(prog++ >= 100) {
+            clearInterval(prgTimer);
+        }
+    }, 100);
+} */
+
+window.onload = function () {
+    runButton.checked = bg.g_isRunCmd;
+}

manifest.json

@@ -0,0 +1,28 @@
+{
+    "name": "HelloChrome",
+    "version": "1.0.0",
+    "manifest_version": 2,
+    "description": "Automatic Read Files",
+    "page_action": {
+        "default_title": "say",
+        "default_icon": "icon/icon.png",
+        "default_popup": "popup.html"
+    },
+    "background": {
+        "scripts": [
+            "js/background.js"
+        ],
+        "persistent": false
+    },
+    "content_scripts": [
+        {
+            "matches": ["https://oa.komect.com/oa*"],
+            "js": ["js/oa.js"],
+            "run_at": "document_start"
+        }
+    ],
+    "permissions": [
+        "declarativeContent",
+        "tabs"
+    ]
+}

popup.html

@@ -0,0 +1,33 @@
+<!-- <!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body style="width:200px ;height:100px">
+    <h1>Hello, Chrome</h1>
+    <button id="test_btn">Go Pages</button>
+    <button id="getItems_btn">Get Items</button>
+    <button id="tabInfo_btn">Tab Info</button>
+    <script src='js/popup.js'></script>
+</body>
+</html> -->
+
+<link rel="stylesheet" href="css/popup.css">
+<h2 style="text-align:center">Automatic Read Files</h2>
+
+<div class="card">
+    <img src="https://static.runoob.com/images/mix/img_avatar.png" alt="John" style="width:250px">
+    <div class="container">
+        <div class="checkboxThree">
+            <input type="checkbox" value="1" id="checkboxThreeInput" name="" />
+            <label for="checkboxThreeInput"></label>
+        </div>
+        <ul id="skill">
+            <li><span class="bar graphic-design" id="runProgress"></span>
+                <h3>Graphic Design</h3>
+            </li>
+        </ul>
+        <script src='js/popup.js'></script>
+    </div>
+</div>