+options & storage, clean up, fixes

Author: marcolussetti

background.js

@@ -0,0 +1,5 @@
+function openSettings() {
+    browser.runtime.openOptionsPage();
+}
+
+browser.browserAction.onClicked.addListener(openSettings);

icons/icon-16.png

@@ -1,23 +1,44 @@
 {
     "manifest_version": 2,
-    "name": "Hacktoberfest Tag Detector",
+    "name": "Hacktoberfest Opt-in Checker",
     "version": "1.0",
     "description": "Detect whether the repository has opted into the 2020 Hacktoberfest.",
     "icons": {
         "96": "icons/icon-96.png",
         "48": "icons/icon-48.png"
     },
     "permissions": [
+        "storage",
         "https://api.github.com/*"
     ],
     "content_scripts": [
         {
             "matches": [
-                "*://github.com/*"
+                "*://github.com/*",
+                "*://www.github.com/*"
             ],
             "js": [
                 "optindetector.js"
             ]
         }
-    ]
+    ],
+    "options_ui": {
+        "page": "settings/options.html"
+    },
+    "browser_specific_settings": {
+        "gecko": {
+            "id": "[email protected]"
+        }
+    },
+    "background": {
+        "scripts": [
+            "background.js"
+        ]
+    },
+    "browser_action": {
+        "default_icon": {
+            "16": "icons/icon-16.png",
+            "32": "icons/icon-32.png"
+        }
+    }
 }

icons/icon-32.png

@@ -1,46 +1,66 @@
 function checkIfEnrolled() {
-    console.log("Requested tag check")
+    console.log("[Hacktoberfest Tag Detector] Check started")
+    let GITHUB_API_USERNAME;
+    let GITHUB_API_TOKEN;
+
+    try {
+        GITHUB_API_USERNAME = browser.storage.sync.get("username");
+        GITHUB_API_TOKEN = browser.storage.sync.get("token");
+    } catch {
+        alert("[Hacktoberfest Tag Detector] Please enter username/token in the settings page!");
+        browser.runtime.openSettingsPage();
+        return;
+    }
+
+    if (GITHUB_API_USERNAME.length < 1 || GITHUB_API_TOKEN.length < 1) {
+        alert("[Hacktoberfest Tag Detector] Please enter username/token in the settings page!");
+        browser.runtime.openSettingsPage();
+        return;
+    }
+
     let headers = new Headers();
-    headers.append('Authorization', 'Basic ', btoa(`{GITHUB_API_USERNAME}:{GITHUB_API_TOKEN}`))
+    headers.append('Authorization', 'Basic ', btoa(`{GITHUB_API_USERNAME}:{GITHUB_API_TOKEN}`));
 
     const targetItems = document.querySelector("[data-tab-item='code-tab']").attributes['href'].value.split("/")
     const user = targetItems[1]
     const repo = targetItems[2]
-    console.log(targetItems);
-    console.log(`Test user: ${user}, ${repo}`)
-    console.log("TEST");
 
     fetch("https://api.github.com/repos/" + user + "/" + repo + "/labels", {
         method: 'GET',
         headers: headers
     })
         .then(response => response.json())
         .then(json => {
-            console.log(json);
-            labelNames = json.map(i => i.name)
-            const isHacktoberfestRepo = "hacktoberfest" in labelNames || "hacktoberfest-accepted" in labelNames
+            const labelNames = json.map(i => i.name);
+            const isHacktoberfestRepo = labelNames.includes("hacktoberfest") || labelNames.includes("hacktoberfest-accepted");
             document.body.style.border = isHacktoberfestRepo ? "5px solid green" : "5px solid blue";
             console.log(isHacktoberfestRepo ? "Hacktoberfest Tag Detector - Opted-in repository" : "Hacktoberfest Tag Detector - Not opted-in repository")
         })
         .catch(e => console.log(e))
 
 }
 
-let isGithubProjectPage = false;
-try {
-    isGithubProjectPage = document.querySelector(".application-main").children[0].attributes["itemtype"].value === "http://schema.org/SoftwareSourceCode"
-} catch (e) {
-    isGitHubProjectPage = false;
+
+function isGithubProject() {
+    try {
+        if (document.querySelector(".application-main").children[0].attributes.itemtype.value === "http://schema.org/SoftwareSourceCode")
+            return true;
+        else
+            return false;
+    } catch (e) {
+        return false;
+    }
 }
 
-if (isGithubProjectPage) {
-    console.log("Hacktoberfest Tag Detector - GitHub Project detected");
+
+if (isGithubProject()) {
+    console.log("[Hacktoberfest Tag Detector] GitHub Project detected");
     document.addEventListener("keyup", function (e) {
         var key = e.key || e.keyCode;
         if (key === 'h' || key === 'KeyH' || key === 72) {
             checkIfEnrolled()
         }
     });
 } else {
-    console.log("Hacktoberfest Tag Detector - GitHub Project not detected");
+    console.log("[Hacktoberfest Tag Detector] GitHub Project not detected");
 }

manifest.json

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+
+    <form>
+        <label>Github Username*: <input type="text" id="username" ></label>
+        <label>Github Token*: <input type="text" id="token" ></label>
+        <button type="submit">Save</button>
+    </form>
+
+    <p>Token = Personal Access Token. Can be generated from Settings -> Developer Settings -> Personal Access Tokens. No permissions should be enabled from the list. Token used simply to query the API.</p>
+
+    <script src="options.js"></script>
+
+  </body>
+
+</html>

optindetector.js

@@ -0,0 +1,31 @@
+function saveOptions(e) {
+    e.preventDefault();
+    browser.storage.sync.set({
+        username: document.querySelector("#username").value,
+        token: document.querySelector("#token").value
+    });
+}
+
+function restoreOptions() {
+
+    function setCurrentChoiceUsername(result) {
+        document.querySelector("#username").value = result.username || "";
+    }
+
+    function setCurrentChoiceToken(result) {
+        document.querySelector("#token").value = result.token || "";
+    }
+
+    function onError(error) {
+        console.log(`Error: ${error}`);
+    }
+
+    let gettingUsername = browser.storage.sync.get("username");
+    gettingUsername.then(setCurrentChoiceUsername, onError);
+
+    let gettingToken = browser.storage.sync.get("token");
+    gettingToken.then(setCurrentChoiceToken, onError);
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);