init commit

background.js

@@ -0,0 +1,59 @@
+var WillowRoute = [];
+var typeMap = {
+    "txt"   : "text/plain",
+    "html"  : "text/html",
+    "css"   : "text/css",
+    "js"    : "text/javascript",
+    "json"  : "text/json",
+    "xml"   : "text/xml",
+    "jpg"   : "image/jpeg",
+    "gif"   : "image/gif",
+    "png"   : "image/png",
+    "webp"  : "image/webp"
+}
+
+function getLocalStorage() {
+    WillowRoute = window.localStorage.WillowRoute ? JSON.parse(window.localStorage.WillowRoute) : WillowRoute;
+}
+
+function getLocalFileUrl(url) {
+    var arr = url.split('.');
+    var type = arr[arr.length-1];
+    var xhr = new XMLHttpRequest();
+    xhr.open('get', url, false);
+    xhr.send(null);
+    var content = xhr.responseText || xhr.responseXML;
+    if (!content) {
+        return false;
+    }
+    content = encodeURIComponent(
+        type === 'js' ?
+        content.replace(/[\u0080-\uffff]/g, function($0) {
+            var str = $0.charCodeAt(0).toString(16);
+            return "\\u" + '00000'.substr(0, 4 - str.length) + str;
+        }) : content
+    );
+    return ("data:" + (typeMap[type] || typeMap.txt) + ";charset=utf-8," + content);
+}
+
+chrome.webRequest.onBeforeRequest.addListener(function (details) {
+        var url = details.url;
+        for (var i = 0, len = WillowRoute.length; i < len; i++) {
+            var reg = new RegExp(WillowRoute[i].req, 'gi');
+            if (WillowRoute[i].checked && WillowRoute[i].res && reg.test(url)) {
+                if (!/^file:\/\//.test(WillowRoute[i].res)) {
+                    return {redirectUrl: url.replace(reg, WillowRoute[i].res)};
+                } else {
+                    return {redirectUrl: getLocalFileUrl(url.replace(reg, WillowRoute[i].res))};
+                }
+            }
+        }
+        return true;
+    },
+    {urls: ["<all_urls>"]},
+    ["blocking"]
+);
+
+getLocalStorage();
+window.addEventListener('storage', getLocalStorage, false);
+

css/popup.css

