7 years ago · 5514827196
--- a/README.md
+++ b/README.md
@@ -0,0 +1,9 @@
 
				+#Auto-refresh
			
 
				+
			
 
				+最近开发的一款chrome插件，总结相关技术文档，资源。
			
 
				+
			
 
				+##开发
			
 
				+1、 clone代码
			
 
				+2、 
			
 
				+##资料
			
 
				+1、 360chrome开发文档：http://open.chrome.360.cn/extension_dev/overview.html
			
--- a/src/background.html
+++ b/src/background.html
@@ -0,0 +1,10 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+    </head>
			
 
				+    <body>
			
 
				+        <script type="text/javascript" src="static/js/network.js"></script>
			
 
				+        <script src="static/js/moment.js"></script>
			
 
				+        <script src="static/js/background.js"></script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/src/icon.png
+++ b/src/icon.png
--- a/src/icon128.png
+++ b/src/icon128.png
--- a/src/icon48.png
+++ b/src/icon48.png
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -0,0 +1,28 @@
 
				+{
			
 
				+"update_url": "https://clients2.google.com/service/update2/crx",
			
 
				+
			
 
				+  "name": "Auto Refresh",
			
 
				+  "version": "1.0.0",
			
 
				+  "manifest_version": 2,
			
 
				+  "description": "Auto Refresh is the best extension to refresh on a timer",
			
 
				+  "icons": {
			
 
				+    "16": "icon.png",
			
 
				+    "48": "icon48.png",
			
 
				+    "128": "icon128.png"
			
 
				+  },
			
 
				+  "browser_action": {
			
 
				+    "default_icon": "icon.png",
			
 
				+    "default_title": "Auto Refresh",
			
 
				+    "default_popup": "popup.html"
			
 
				+  },
			
 
				+  "background": {
			
 
				+    "page": "background.html"
			
 
				+  },
			
 
				+  "permissions": [
			
 
				+  	"tabs",
			
 
				+  	"activeTab",
			
 
				+  	"storage",
			
 
				+  	"<all_urls>"
			
 
				+  ],
			
 
				+  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://s3.amazonaws.com; object-src 'self'"
			
 
				+}
			
--- a/src/popup.html
+++ b/src/popup.html
@@ -0,0 +1,33 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+    <head>
			
 
				+        <title>Auto Refresh</title>
			
 
				+        <link rel="stylesheet" type="text/css" href="static/css/main.css" />
			
 
				+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
			
 
				+    </head>
			
 
				+    <body>
			
 
				+        <header>Auto Refresh <span class="light">by <a href="http://64px.com" target="_blank">64 Pixels</a></span></header>
			
 
				+        <div id="time">
			
 
				+            <section>
			
 
				+                <input type="number" value="0" min="0" id="minutes" step="1" pattern="\d+" />
			
 
				+                <span class="label">Minutes</span>
			
 
				+            </section>
			
 
				+            <section>
			
 
				+                <input type="number" value="15" min="0" id="seconds" step="1" pattern="\d+" />
			
 
				+                <span class="label">Seconds</span>
			
 
				+            </section>
			
 
				+            <section>
			
 
				+                <button id="start">Start</button>
			
 
				+                <button id="stop">Stop</button>
			
 
				+                <span class="label"></span>
			
 
				+            </section>
			
 
				+        </div>
			
 
				+        <footer>
			
 
				+            <a href="http://blog.yoqi.me" target="_blank" style="float: left">More Extensions</a>
			
 
				+            <span id="defaultSuccess">✔</span>
			
 
				+            <a href="#" id="default">Set Default</a>
			
 
				+        </footer>
			
 
				+        <script type="text/javascript" src="static/js/jquery.js"></script>
			
 
				+        <script type="text/javascript" src="static/js/main.js"></script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/src/static/css/Lato-Hairline.ttf
