Merge pull request #4 from kungfux/feature/preferences

kungfux · web-flow · commit 31d44e51706e · 2023-05-08T02:55:15.000+04:00
Add ability to update extension settings
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,4 +1,8 @@
 {
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  },
   "overrides": [
     {
       "env": {
diff --git a/package.json b/package.json
@@ -37,7 +37,9 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.1.1",
+    "html-webpack-plugin": "^5.5.1",
     "merge-jsons-webpack-plugin": "^2.0.1",
     "prettier": "^2.8.7",
     "ts-loader": "^9.4.2",
diff --git a/src/background/index.ts b/src/background/index.ts
@@ -1,6 +1,12 @@
+import { runtime } from 'webextension-polyfill';
 import { Settings } from '../settings';
 import { ServiceWorker } from './service-worker';
 
-const settings = new Settings().getSettings();
-const serviceWorker = new ServiceWorker(settings.urls);
+runtime.onInstalled.addListener((details) => {
+  void runtime.openOptionsPage();
+});
+
+const settings = new Settings();
+const s = await settings.getSettings();
+const serviceWorker = new ServiceWorker(s.urls);
 serviceWorker.init();
diff --git a/src/manifest.json b/src/manifest.json
@@ -7,6 +7,10 @@
     "48": "icons/logo48.png",
     "128": "icons/logo128.png"
   },
-  "permissions": ["tabs", "webNavigation", "scripting", "activeTab"],
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  },
+  "permissions": ["tabs", "webNavigation", "scripting", "activeTab", "storage"],
   "host_permissions": ["<all_urls>"]
 }
diff --git a/src/options/options.html b/src/options/options.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Settings - IssueExpert for JIRA</title>
+  </head>
+
+  <body>
+    <form>
+      <label for="urls" style="display: block">JIRA URLs:</label>
+      <textarea
+        id="urls"
+        name="URL"
+        rows="5"
+        cols="33"
+        placeholder="Specify JIRA URLs you want to enable IssueExpert for separated by semicolon e.g. https://*.atlassian.net/jira/.*;https://jira.issueexpert.com/.*"
+      ></textarea>
+      <button type="submit" id="save" style="display: block">Save</button>
+    </form>
+    <script src="options.bundle.js"></script>
+  </body>
+</html>
diff --git a/src/options/options.ts b/src/options/options.ts
@@ -0,0 +1,34 @@
+import { Settings } from '../settings';
+
+const settings = new Settings();
+const separatorChar = ';';
+const selectors = {
+  url: '#urls',
+  save: '#save',
+};
+
+function saveOptions(): void {
+  const urls: string | undefined =
+    (document.querySelector(selectors.url) as HTMLTextAreaElement)?.value ??
+    undefined;
+  if (urls !== undefined) {
+    void settings.setSettings({ urls: urls.split(separatorChar) });
+  }
+}
+
+function restoreOptions(): void {
+  settings
+    .getSettings()
+    .then((settings) => {
+      const urls = document.querySelector(selectors.url) as HTMLTextAreaElement;
+      if (urls !== null && settings.urls.length > 0) {
+        urls.value = settings.urls.join(separatorChar);
+      }
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+}
+
+document.addEventListener('DOMContentLoaded', restoreOptions);
+document.querySelector(selectors.save)?.addEventListener('click', saveOptions);
diff --git a/src/settings.ts b/src/settings.ts
@@ -1,12 +1,21 @@
+import { storage } from 'webextension-polyfill';
+
 export interface ISettings {
   urls: string[];
 }
 
 export class Settings {
-  getSettings(): ISettings {
+  async getSettings(): Promise<ISettings> {
+    const settings = (await storage.sync.get()) as ISettings;
     return {
       // TODO: RegExp is not user friendly
-      urls: ['https://.*.atlassian.net/jira/software/projects'],
+      urls: settings.urls ?? ['https://.*/jira/software/projects'],
     };
   }
+
+  async setSettings(settings: ISettings): Promise<void> {
+    await storage.sync.set({
+      urls: settings.urls,
+    });
+  }
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -3,15 +3,15 @@
     "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": true,
-    "module": "es6",
-    "target": "es5",
+    "module": "es2022",
+    "target": "es2017",
     "moduleResolution": "node",
     "strictNullChecks": true,
     "strict": true,
     "noImplicitThis": true,
     "alwaysStrict": true,
     "noUnusedLocals": true,
     "noImplicitReturns": true,
-    "forceConsistentCasingInFileNames": true,
+    "forceConsistentCasingInFileNames": true
   }
 }
diff --git a/webpack.common.js b/webpack.common.js
@@ -1,11 +1,16 @@
 const path = require('path');
 const CopyPlugin = require('copy-webpack-plugin');
 const MergeJsonWebpackPlugin = require('merge-jsons-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-module.exports = (env) => {
+module.exports = (env, argv) => {
   const browser = env.BROWSER ?? 'chrome';
   return {
-    entry: { background: './src/background/index.ts', content: './src/content/index.ts' },
+    entry: {
+      background: './src/background/index.ts',
+      content: './src/content/index.ts',
+      options: './src/options/options.ts',
+    },
     output: {
       filename: '[name].bundle.js',
       path: path.resolve(__dirname, `dist/${browser}`),
@@ -23,11 +28,18 @@ module.exports = (env) => {
     resolve: {
       extensions: ['.tsx', '.ts', '.js'],
     },
+    experiments: {
+      topLevelAwait: true,
+    },
     plugins: [
+      new HtmlWebpackPlugin({
+        filename: 'options.html',
+        template: './src/options/options.html',
+        chunks: [],
+        minify: argv.mode === 'production',
+      }),
       new CopyPlugin({
-        patterns: [
-          { from: './src/icons', to: 'icons' },
-        ],
+        patterns: [{ from: './src/icons', to: 'icons' }],
       }),
       new MergeJsonWebpackPlugin({
         space: 2,
diff --git a/webpack.dev.js b/webpack.dev.js
@@ -2,8 +2,11 @@ const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 module.exports = (env) => {
-  return merge(common(env), {
+  const argv = {
     mode: 'development',
     devtool: 'inline-source-map',
+  };
+  return merge(common(env, argv), {
+    ...argv,
   });
 };
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -2,7 +2,10 @@ const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 
 module.exports = (env) => {
-  return merge(common(env), {
+  const argv = {
     mode: 'production',
+  };
+  return merge(common(env, argv), {
+    ...argv,
   });
 };

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,8 @@`
`1`	`1`	`{`
	`2`	`+ "plugins": ["prettier"],`
	`3`	`+ "rules": {`
	`4`	`+ "prettier/prettier": "error"`
	`5`	`+ },`
`2`	`6`	`"overrides": [`
`3`	`7`	`{`
`4`	`8`	`"env": {`