From b79dc491a8e75a9500634afbd675400e227e40cf Mon Sep 17 00:00:00 2001 From: bunjik Date: Mon, 10 Jan 2022 17:36:50 +0900 Subject: [PATCH] added support for account number. --- README.md | 6 +++ css/extension.css | 55 +++++++++++++------- extension.js | 124 ++++++++++++++++++++++++++-------------------- js/common.js | 42 ++++++++++++++++ js/options.js | 37 ++++++-------- manifest.json | 9 +++- options.html | 86 +++++++++++++------------------- 7 files changed, 210 insertions(+), 149 deletions(-) create mode 100644 js/common.js diff --git a/README.md b/README.md index 6c7c584..95f2860 100644 --- 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 index e3525d0..89efc47 100644 --- 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 index a4cffc3..3a44ee0 100644 --- 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('' + rule.label + ''); + } +} + + $(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('' + rule.label + ''); - } - 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 new file mode 100644 index 0000000..8d11536 --- /dev/null +++ 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 index 297ac11..c9971ed 100644 --- 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 index 4207ca5..8db5782 100644 --- 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" ], diff --git a/options.html b/options.html index 0de419f..2ceb4d4 100644 --- a/options.html +++ b/options.html @@ -6,60 +6,55 @@ - + + - - -
-

Customize AWS Console Header Setting

-
-
+
+
{{ previewRule.label }}
+   + + + + + + + + + + + +   Customize AWS Console Header Setting
-
+
- - + +   - +
- +
-
+
-

{{ "RuleList" | translate }}

- - +
+
+ @@ -68,17 +63,19 @@

{{ "RuleList" | translate }}

- +
- {{ "Label" | translate }} {{ "AccountName" | translate }} {{ "Region" | translate }}
-
- -
+
+ +
- + @@ -100,21 +97,6 @@

{{ "RuleList" | translate }}
- -
-
-
Preview
-
-
-
{{ previewRule.label }}
- -
Services  - -
-
-
-
-