v1.1 Release

README.md

@@ -8,7 +8,7 @@ I made it because I needed it.
 
 ##### Read: http://harrydenley.com/ethaddresslookup-chrome-extension/
 
-### Installation
+### Manual Installation
 
 * Clone/download [the repo](https://github.com/409H/EtherAddressLookup).
 * Go to [chrome://extensions](chrome://extensions) in Chrome.

css/app.css

@@ -11,3 +11,18 @@
     border: 1px solid transparent;
     color: inherit;
 }
+
+#ext-etheraddresslookup-popup {
+    margin: 0;
+    padding: 0px;
+    font-family: "Arial";
+    font-size: 12pt;
+    width: 300px;
+}
+#ext-etheraddresslookup-popup #content {
+    padding: 15px;
+    margin-top: 15px;
+}
+#ext-etheraddresslookup-popup #content #footer {
+    font-size: 70%;
+}

js/DomManipulator.js

@@ -1,9 +1,54 @@
 class EtherAddressLookup {
 
-    constructor() {}
+    constructor()
+    {
+        this.setDefaultExtensionSettings();
+        this.init();
+    }
+
+    setDefaultExtensionSettings()
+    {
+        this.blHighlight = false;
+        this.intSettingsCount = 0;
+        this.intSettingsTotalCount = 1;
+    }
+
+    //Gets extension settings and then converts addresses to links
+    init()
+    {
+        chrome.runtime.sendMessage({func: "highlight_option"}, function(objResponse) {
+            console.log(objResponse);
+            if(objResponse && objResponse.hasOwnProperty("resp")) {
+                this.blHighlight = (objResponse.resp == 1 ? true : false);
+            }
+            ++this.intSettingsCount;
+        }.bind(this));
+
+        //Update the DOM once all settings have been received...
+        setTimeout(function() {
+            console.log("Settings:" + this.intSettingsCount);
+            console.log("Total: "+ this.intSettingsTotalCount);
+            if(this.intSettingsCount === this.intSettingsTotalCount) {
+                this.convertAddressToLink();
+            }
+        }.bind(this), 500)
+    }
+
+    //Finds Ethereum addresses and converts to a link to a block explorer
+    convertAddressToLink()
+    {
+        document.body.innerHTML = document.body.innerHTML.replace(
+            new RegExp("(?!.*\")(0[xX][0-9a-fA-F]{40})(?!\")(!?<\s|\<|$)", "g"),
+            `<a title="See this address on Etherscan" href="https://etherscan.io/address/$1" class="ext-etheraddresslookup-link">$1</a>$2`
+        );
 
+        if(this.blHighlight) {
+            this.addHighlightStyle();
+        }
+    }
     //Removes the highlight style
-    removeHighlightStyle() {
+    removeHighlightStyle()
+    {
         var objEtherAddresses = document.getElementsByClassName("ext-etheraddresslookup-link");
         for (var i = 0; i < objEtherAddresses.length; i++) {
             objEtherAddresses[i].classList.add("ext-etheraddresslookup-link-no_highlight");
@@ -13,7 +58,8 @@ class EtherAddressLookup {
     }
 
     //Adds the highlight style
-    addHighlightStyle() {
+    addHighlightStyle()
+    {
         var objEtherAddresses = document.getElementsByClassName("ext-etheraddresslookup-link");
         for (var i = 0; i < objEtherAddresses.length; i++) {
             objEtherAddresses[i].classList.add("ext-etheraddresslookup-link-highlight");
@@ -23,12 +69,12 @@ class EtherAddressLookup {
     }
 }
 
+let objEtherAddressLookup = new EtherAddressLookup();
+
 //Send message from the extension to here.
 chrome.runtime.onMessage.addListener(
     function(request, sender, sendResponse) {
-        console.log(request);
         if(typeof request.func !== "undefined") {
-            let objEtherAddressLookup = new EtherAddressLookup();
             if(typeof objEtherAddressLookup[request.func] == "function") {
                 objEtherAddressLookup[request.func]();
                 sendResponse({status: "ok"});

js/options.js

@@ -1,3 +1,34 @@
 (function() {
-    document.getElementById('ext-etheraddresslookup-show_style').addEventListener('click', toggleMatchHighlight);
-})();
+    //Toggle the highlight option and set it in LocalStorage
+    var objOptionAddHighlight = document.getElementById('ext-etheraddresslookup-show_style');
+    if(objOptionAddHighlight) {
+        objOptionAddHighlight.addEventListener('click', toggleMatchHighlight);
+    }
+
+    //Get the extension version
+    var objManifest = chrome.runtime.getManifest();
+    var objManifestVersion = document.getElementById('ext-manifest_version');
+    if(objManifestVersion) {
+        objManifestVersion.innerHTML = objManifest.version;
+    }
+})();
+
+chrome.runtime.onMessage.addListener(
+    function(request, sender, sendResponse) {
+        var strOption = request.func;
+        var strResponse = "";
+
+        console.log(request);
+
+        switch(strOption) {
+            case 'highlight_option' :
+                strResponse = localStorage.getItem("ext-etheraddresslookup-show_style");
+                break;
+            default:
+                strResponse = "unsupported";
+                break;
+        }
+
+        sendResponse({resp:strResponse});
+    }
+);

js/toggleMatchHighlight.js

@@ -18,7 +18,6 @@ function refreshHighlightOption() {
     //Notify the tab to do a class method
     var strMethod = (intShowHighlight == 1 ? "addHighlightStyle" : "removeHighlightStyle");
     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
-        //Construct & send message
         chrome.tabs.sendMessage(tabs[0].id, {
             "func":strMethod
         }, function(response) {

manifest.json

@@ -3,7 +3,7 @@
 
   "name": "EtherAddressLookup",
   "description": "Adds links to strings that look like Ethereum addresses to etherscan.",
-  "version": "1.0",
+  "version": "1.1",
 
   "browser_action": {
     "default_icon": "images/eth.png",
@@ -19,7 +19,7 @@
   "content_scripts":[{
     "run_at": "document_end",
     "matches": ["http://*/*", "https://*/*"],
-    "js": ["js/addLinkToEtherAddress.js", "js/DomManipulator.js"],
+    "js": ["js/DomManipulator.js"],
     "css": ["css/app.css"]
   }],
 

options.html

@@ -3,25 +3,23 @@
 <head>
     <meta charset="UTF-8">
     <title>EthAddressLookup</title>
+    <link rel="stylesheet" href="css/skyblue.min.css" type="text/css" />
+    <link rel="stylesheet" href="css/app.css" type="text/css" />
 </head>
-<body>
-    <h3>EthAddressLookup</h3>
-
-    Adds links to strings that look like Ethereum addresses to a block explorer.
-
-    <br />
-    <br />
-
-    <hr />
-
-    <label>Highlight Matches</label>
-    <input type="checkbox" name="ext-etheraddresslookup-show_style" id="ext-etheraddresslookup-show_style" />
-
-    <hr />
-
-    <img src="images/eth.png" />
-
-    <sup><a href="http://harrydenley.com/ethaddresslookup-chrome-extension/" target="_blank">Read Author Blog</a></sup>
+<body id="ext-etheraddresslookup-popup">
+    <div id="content">
+        <h3 class="text-center">EtherAddressLookup</h3>
+        <label class="fancy-checkbox">
+            <input type="checkbox" name="ext-etheraddresslookup-show_style" id="ext-etheraddresslookup-show_style">
+            <span>Highlight Matches</span>
+        </label>
+
+        <br /><br />
+        <div id="footer">
+            <a href="http://harrydenley.com/ethaddresslookup-chrome-extension/" target="_blank">Read Author Blog</a> <br />
+            <strong>Version:</strong> <span id="ext-manifest_version"></span>
+        </div>
+    </div>
 
     <script src="js/toggleMatchHighlight.js"></script>
     <script src="js/options.js"></script>