Merge pull request #21 from keraf/dev

Removed jQuery depenency, fixed error with getDomain regex, added JSE…

README.md

@@ -9,6 +9,8 @@ You can grab the extension from:
 
 Related article: https://ker.af/stop-coin-mining-in-the-browser-with-no-coin/
 
+*Made by Rafael Keramidas (keraf [at] protonmail [dot] com - [@iamkeraf](https://www.twitter.com/iamkeraf) - [ker.af](https://ker.af/)).*
+
 ### Why?
 Even though I think using coin mining in browser to monetize content is a great idea, abusing it is not. Some websites are running it during the entire browsing session which results in high consumption of your computers resources. I do believe that using it occasionally such as for the proof of work of a captcha is OK. But for an entire browsing session, the user should have the choice to opt-in which is the aim of this extension.
 
@@ -18,10 +20,8 @@ The idea was to keep it separate from adblocking. Coin mining in the browser is
 ### How does it work?
 The extension is simply blocking a list of blacklisted domains in *blacklist.txt*. Clicking on the icon will display you a button to pause/unpause No Coin. If you are aware of any scripts or services that provide coin mining the browser, please submit a PR.
 
-## Contribute
-Contributions are welcome! Don't hesitate to submit bug fixes, improvements and new features. 
-
-Regarding new features, please have a look at the issues first. If a feature you whish to work on is not listed in here, you might want to add an issue first before starting to work on a PR.
-
-
-*Made by Rafael Keramidas (keraf [at] protonmail [dot] com - [@iamkeraf](https://www.twitter.com/iamkeraf) - [ker.af](https://ker.af/)). Image used for logo by [Sandro Pereira](https://www.iconfinder.com/icons/33757/coin_question_icon).*
+## Docs
+There is a wiki with some useful information, make sure to give it a read if you're interested in any of those subjects:
+* [Found a bug?](https://github.com/keraf/NoCoin/wiki/Bugs)
+* [Contributions](https://github.com/keraf/NoCoin/wiki/Contributions)
+* [Feature/Change Requests](https://github.com/keraf/NoCoin/wiki/Requests)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "no-coin",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Stop coin miners on the web!",
   "repository": {
     "type": "git",

src/blacklist.txt

@@ -1,3 +1,5 @@
 https://coin-hive.com/lib*
 https://coin-hive.com/captcha*
-wss://*.coin-hive.com/proxy*
+wss://*.coin-hive.com/proxy*
+https://jsecoin.com/server*
+https://*.jsecoin.com/server*

src/js/background.js

@@ -30,12 +30,14 @@ const saveConfig = () => {
 
 const changeToggleIcon = (isEnabled) => {
     chrome.browserAction.setIcon({
-        path: `img/${isEnabled ? 'logo' : 'logo_disabled'}.png`,
+        path: `img/${isEnabled ? 'logo_enabled' : 'logo_disabled'}.png`,
     });
 };
 
 const getDomain = (url) => {
-    return url.match(/:\/\/(.[^/]+)/)[1];
+    const match = url.match(/:\/\/(.[^/]+)/);
+
+    return match ? match[1] : '';
 };
 
 const getTimestamp = () => {

src/js/popup.js

@@ -5,72 +5,68 @@
  * @license     MIT
  * @source      https://github.com/keraf/NoCoin
  */
+
+let currentTabId = 0;
+let whitelisted = false;
 
-$(() => {
+const setToggleButton = (isEnabled) => {
+    const element = document.querySelector('.toggle');
 
-    let currentTabId = 0;
-    let whitelisted = false;
+    if ((element.classList.contains('disabled') && isEnabled) || (!element.classList.contains('disabled') && !isEnabled)) {
+        element.classList.toggle('disabled');
+    }
 
-    const setToggleText = (isEnabled) => {
-        if (isEnabled) {
-            $('.toggle').addClass('red').removeClass('green');
-        } else {
-            $('.toggle').addClass('green').removeClass('red');
-        }
+    element.innerText = `${isEnabled ? 'Pause' : 'Unpause' } No Coin`;
+};
 
-        $('.toggle').text(isEnabled ? 'Pause No Coin' : 'Unpause No Coin');
-    }
+const toggleClassVisible = (className, isVisible) => {
+    const elements = document.getElementsByClassName(className);
 
-    const showWhitelistButtons = (isVisible) => {
-        if (isVisible) {
-            $('.whitelist').show();
-        } else {
-            $('.whitelist').hide();
-        }
+    for (let i = 0; i < elements.length; i++) {
+        elements[i].style.display = isVisible ? 'block': 'none';
     }
-
-    const showBlacklistButton = (isVisible) => {
-        if (isVisible) {
-            $('.blacklist').show();
-        } else {
-            $('.blacklist').hide();
-        }
-    }
-
-    const setWhitelistOptions = (isWhitelisted) => {
-        whitelisted = isWhitelisted;
-        showWhitelistButtons(!isWhitelisted);
-        showBlacklistButton(isWhitelisted);
-    };
+};
 
-    $('.toggle').click(() => {
-        chrome.runtime.sendMessage({ type: 'TOGGLE' }, (response) => {
-            setToggleText(response);
-            chrome.tabs.reload(currentTabId);
-        });
+const setWhitelistOptions = (isWhitelisted) => {
+    whitelisted = isWhitelisted;
+    toggleClassVisible('whitelist', !isWhitelisted);
+    toggleClassVisible('blacklist', isWhitelisted);
+};
+
+// Pause/Unpause
+document.querySelector('.toggle').addEventListener('click', () => {
+    chrome.runtime.sendMessage({ type: 'TOGGLE' }, (response) => {
+        setToggleButton(response);
+        chrome.tabs.reload(currentTabId);
     });
+});
 
-    $('.list').click((e) => {
+// Whitelisting
+const listElements = document.getElementsByClassName('list');
+for (let i = 0; i < listElements.length; i++) {
+    listElements[i].addEventListener('click', (e) => {
+        console.log(e);
         chrome.runtime.sendMessage({ 
             type: 'WHITELIST', 
-            time: $(e.target).data('time'),
+            time: e.target.getAttribute('data-time'),
             tabId: currentTabId,
             whitelisted,
         }, (response) => {
+            console.log(response);
             setWhitelistOptions(response);
             chrome.tabs.reload(currentTabId);
         });
     });
+}
 
-    chrome.tabs.query({currentWindow: true, active: true}, tabs => {
-        if (tabs && tabs[0]) {
-            currentTabId = tabs[0].id;
-
-            chrome.runtime.sendMessage({ type: 'GET_STATE', tabId: currentTabId }, (response) => {
-                setToggleText(response.toggle);
-                setWhitelistOptions(response.whitelisted);
-            });
-        }
-    });
+// Get current state
+chrome.tabs.query({ currentWindow: true, active: true }, tabs => {
+    if (tabs && tabs[0]) {
+        currentTabId = tabs[0].id;
 
+        chrome.runtime.sendMessage({ type: 'GET_STATE', tabId: currentTabId }, (response) => {
+            setToggleButton(response.toggle);
+            setWhitelistOptions(response.whitelisted);
+        });
+    }
 });

src/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "No Coin",
     "description": "Stop coin miners on the web!",
-    "version": "dev",
+    "version": "0.0.0",
     "permissions": [
         "activeTab",
         "tabs",
@@ -14,11 +14,11 @@
         "persistent": true
     },
     "icons": {
-        "128": "img/logo.png" 
+        "128": "img/logo_enabled.png" 
     },
     "browser_action": {
         "default_title": "No Coin - Stop coin miners on the web.",
-        "default_icon": "img/logo.png",
+        "default_icon": "img/logo_enabled.png",
         "default_popup": "view/popup.html"
     },
     "manifest_version": 2,

src/styles/popup.css

@@ -48,12 +48,12 @@ body {
     margin: 3px 0;
 }
 
-.green {
-    background-color: #35B435 !important;
+.toggle {
+    background-color: #EE1D1D !important;
 }
 
-.red {
-    background-color: #EE1D1D !important;
+.disabled {
+    background-color: #35B435 !important;
 }
 
 .whitelist {

src/view/popup.html

@@ -3,21 +3,20 @@
         <title>No Coin</title>
 
         <link rel="stylesheet" type="text/css" href="../styles/popup.css" />
-
-        <script src="../js/jquery.min.js"></script>
-        <script src="../js/popup.js"></script>
     </head>
     <body>
         <div class="header">
-            <img src="../img/logo.png" class="logo" />
+            <img src="../img/logo_enabled.png" class="logo" />
             <h1 class="title">No Coin</h1>
         </div>
         <ul class="actions">
-            <li class="toggle">Enable No Coin</li>
+            <li class="toggle">Unpause No Coin</li>
             <li class="list whitelist" data-time="1">White list for 1 min</li>
             <li class="list whitelist" data-time="30">White list for 30 min</li>
             <li class="list whitelist" data-time="0">White list permantently</li>
             <li class="list blacklist">Remove from white list</li>
         </ul>
+
+        <script src="../js/popup.js"></script>
     </body>
 </html>