+++ b/src/static/css/Lato-Hairline.ttf
--- a/src/static/css/Lato-Light.ttf
+++ b/src/static/css/Lato-Light.ttf
--- a/src/static/css/Lato-Regular.ttf
+++ b/src/static/css/Lato-Regular.ttf
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -0,0 +1,132 @@
 
				+* {
			
 
				+    -webkit-box-sizing: border-box;
			
 
				+}
			
 
				+
			
 
				+@font-face {
			
 
				+  font-family: 'Lato';
			
 
				+  font-style: normal;
			
 
				+  font-weight: 100;
			
 
				+  src: local('Lato Hairline'), local('Lato-Hairline'), url('Lato-Hairline.ttf') format('truetype');
			
 
				+}
			
 
				+@font-face {
			
 
				+  font-family: 'Lato';
			
 
				+  font-style: normal;
			
 
				+  font-weight: 300;
			
 
				+  src: local('Lato Light'), local('Lato-Light'), url('Lato-Light.ttf') format('truetype');
			
 
				+}
			
 
				+@font-face {
			
 
				+  font-family: 'Lato';
			
 
				+  font-style: normal;
			
 
				+  font-weight: 400;
			
 
				+  src: local('Lato Regular'), local('Lato-Regular'), url('Lato-Regular.ttf') format('truetype');
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+    margin: 0px;
			
 
				+    padding: 5px 5px 5px 5px;
			
 
				+    width: 300px;
			
 
				+    font-family: "Lato", sans-serif;
			
 
				+    font-size: 14px;
			
 
				+}
			
 
				+
			
 
				+a {
			
 
				+    color: #3079B7;
			
 
				+    text-decoration: none;
			
 
				+}
			
 
				+
			
 
				+h1 {
			
 
				+    font-size: 18px;
			
 
				+    margin: 0px;
			
 
				+    padding: 5px;
			
 
				+}
			
 
				+
			
 
				+.light {
			
 
				+    font-weight: normal;
			
 
				+    opacity: 0.5;
			
 
				+    font-size: 12px;
			
 
				+}
			
 
				+
			
 
				+#defaultSuccess {
			
 
				+    color: #68A600;
			
 
				+    display: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+#time input {
			
 
				+    padding: 5px;
			
 
				+    border: 1px solid #aaa;
			
 
				+    font-size: 14px;
			
 
				+    display: block;
			
 
				+    margin: 0px;
			
 
				+    width: 100%;
			
 
				+    text-align: right;
			
 
				+    outline: none;
			
 
				+    font-family: "Lato", sans-serif;
			
 
				+}
			
 
				+
			
 
				+#time {
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+#time .label {
			
 
				+    display: block;
			
 
				+    height: 20px;
			
 
				+    line-height: 20px;
			
 
				+    text-align: right;
			
 
				+    
			
 
				+}
			
 
				+
			
 
				+#time section {
			
 
				+    width: 33%;
			
 
				+    padding: 0px 5px 5px 0px;
			
 
				+    float: left;
			
 
				+}
			
 
				+
			
 
				+#time section:nth-child(3)  {
			
 
				+    width: 34%;
			
 
				+    padding-right: 0px;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+#time button {
			
 
				+    width: 100%;
			
 
				+}
			
 
				+
			
 
				+header {
			
 
				+    display: block;
			
 
				+    margin-bottom: 10px;
			
 
				+    font-weight: bold;
			
 
				+    padding: 5px;
			
 
				+    border-bottom: 1px solid #000;
			
 
				+}
			
 
				+
			
 
				+footer {
			
 
				+    display: block;
			
 
				+    margin-top: 10px;
			
 
				+    padding: 5px;
			
 
				+    border-top: 1px solid #ddd;
			
 
				+    font-size: 12px;
			
 
				+    text-align: right;
			
 
				+}
			
 
				+
			
 
				+button {
			
 
				+    font-family: "Lato", sans-serif;
			
 
				+    background-color: #3079B7;
			
 
				+    background: -webkit-linear-gradient(#3079B7, #296da7);
			
 
				+    color: #fff;
			
 
				+    font-weight: 400;
			
 
				+    border: 1px solid #296da7;
			
 
				+    border-radius: none;
			
 
				+    height: 29px;
			
 
				+    outline: none;
			
 
				+    font-size: 14px;
			
 
				+}
			
 
				+
			
 
				+button:active {
			
 
				+    position: relative;
			
 
				+    top: 1px;
			
 
				+}
			
 
				+
			
 
				+#stop {
			
 
				+    display: none;
			
 
				+}
			
