added support for account number.

bunjik · Jan 10, 2022 · b79dc49 · b79dc49
1 parent 10adadf
commit b79dc49
Show file tree

Hide file tree

Showing 7 changed files with 210 additions and 149 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,12 @@
 # aws-console-customize-extension
+
+![Chrome Web Store](https://img.shields.io/chrome-web-store/v/cjpikjjajakahcpglopbmobcoiibcpcd.svg)
+
 customize aws console chrome-extension
 
+- Ver 1.0.2
+  - added support for account number.
+
 - Ver 1.0.1
   - change header area detection.
 

diff --git a/css/extension.css b/css/extension.css
@@ -1,16 +1,11 @@
-#ruleLabel {
-    position: fixed;
-    top:  6px;
-    left: 4px;
-    background-color: white;
-    color:black;
-    opacity:0.8;
-    font-size:15px;
-    padding: 4px 10px;
-    z-index: 9999;
-    font-weight:700;
-    border-radius: 5px;
-    pointer-events: none;
+body.extension {
+    margin: 0px;
+    padding: 0px;
+    background-color: #FFFFFF;
+    min-height:240px; 
+    height:auto !important; 
+    height:100vh;
+    max-height: 100vh;
 }
 
 #previewLabel {
@@ -20,19 +15,43 @@
     background-color: white;
     color:black;
     opacity:0.7;
-    font-size:15px;
-    padding: 4px 10px;
+    font-size:12px;
+    padding: 2px 10px;
     z-index: 999;
     font-weight:700;
     border-radius: 5px;
     pointer-events: none;
     line-height: 1.6em;
     font-family: sans-serif;
+    white-space: nowrap;
 }
 