@@ -0,0 +1,97 @@
+body {
+  max-width: 300px;
+  padding-top: 15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.table {
+  width: 270px;
+  max-width: 270px;
+  margin-top: 10px;
+  overflow: hidden;
+  margin-bottom: 10px!important;
+}
+.container {
+  padding-right: 10px!important;
+  padding-left: 10px!important;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  max-height: 555px;
+}
+.btnBox {
+  position: relative;
+}
+.btnBox .btn {
+  margin: 0 3px;
+}
+td {
+  overflow: hidden;
+  position: relative;
+  width: 254px;
+  max-width: 254px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+td label {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+td input {
+  position: relative;
+  top: 1px;
+}
+td button {
+  position: absolute;
+  z-index: 1;
+  display: none;
+}
+td .remove {
+  top: 9px;
+  right: 2px;
+  display: none;
+}
+td .edit {
+  top: 9px;
+  right: 45px;
+  display: none;
+}
+td:hover .edit,
+td:hover .remove {
+  display: block;
+}
+.editBox {
+      margin-top: 10px;
+    border: solid #eee;
+}
+.errorMsg {
+  text-align: center;
+  color: red;
+}
+
+.link{
+  float: right;
+}
+.add{
+  float: left;
+}
+.form-group {
+    margin: 15px;
+    width: 555px;
+    overflow: hidden;
+}
+td label {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+label {
+    display: inline-block;
+    margin-top: 5px;
+    border-top: 1px solid #ddd;
+    font-weight: bold;
+}

js/popup.js

@@ -0,0 +1,96 @@
+'use strict';
+var willow = angular.module('willow', []);
+
+willow.controller('mapListCtrl', function ($scope) {
+    var bg = chrome.extension.getBackgroundPage();
+
+    //保存规则数据到localStorage
+    function saveData() {
+        bg.localStorage.WillowRoute = angular.toJson($scope.maps);
+    }
+
+    $scope.maps = bg.WillowRoute;
+
+    //编辑框显示状态
+    $scope.editDisplay = 'none';
+
+    $scope.addDisplay= 'block';
+
+    //编辑框保存按钮文本
+    $scope.editType = '添加';
+
+    //输入错误时候的警告
+    $scope.inputError = '';
+
+    //隐藏编辑框
+    $scope.hideEditBox = function () {
+        $scope.editDisplay = 'none';
+        $scope.addDisplay= 'block';
+    }
+
+    //显示编辑框
+    $scope.showEditBox = function () {
+        $scope.editDisplay = 'block';
+        $scope.addDisplay= 'none';
+        setTimeout(function(){
+            document.getElementById('req').select();
+        }, 55);
+    }
+
+    //验证输入合法性
+    $scope.virify = function () {
+        if (!$scope.curRule.req || !$scope.curRule.res) {
+            $scope.inputError = '输入不能为空';
+            return false;
+        }
+        try {
+            new RegExp($scope.curRule.req)
+        } catch (e) {
+            $scope.inputError = '正则格式错误';
+            return false;
+        }
+        $scope.inputError = '';
+        return true;
+    }
+
+    // 点击添加按钮
+    $scope.addRule = function () {
+        $scope.curRule = {
+            req: 'http://www.pingan.com/',
+            res: 'http://127.0.0.1:8080/',
+            checked: true
+        };
+        $scope.editType = '添加';
+        $scope.showEditBox();
+    };
+
+    //点击编辑按钮
+    $scope.edit = function (rule) {
+        $scope.curRule = rule;
+        $scope.editType = '编辑';
+        $scope.showEditBox();
+    }
+
+    //编辑后保存
+    $scope.saveRule = function () {
+        if ($scope.virify()) {
+            if ($scope.editType === '添加') {
+                $scope.maps.push($scope.curRule);
+            } else {
+
+            }
+            saveData();
+            $scope.hideEditBox();
+        }
+    };
+
+    //删除规则
+    $scope.removeUrl = function (rule) {
+        for (var i = 0, len = $scope.maps.length; i < len; i++) {
+            if ($scope.maps[i] === rule) {
+                $scope.maps.splice(i, 1);
+            }
+        }
+        saveData();
+    }
+});

manifest.json

@@ -0,0 +1,21 @@
+{
+   "background": {
+      "persistent": true,
+      "scripts": [ "background.js" ]
+   },
+   "browser_action": {
+      "default_icon": "icon.png",
+      "default_popup": "popup.html",
+      "default_title": "Willow"
+   },
+   "description": "跨操作系统平台的前端调试利器——映射线上资源到本地，支持目录映射。",
+   "icons": {
+      "16": "icon.png",
+      "48": "icon48.png"
+   },
+   "manifest_version": 2,
+   "name": "Willow",
+   "permissions": [ "tabs", "webRequest", "webRequestBlocking", "<all_urls>", "unlimitedStorage" ],
+   "update_url": "http://clients2.google.com/service/update2/crx",
+   "version": "1.0.6"
+}

popup.html

@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html ng-app="willow">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <link rel="stylesheet" href="css/popup.css"/>
+    <script type="text/javascript" src="js/angular.min.js"></script>
+    <script type="text/javascript" src="js/popup.js"></script>
+</head>
+<body ng-controller="mapListCtrl">
+<div class="container">
+<div class="btnBox">
+    <button tabIndex="-1" style="display:{{addDisplay}};" ng-click="addRule()" class="add">添加规则</button>
+    <a href="https://github.com/kainy/Willow" target="_blank" class="link" title="点下又不会怀孕">使用说明</a>
+    <span style="display:{{editDisplay}};">
+        <button ng-click="saveRule()">保存规则</button>
+        <button class="close" aria-hidden="true" ng-click="hideEditBox()">取消</button>
+    </span>
+</div>
+
+<div style="display:{{editDisplay}};" class="editBox">
+
+    <div class="errorMsg">{{inputError}}</div>
+    <div class="form-group">
+        <label for="req">线上目录:</label>
+        <input type="text" class="form-control" id="req" ng-model="curRule.req"/>
+    </div>
+    <div class="form-group">
+        <label for="res">开发目录:</label>
+        <input type="text" class="form-control" id="res" ng-model="curRule.res"/>
+    </div>
+
+</div>
+<table class="table table-hover">
+    <tr ng-repeat="rule in maps track by $index">
+        <td>
+            <label title="Responese: {{rule.res}}"><input type="checkbox" ng-model="rule.checked"/> {{rule.req}}</label>
+            <button ng-click="edit(rule)" type="button" class="edit">编辑</button>
+            <button ng-click="removeUrl(rule)" type="button" class="btn btn-default btn-xs remove">删除</button>
+        </td>
+    </tr>
+</table>
+
+</div>
+</body>
+</html>