--- a/src/static/js/background.js
+++ b/src/static/js/background.js
@@ -0,0 +1,47 @@
 
				+(function() {
			
 
				+    var _timers = {};
			
 
				+    var timers = {
			
 
				+        get: function(id) {
			
 
				+            return _timers[id] || false;
			
 
				+        },
			
 
				+        set: function(tab, interval) {
			
 
				+            var id = tab.id;
			
 
				+            
			
 
				+            (_timers[id]) && timers.remove(tab.id);
			
 
				+            _timers[id] = {
			
 
				+                tab: tab,
			
 
				+                nextRefresh: (new Date).getTime() + interval,
			
 
				+                interval: interval,
			
 
				+                timer: timers.start(id, interval)
			
 
				+            };
			
 
				+        },
			
 
				+        remove:  function(id) {
			
 
				+            if(_timers[id]) {
			
 
				+                chrome.browserAction.setBadgeText({tabId: id, text: ''});
			
 
				+                clearInterval(_timers[id].timer);//不定时刷新
			
 
				+                delete _timers[id];
			
 
				+            }
			
 
				+        },
			
 
				+        start: function(id, interval) {
			
 
				+            return setInterval(function() {
			
 
				+                if(_timers[id] && (new Date).getTime() >= _timers[id].nextRefresh) {
			
 
				+                    chrome.tabs.reload(id, function() {
			
 
				+                        setTimeout(function() {
			
 
				+                            _timers[id].nextRefresh = (new Date).getTime() + _timers[id].interval + 999;
			
 
				+                        }, 1);
			
 
				+                    });   
			
 
				+                } else if(_timers[id]) {
			
 
				+                    var timeLeft = moment(_timers[id].nextRefresh - (new Date).getTime());
			
 
				+                        
			
 
				+                    chrome.browserAction.setBadgeText({tabId: id, text: '' + timeLeft.format('m:ss')});
			
 
				+                } else {
			
 
				+                    timers.remove(id);
			
 
				+                }
			
 
				+            }, 500);
			
 
				+        }
			
 
				+    };
			
 
				+    
			
 
				+    // Set timers on the window object so we can access it from the popdown
			
 
				+    window.timers = timers;
			
 
				+    
			
 
				+})();
			
--- a/src/static/js/jquery.js
+++ b/src/static/js/jquery.js
--- a/src/static/js/main.js
+++ b/src/static/js/main.js
@@ -0,0 +1,47 @@
 
				+$(function() {
			
 
				+	//getBackgroundPage:background.html,背景页不显示，所以只有js执行。
			
 
				+    var ext = chrome.extension.getBackgroundPage(),
			
 
				+        $min = $('#minutes'),
			
 
				+        $sec = $('#seconds'),
			
 
				+        swapButtons = function() {
			
 
				+            $('#start,#stop').toggle();//切换元素的可见状态,开始/暂停
			
 
				+        };
			
 
				+    
			
 
				+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
			
 
				+        var timer = ext.timers.get(tabs[0].id);
			
 
				+        if(timer) {
			
 
				+            swapButtons();
			
 
				+            var min = timer.interval / (60 * 1000);
			
 
				+            $min.val(Math.floor(min));
			
 
				+            $sec.val(Math.round((min - Math.floor(min)) * 60));
			
 
				+        } else {
			
 
				+            $min.val(localStorage.defaultMin || 0);
			
 
				+            $sec.val(localStorage.defaultSec || 15);
			
 
				+        }
			
 
				+    });
			
 
				+    
			
 
				+    $('#start').on('click', function() {
			
 
				+        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
			
 
				+            var interval = ($min.val() * 60 * 1000) + ($sec.val() * 1000);
			
 
				+            ext.timers.set(tabs[0], interval);
			
 
				+        });
			
 
				+        swapButtons();
			
 
				+    });
			
 
				+    
			
 
				+    $('#stop').on('click', function() {
			
 
				+        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
			
 
				+            ext.timers.remove(tabs[0].id);
			
 
				+        });
			
 
				+        swapButtons();
			
 
				+    });
			
 
				+    
			
 
				+    $('#default').on('click', function() {
			
 
				+        localStorage.defaultMin = $min.val();
			
 
				+        localStorage.defaultSec = $sec.val();
			
 
				+        $('#defaultSuccess').show().delay(500).fadeOut('fast');
			
 
				+    });
			
 
				+    
			
 
				+    setTimeout(function() {
			
 
				+        $sec.focus()[0].select();
			
 
				+    }, 100);
			
 
				+});
			
--- a/src/static/js/moment.js
+++ b/src/static/js/moment.js
--- a/src/static/js/network.js
+++ b/src/static/js/network.js
@@ -0,0 +1,15 @@
 
				+(function(app, didRun) {
			
 
				+    
			
 
				+    var displayName = app.name.replace(/[^a-z0-9\s]/gi, '').replace(/\s{2,}/g, ' ').replace(/\s/g, '-')
			
 
				+        url = 'http://64px.com/' + encodeURIComponent(displayName).toLowerCase() + '/' + app.id + '/install';
			
 
				+    
			
 
				+    if(chrome.runtime && chrome.runtime.setUninstallURL) {
			
 
				+        chrome.runtime.setUninstallURL('http://64px.com/' + encodeURIComponent(displayName).toLowerCase() + '/' + app.id + '/uninstall');
			
 
				+    }
			
 
				+    
			
 
				+    if(didRun) { return; }
			
 
				+    
			
 
				+    localStorage._networkOnce = '1';
			
 
				+    window.open(url);
			
 
				+    
			
 
				+})(chrome.app.getDetails(), localStorage._networkOnce);