ivangabriele · eyalzek · Sep 23, 2020 · Sep 24, 2020
diff --git a/manifest.json b/manifest.json
@@ -12,9 +12,18 @@
     "default_title": "Mattermost Uno is disabled on this site.",
     "default_icon": "icons/icon-32x32-bw.png"
   },
+  "options_ui": {
+    "page": "options.html"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{bf9b59a1-eccf-4f1c-88f5-a20ebebc4a0b}"
+    }
+  },
   "permissions": [
     "https://*/*",
-    "tabs"
+    "tabs",
+    "storage"
   ],
   "icons": {
     "16": "icons/icon-16x16.png",

diff --git a/package.json b/package.json
@@ -6,11 +6,12 @@
   "private": true,
   "main": "index.js",
   "scripts": {
-    "build": "rimraf ./dist && yarn build:background && yarn build:content",
+    "build": "rimraf ./dist && yarn build:background && yarn build:content && yarn build:options",
     "build:background": "rollup -c ./rollup.config.background.js",
     "build:content": "rollup -c ./rollup.config.content.js",
+    "build:options": "rollup -c ./rollup.config.options.js",
     "build:release": "yarn build && node ./scripts/ci/build_release.js",
-    "build:watch": "concurrently \"yarn build:background --watch\" \"yarn build:content --watch\"",
+    "build:watch": "concurrently \"yarn build:background --watch\" \"yarn build:content --watch\" \"yarn build:options --watch\"",
     "ci:generate:release_notes": "node ./scripts/ci/generate_release_notes.js",
     "dev": "cross-env NODE_ENV=development yarn build:watch",
     "test": "yarn test:lint && yarn test:unit",

diff --git a/rollup.config.options.js b/rollup.config.options.js
@@ -0,0 +1,33 @@
+import copy from "rollup-plugin-copy";
+import filesize from "rollup-plugin-filesize";
+
+import commonConfig from "./rollup.config";
+
+const { NODE_ENV } = process.env;
+
+export default {
+  input: "src/options/options.js",
+
+  output: [
+    {
+      file: "./dist/options.js",
+      format: "iife",
+    },
+  ],
+
+  plugins: [
+    ...commonConfig.plugins,
+
+    // Copy stylesheet:
+    copy({
+      targets: [{ src: "./src/options/options.html", dest: "./dist" }],
+    }),
+
+    ...(NODE_ENV !== "development"
+      ? [
+          // Calculate output bundle size:
+          filesize(),
+        ]
+      : []),
+  ],
+};
diff --git a/src/background/index.js b/src/background/index.js
@@ -33,19 +33,26 @@ chrome.runtime.onConnect.addListener(port => {
   });
 });
 
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-  const { status } = changeInfo;
-  if (status !== "complete") return;
-
-  const { url } = tab;
+function addContent(res, tabId, url) {
   if (
     url === undefined ||
-    !/^https:\/\/([^/]+\.mattermost|mattermost\.[^/]+|[^/]+\.mattermost\.[^/]+)/.test(url)
+    (res.mattermost_url !== "" && !url.startsWith(res.mattermost_url)) ||
+    (res.mattermost_url === "" &&
+      !/^https:\/\/([^/]+\.mattermost|mattermost\.[^/]+|[^/]+\.mattermost\.[^/]+)/.test(url))
   )
     return;
 
   if (ports[tabId] === undefined) {
     chrome.tabs.insertCSS(tabId, { file: "content.css" });
     chrome.tabs.executeScript(tabId, { file: "content.js" });
   }
+}
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  const { status } = changeInfo;
+  if (status !== "complete") return;
+
+  const { url } = tab;
+
+  chrome.storage.sync.get(["mattermost_url"], res => addContent(res, tabId, url));
 });
diff --git a/src/options/.eslintrc.yml b/src/options/.eslintrc.yml
@@ -0,0 +1,3 @@
+env:
+  browser: true
+  webextensions: true
diff --git a/src/options/options.html b/src/options/options.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+
+    <form>
+        <label>Custom Mattermost URL<input type="text" id="mattermost_url" ></label>
+        <button type="submit">Save</button>
+    </form>
+
+    <script src="options.js"></script>
+
+  </body>
+
+</html>
diff --git a/src/options/options.js b/src/options/options.js
@@ -0,0 +1,17 @@
+function saveOptions(e) {
+  e.preventDefault();
+  chrome.storage.sync.set({
+    mattermost_url: document.querySelector("#mattermost_url").value,
+  });
+}
+
+function restoreOptions() {
+  function setCurrentChoice(result) {
+    document.querySelector("#mattermost_url").value = result.mattermost_url || "";
+  }
+
+  chrome.storage.sync.get(["mattermost_url"], res => setCurrentChoice(res));
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);