-body.extension {
-    margin: 10px;
-    background-color: #FFFFFF;
+.previewHeader {
+    display: flex;
+    align-items: center;
+    position: relative; 
+    color: white; 
+    line-height: 32px; 
+    text-shadow: 0 1px 0 #000;
+    _width: 25em;
+    _max-width: calc(80vw - 4px);
+    _border-radius: 3px;
+}
+
+#nav-logo {
+    position:relative;
+    margin-left: .5em;
+    margin-right: .5em;
+    vertical-align: middle;
+    width: 40px;
+    height: 24px;
+    background-image:url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDgwIDQ3Ij48c3R5bGU+LnN0MHtjbGlwLXBhdGg6dXJsKCNTVkdJRF8zXyk7fTwvc3R5bGU+PGRlZnM+PHBhdGggaWQ9IlNWR0lEXzFfIiBkPSJNNTkuMSAyMi44Yy43LjQgMS45LjkgMy4yIDEuMiAxLjMuMyAzLjUuNiA0LjkuNiAxLjQgMCAyLjYtLjIgMy44LS41IDEuMS0uMyAyLjEtLjggMy0xLjUuOC0uNiAxLjUtMS40IDEuOS0yLjMuNS0uOS43LTIuMS43LTMuMiAwLTEuNC0uNC0yLjYtMS4yLTMuNy0uOC0xLjEtMi4yLTEuOS00LjEtMi41bC0zLjgtMS4yYy0xLjQtLjUtMi40LS44LTIuOS0xLjNzLS44LTEuMS0uOC0xLjhjMC0xLjEuNC0xLjggMS4zLTIuMy44LS41IDItLjYgMy41LS42IDEuOSAwIDMuOS42IDUuNCAxLjMuNS4yLjguMyAxIC4zLjQgMCAuNi0uMy42LS44bC4xLTEuNWMwLS43LS40LTEuMy0uOS0xLjUtLjQtLjMtMS45LS44LTMuMS0xLjEtLjUtLjEtMS4xLS4yLTEuNy0uMy0uNi0uMS0xLjItLjEtMS44LS4xLTEuMiAwLTIuMy4xLTMuNC40LTEuMS4zLTIgLjgtMi44IDEuNC0uOC42LTEuNCAxLjMtMS45IDIuMi0uNS44LS43IDEuOC0uNyAyLjkgMCAxLjQuNCAyLjYgMS4zIDMuOC45IDEuMiAyLjMgMS45IDQuMyAyLjZsMy45IDEuMmMxLjMuNCAyLjIuOSAyLjcgMS40LjUuNS43IDEuMS43IDEuOCAwIDEuMS0uNSAxLjktMS40IDIuNS0uOS41LTIuMi44LTMuOS44LTEuMSAwLTQtLjQtNy4xLTEuNi0uMy0uMS0uNS0uMi0uNy0uMy0uMi0uMS0uMy0uMS0uNS0uMS0uNCAwLS42LjQtLjYuOXYxLjNjMCAuMi4xLjUuMi43LjEuNC40LjYuOC45em0tMjcuNi0uMmMuMi41LjMuOS42IDEgLjIuMi42LjMgMSAuM2gyLjNjLjUgMCAuOS0uMSAxLjEtLjMuMi0uMi40LS41LjUtMS4xbDQuMS0xNi44IDQuMSAxNi44Yy4xLjUuMy45LjUgMS4xLjIuMi42LjMgMS4xLjNoMi4zYy41IDAgLjgtLjEgMS0uMy4yLS4yLjQtLjUuNi0xbDYuNC0yMC4yYy4xLS4zLjItLjUuMi0uNnYtLjRjMC0uNC0uMi0uNi0uNy0uNmgtMi41Yy0uNSAwLS44LjEtMSAuMy0uMi4yLS40LjUtLjUgMUw0OCAxOS41IDQzLjggMmMtLjEtLjUtLjMtLjktLjUtMS0uMi0uMi0uNi0uMy0xLjEtLjNoLTIuMWMtLjUgMC0uOS4xLTEuMS4zLS4yLjItLjQuNS0uNSAxbC00LjEgMTcuM0wyOS45IDJjLS4yLS41LS4zLS45LS41LTEtLjItLjItLjYtLjMtMS0uM2gtMi42Yy0uNCAwLS43LjItLjcuNiAwIC4yLjEuNS4yIDEuMWw2LjIgMjAuMnpNMTUuMSAxMC40Yy0xLS4xLTEuOS0uMi0yLjgtLjItMi43IDAtNC45LjctNi41IDItMS42IDEuNC0yLjQgMy4yLTIuNCA1LjQgMCAyLjEuNyAzLjggMiA1IDEuMyAxLjMgMy4xIDEuOSA1LjMgMS45IDMuMSAwIDUuNy0xLjIgNy44LTMuNi4zLjYuNiAxLjEuOCAxLjUuMy40LjYuOCAxIDEuMi4yLjIuNS40LjguNC4yIDAgLjQtLjEuNy0uMmwxLjctMS4xYy4zLS4yLjUtLjUuNS0uOCAwLS4yLS4xLS40LS4yLS42LS40LS43LS43LTEuMy0uOS0xLjktLjItLjYtLjMtMS40LS4zLTIuM1Y4LjZjMC0yLjktLjctNS0yLjItNi40QzE4LjkuOCAxNi42LjEgMTMuNC4xYy0xLjUgMC0yLjguMi00LjEuNS0xLjQuMi0yLjUuNi0zLjQgMS4xLS40LjItLjYuNC0uOC41LS4xLjItLjIuNS0uMiAxdjEuM2MwIC41LjIuOC42LjguMSAwIC4yIDAgLjQtLjEuMiAwIC41LS4yLjktLjMgMS0uNCAxLjktLjcgMi45LS45IDEtLjIgMS45LS4zIDIuOS0uMyAyIDAgMy41LjQgNC4zIDEuMi44LjcgMS4zIDIuMSAxLjMgNC4xdjEuOWMtMS4xLS4yLTIuMS0uNC0zLjEtLjV6bTMuMSA0LjZjMCAuOS0uMSAxLjYtLjMgMi4zLS4yLjYtLjUgMS4yLS45IDEuNy0uNy44LTEuNiAxLjQtMi41IDEuNy0xIC4zLTEuOS41LTIuNy41LTEuMiAwLTIuMS0uMy0yLjgtLjktLjctLjYtMS0xLjUtMS0yLjggMC0xLjMuNC0yLjMgMS4zLTMgLjktLjcgMi4yLTEuMSA0LTEuMS44IDAgMS42LjEgMi41LjIuOS4xIDEuNy4zIDIuNC40djF6Ii8+PC9kZWZzPjxkZWZzPjxwYXRoIGlkPSJTVkdJRF8yXyIgZD0iTTcxIDM1LjNjLTkuOCA0LjEtMjAuNSA2LjEtMzAuMiA2LjEtMTQuNCAwLTI4LjMtMy45LTM5LjYtMTAuMy0xLS42LTEuNy40LS45IDEuMkMxMC44IDQxLjUgMjQuNiA0NyAzOS45IDQ3YzEwLjkgMCAyMy42LTMuNCAzMi40LTkuNyAxLjUtMSAuMi0yLjYtMS4zLTJ6bTguNy00LjljLTEtMS4yLTkuMi0yLjItMTQuMiAxLjMtLjguNS0uNiAxLjMuMiAxLjIgMi44LS4zIDkuMS0xLjEgMTAuMi4zIDEuMSAxLjQtMS4yIDcuMi0yLjMgOS44LS4zLjguNCAxLjEgMS4xLjUgNC43LTMuOCA2LTExLjkgNS0xMy4xeiIvPjwvZGVmcz48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgb3ZlcmZsb3c9InZpc2libGUiIGZpbGw9IiNGRkYiLz48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8yXyIgb3ZlcmZsb3c9InZpc2libGUiIGZpbGw9IiNGODk5MUQiLz48Y2xpcFBhdGggaWQ9IlNWR0lEXzNfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgb3ZlcmZsb3c9InZpc2libGUiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iIGNsYXNzPSJzdDAiPjx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzJfIiBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+PC9zdmc+');
+    background-position:center;
+    _background-size:contain;
+    background-size: 24px;
+    text-indent: -9999em;
+    background-repeat: no-repeat;
+    float:  left;
 }
 
 .disable_rule {

diff --git a/extension.js b/extension.js
@@ -2,61 +2,75 @@
  * AWS Console Customize Extension
  * Created by fumiharu kinoshita
  */
+const agent = window.navigator.userAgent.toLowerCase();
+const SETTING_KEY = 'awsconsole';
+
+function getStorage() {
+  if (agent.indexOf("chrome") != -1) {
+    // chrome extension
+    return new Promise((resolve, reject) => {
+      chrome.storage.sync.get(SETTING_KEY, (ruleList) => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError);
+        } else {
+          resolve(ruleList);
+        }
+      })
+    });
+  } else {
+    // other browser
+    return browser.storage.sync.get(SETTING_KEY);
+  }
+}
+
+function applyRule(rule) {
+  // header
+  $('header > nav').css('background-color', rule.color);
+  $('.globalNav-0366 > a').css('background-color', rule.color);
+
+  // footer
+  $('#console-nav-footer-inner').css('background-color', rule.color);
+
+  // label
+  if (rule.showLabel && rule.label != null && rule.label.length > 0) {
+    $('body').prepend('<span id="ruleLabel">' + rule.label + '</span>');
+  }
+}
+
+
 $(function() {
-    // get username, account number, region
-
-    var nameElm = $("#nav-usernameMenu span:first span:first");
-    //var nameElm = $(".ThRjn7o-KwO0459UzmvoU.w8Kxy2XztOAkWobGpdJLt span:first");
-    if (nameElm.length == 0) {
-        // old layout
-        nameElm = $("#nav-usernameMenu");
-    }
-    var name = nameElm.text();
-    //console.log(name);
-
-    var acctElm = $("span[data-testid='aws-my-account-details']");
-    var acct = acctElm.text();
-
-    var regions = location.search.match(/region=(.*?)(&|$)/);
-    var region = "";
-    if (regions != null && regions.length > 1) {
-        region = regions[1];
-    }
-
-    // show/hide label
-    $('#consoleNavHeader').hover( 
-            () => $('#ruleLabel').css('visibility', 'hidden'),
-            () => $('#ruleLabel').css('visibility', '')
-    );
-
-    // load setting.
-    chrome.storage.sync.get(['awsconsole'], function(ruleList) {
-        ruleList.awsconsole.some(rule => { 
-            var re = new RegExp(rule.user);
-            if (rule.enableRule && (re.test(name) || re.test(acct))) {
-                if (region == rule.region || "all-region" == rule.region) {
-                    // apply rule.
-
-                    // for old layout
-                    $('#nav-menubar').css('background-color', rule.color);
-                    $('.nav-menu').css('background-color', rule.color);
-                    $('#nav-menu-right').css('background-color', rule.color);
-                    $('#console-nav-footer').css('background-color', rule.color);
-
-                    // for new layout
-                    $('#awsc-nav-header').css('background-color', rule.color);
-                    $('#console-nav-footer-inner').css('background-color', rule.color);
-
-                    // update layout
-                    //$('.globalNav-0324').css('background-color', rule.color);
-                    $('header > nav').css('background-color', rule.color);
-
-                    if (rule.showLabel && rule.label != null && rule.label.length > 0) {
-                        $('body').prepend('<span id="ruleLabel">' + rule.label + '</span>');
-                    }
-                    return true;
-                }
-            }
-        });
+  // get username, accountId, region
+  var name = $("span[data-testid='awsc-nav-account-menu-button'] span:first").text();
+  var acct = $("div[data-testid='account-detail-menu'] span:nth-child(2)").text();
+  acct = acct.replaceAll('-', '');
+  //console.log(name, accountId);
+
+  var regions = location.search.match(/region=(.*?)(&|$)/);
+  var region = "";
+  if (regions != null && regions.length > 1) {
+    region = regions[1];
+  }
+
+  // show/hide label
+  $('#consoleNavHeader').hover( 
+      () => $('#ruleLabel').css('visibility', 'hidden'),
+      () => $('#ruleLabel').css('visibility', '')
+  );
+
+  // load setting.
+  getStorage().then(ruleList => {
+    ruleList[SETTING_KEY].some(rule => { 
+      var re = new RegExp(rule.user);
+      if (rule.enableRule && (re.test(name) || re.test(acct))) {
+        if (region == rule.region || "all-region" == rule.region) {
+          // apply rule.
+          applyRule(rule);
+          return true;
+        }
+      }
     });
+  }, 
+  err => {
+    console.error(err);
+  });
 });
diff --git a/js/common.js b/js/common.js
@@ -0,0 +1,42 @@
+
+const agent = window.navigator.userAgent.toLowerCase();
+const SETTING_KEY = 'awsconsole';
+
+function getStorage() {
+  if (agent.indexOf("chrome") != -1) {
+    // chrome extension
+    return new Promise((resolve, reject) => {
+      chrome.storage.sync.get(SETTING_KEY, (ruleList) => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError);
+        } else {
+          resolve(ruleList);
+        }
+      })
+    });
+  } else {
+    // other browser
+    return browser.storage.sync.get(SETTING_KEY);
+  }
+}
+
+function setStorage(val) {
+  var data = {};
+  data[SETTING_KEY] = val;
+  if (agent.indexOf("chrome") != -1) {
+    // chrome extension
+    return new Promise((resolve, reject) => {
+      chrome.storage.sync.set(data, () => {
+        if (chrome.runtime.lastError) {
+          reject(chrome.runtime.lastError);
+        } else {
+          resolve();
+        }
+      });
+    });
+  } else {
+    // other browser
+    return browser.storage.sync.set(data);
+  }
+}
+
diff --git a/js/options.js b/js/options.js
@@ -1,6 +1,6 @@
 var app = angular.module('awsConsoleModApp', ['ui.bootstrap', 'ui.sortable', 'colorpicker.module']);
 
