Fix Permissions Page Handling (#21)

* Fix Permissions Page Handling

* Bump Version

* Cleanup

* Update README.md and npm

README.md

@@ -93,19 +93,32 @@ You may also access the Options and Home page from a Right Click if Enabled in O
 
 **Quick Start**
 
-To install and run chrome or firefox with web-ext.
+First, clone (or download) this repository and change into the directory:
+```shell
+git clone https://github.com/cssnr/asn-plus.git
+cd simple-extension
+```
+
+Second, install the dependencies:
 ```shell
 npm isntall
+```
+
+Finally, to run Chrome or Firefox with web-ext, run one of the following:
+```shell
 npm run chrome
 npm run firefox
 ```
 
-To Load Unpacked/Temporary Add-on make a `manifest.json` and run from the [src](src) folder.
+Additionally, to Load Unpacked/Temporary Add-on make a `manifest.json` and run from the [src](src) folder, run one of the following:
 ```shell
 npm run manifest:chrome
 npm run manifest:firefox
 ```
 
+Chrome: [https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked)  
+Firefox: [https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/)
+
 For more information on web-ext, [read this documentation](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/).  
 To pass additional arguments to an `npm run` command, use `--`.  
 Example: `npm run chrome -- --chromium-binary=...`
@@ -118,20 +131,14 @@ See [gulpfile.js](gulpfile.js) for more information on `postinstall`.
 npm install
 ```
 
-To load unpacked or temporary addon from the [src](src) folder, you must generate the `src/manifest.json` for the desired browser.
-```shell
-npm run manifest:chrome
-npm run manifest:firefox
-```
-
-If you would like to create a `.zip` archive of the [src](src) directory for the desired browser.
+To create a `.zip` archive of the [src](src) directory for the desired browser run one of the following:
 ```shell
 npm run build
 npm run build:chrome
 npm run build:firefox
 ```
 
-For more information on building, see the scripts in the [package.json](package.json) file.
+For more information on building, see the scripts section in the [package.json](package.json) file.
 
 ## Chrome Setup
 

manifest.json

@@ -3,7 +3,7 @@
   "description": "Aviation Safety Network Plus - Additional Features, Display and Search Options.",
   "homepage_url": "https://asn-plus.cssnr.com/",
   "author": "Shane",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "manifest_version": 3,
   "commands": {
     "_execute_action": {

package.json

@@ -17,6 +17,7 @@
     "jquery": "^3.7.1"
   },
   "devDependencies": {
+    "@types/chrome": "^0.0.268",
     "eslint": "^8.57.0",
     "gulp": "^4.0.2",
     "json-merger": "^1.1.10",

src/html/permissions.html

@@ -31,6 +31,20 @@ <h1>Welcome</h1>
         into the <a href="https://aviation-safety.net/" target="_blank" rel="noopener">ASN</a>
         website to enable additional features.
     </p>
+
+    <div class="d-none extra-grant">
+        <hr>
+        <p>
+            To enable Auto Fill for new Incidents the extension needs to access some additional hosts.
+            These can be granted and removed at any time from the Options page.
+        </p>
+        <button class="btn btn-outline-success w-100 grant-permissions" type="button"
+                data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover"
+                data-bs-title="Allow Retrieving Remote Aircraft Information." data-extra="yes">
+            <i class="fa-solid fa-check-double me-1"></i> Grant Extra Permissions</button>
+    </div>
+    <hr>
+
     <a id="open-options" class="btn btn-lg btn-outline-info w-100 mb-3" role="button" href="../html/options.html">
         <i class="fa-solid fa-sliders me-1"></i> Open Options</a>
     <div class="text-center">

src/js/options.js

@@ -1,6 +1,7 @@
 // JS for options.html
 
 import {
+    activateOrOpen,
     checkPerms,
     onChanged,
     requestPerms,
@@ -182,9 +183,9 @@ export async function revokePerms(event) {
  */
 async function openPermissions(event) {
     console.debug('openPermissions:', event)
+    event.preventDefault()
     const url = chrome.runtime.getURL('/html/permissions.html')
-    await chrome.tabs.create({ active: true, url })
-    window.close()
+    activateOrOpen(url)
 }
 
 /**

src/js/permissions.js

@@ -27,10 +27,10 @@ async function domContentLoaded() {
  */
 async function grantPerms(event) {
     console.debug('grantPerms:', event)
-    console.debug('grantPerms:', event)
-    const origins = event.target.dataset.origins
-    console.debug('origins:', origins)
-    await requestPerms([origins])
+    const button = event.target.closest('button')
+    const extra = !!button.dataset.extra
+    console.debug('extra:', extra)
+    requestPerms(extra)
 }
 
 /**
@@ -51,9 +51,5 @@ function openOptions(event) {
  */
 async function onAdded(permissions) {
     console.info('onAdded', permissions)
-    const hasPerms = await checkPerms()
-    if (hasPerms) {
-        chrome.runtime.openOptionsPage()
-        window.close()
-    }
+    await checkPerms()
 }