-//directive
+// directive
 app.directive('fileModel',function($parse){
     return{
         restrict: 'A',
@@ -18,7 +18,10 @@ app.directive('fileModel',function($parse){
 // translate filter
 app.filter('translate', function() {
     return function(key) {
-        var res = chrome.i18n.getMessage(key.replace(/-/g, '_'));
+        var res = key;
+        if (agent.indexOf("chrome") != -1) {
+            res = chrome.i18n.getMessage(key.replace(/-/g, '_'));
+        }
         return res != '' ? res : key;
     }
 });
@@ -67,24 +70,20 @@ app.controller('appCtrl', ['$scope', '$filter', function ($scope, $filter) {
     $scope.previewRule = defaultRule;
 
     $scope.ruleList = [];
-
-    //$scope.orgRulelist = [];
-    //$scope.prevIdx = -99;
+    $scope.orgRuleList = [];
 
     $scope.loadSetting = function() {
-        //console.log("loadSetting...");
-
-        chrome.storage.sync.get(['awsconsole'], function(result) {
-           $scope.ruleList = result.awsconsole || [];
-           if ($scope.ruleList.length == 0) {
-                $scope.ruleList.push(angular.copy(defaultRule));
-           }
-           //$scope.orgRulelist = angular.copy($scope.ruleList);
-           $scope.$applyAsync();
+        getStorage().then(result => {
+            $scope.ruleList = result.awsconsole || [];
+            if ($scope.ruleList.length == 0) {
+                 $scope.ruleList.push(angular.copy(defaultRule));
+            }
+            $scope.orgRulelist = angular.copy($scope.ruleList);
+            $scope.$applyAsync();
         });
     }
 
-    // check modified rule
+    // check modified rule.
     $scope.checkModified = function() { 
     }
 
@@ -116,8 +115,7 @@ app.controller('appCtrl', ['$scope', '$filter', function ($scope, $filter) {
 
     // save rule.
     $scope.apply = function() {
-        chrome.storage.sync.set({ awsconsole: angular.copy($scope.ruleList) }, function() {
-        });
+        setStorage(angular.copy($scope.ruleList)).then(() => console.log("saved"));
     }
 
     // export rule.
@@ -160,11 +158,6 @@ app.controller('appCtrl', ['$scope', '$filter', function ($scope, $filter) {
         } else {
             $scope.previewRule = defaultRule;
         }
-        // check modified
-        //if (idx != $scope.prevIdx) {
-        //    console.log("check modify. [" + idx + "]");
-        //    $scope.prevIdx = idx;
-        //}
     }
 
     $scope.sortableOptions = {

diff --git a/manifest.json b/manifest.json
@@ -2,16 +2,21 @@
   "manifest_version": 2,
   "name": "__MSG_ext_name__",
   "description": "__MSG_ext_description__",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "default_locale": "en",
   "content_scripts": [
     {
+      "run_at":"document_end",
       "matches": ["https://*.console.aws.amazon.com/*"],
       "js": ["js/jquery.min.js", "extension.js"],
       "css": ["css/extension.css"]
     }
   ],
-  "options_page": "options.html",
+  "options_ui": {
+    "browser_style": true,
+    "open_in_tab": true,
+    "page": "options.html"
+  },
   "permissions": [
     "storage"
   ],