Auto Fill (#18)

* Add FAA Auto Fill * Piggy Back Permissions * Add Set Private * Update Host Permissions and Bump Version * Update Host Permissions * Update Perms * Update Voices Display
cssnr · May 17, 2024 · b50404b · b50404b
1 parent dc20423
commit b50404b
Show file tree

Hide file tree

Showing 10 changed files with 323 additions and 39 deletions.
diff --git a/manifest.json b/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.1.7",
+  "version": "0.2.0",
   "manifest_version": 3,
   "commands": {
     "_execute_action": {
@@ -23,23 +23,30 @@
     "keyword": "asn"
   },
   "permissions": ["contextMenus", "scripting", "storage"],
-  "host_permissions": ["*://aviation-safety.net/*"],
+  "host_permissions": [
+    "*://*.aviation-safety.net/*",
+    "*://registry.faa.gov/AircraftInquiry/Search/*"
+  ],
   "content_scripts": [
     {
-      "matches": ["*://aviation-safety.net/*"],
+      "matches": ["*://*.aviation-safety.net/*"],
       "run_at": "document_start",
       "js": [
         "dist/jquery/jquery.min.js",
         "js/asn.js",
         "js/audio.js",
         "js/content-script.js"
       ]
+    },
+    {
+      "matches": ["*://registry.faa.gov/AircraftInquiry/Search/*"],
+      "js": ["js/faa.js"]
     }
   ],
   "web_accessible_resources": [
     {
       "resources": ["css/dark.css"],
-      "matches": ["*://aviation-safety.net/*"]
+      "matches": ["*://*.aviation-safety.net/*"]
     }
   ],
   "background": { "type": "module" },

diff --git a/src/html/options.html b/src/html/options.html
@@ -15,7 +15,7 @@
 
 <div class="container-fluid p-3 h-100">
 <div class="d-flex align-items-center h-100">
-<div class="col-xxl-6 col-md-8 col-12 m-auto">
+<div class="col-xxl-6 col-lg-8 col-md-10 col-12 m-auto">
 <div class="card mb-3">
 <div class="card-body">
     <div class="d-flex justify-content-center align-items-center">
@@ -140,6 +140,40 @@ <h1>ASN Plus</h1>
                 <span class="d-inline-block me-2"><kbd>P</kbd> Play</span>
             </p>
         </div>
+
+        <div class="form-check form-switch">
+            <input class="form-check-input" id="autoFill" type="checkbox" role="switch" data-related="autoFillOptions">
+            <label class="form-check-label" for="autoFill" aria-describedby="autoFillHelp">
+                Enable New Incident Auto Fill
+                <span data-bs-toggle="tooltip" data-bs-title="Enable New Incident Auto Fill.">
+                    <i class="fa-solid fa-circle-info ms-1"></i>
+                </span>
+            </label>
+        </div>
+
+        <div class="row mt-2" id="autoFillOptions" style="display: none;">
+            <div class="col-sm-6 col-lg-4 col-12 mb-2">
+                <label for="asnUsername" class="form-label">
+                    <i class="fa-solid fa-signature me-1"></i> ASN Username
+                </label>
+                <input id="asnUsername" aria-describedby="asnUsernameHelp" type="text" class="form-control" autocomplete="off">
+                <div class="form-text" id="asnUsernameHelp">
+                    Username Used for Auto Fill.
+                </div>
+            </div>
+            <div class="col-sm-6 col-lg-8 col-12 mb-2">
+                <label for="asnEmail" class="form-label">
+                    <i class="fa-solid fa-at me-1"></i> ASN E-Mail
+                </label>
+                <input id="asnEmail" aria-describedby="asnEmailHelp" type="email" class="form-control" autocomplete="off">
+                <div class="form-text" id="asnEmailHelp">
+                    E-Mail Used for Auto Fill.
+                </div>
+            </div>
+        </div>
+
+        <hr>
+
         <div class="row mt-2">
             <div class="col-sm-6 col-12 mb-2">
                 <label for="countryDisplay" class="form-label">
@@ -177,11 +211,11 @@ <h1>ASN Plus</h1>
 <!--                        <i class="fa-solid fa-circle-info ms-1"></i>-->
 <!--                    </span>-->
                 </label>
-                <select id="speechVoice" class="form-select" aria-label="Default select example">
+                <select id="speechVoice" class="form-select" aria-label="Speech Voice">
                     <option value="">Browser Default</option>
                 </select>
                 <div class="form-text" id="speechVoiceHelp">
-                    Voice for Speech Playback, <a id="test-voice" class="align-bottom" role="button">Test</a>.
+                    Voice for Speech Playback. <a id="test-voice" class="align-bottom" role="button">Test</a>.
                 </div>
             </div>
             <div class="col-sm-4 col-12 mb-2">
@@ -198,6 +232,7 @@ <h1>ASN Plus</h1>
                 </div>
             </div>
         </div>
+
         <hr class="my-2">
         <div class="form-check form-switch">
             <input class="form-check-input" id="contextMenu" type="checkbox" role="switch">

diff --git a/src/html/permissions.html b/src/html/permissions.html
@@ -31,6 +31,11 @@ <h1>Welcome</h1>
         into the <a href="https://aviation-safety.net/" target="_blank" rel="noopener">ASN</a>
         website to enable additional features.
     </p>
+    <p>
+        The content script <a href="../js/faa.js" target="_blank">faa.js</a> is also injected
+        into the <a href="https://registry.faa.gov/AircraftInquiry/Search/NNumberInquiry" target="_blank" rel="noopener">FAA</a>
+        website to for use with the Incident Auto Fill button. These permissions will eventually be seperated out into separate requests.
+    </p>
     <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">

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -16,15 +16,15 @@
 <div class="container-fluid p-2">
     <div class="d-grid g-2 gap-2">
         <div class="d-none grant-perms">
-            <a id="grant-perms" class="btn btn-lg btn-success w-100 mb-1" role="button">
+            <a id="grant-perms" class="btn btn-success w-100 mb-1" role="button">
                 <i class="fa-solid fa-check-double me-1"></i> Grant Host Permissions</a>
-            <p class="text-center mb-1"><a role="button" href="../html/permissions.html" class="">More Information on Permissions</a></p>
+            <p class="text-center mb-1"><a role="button" href="../html/permissions.html" class="small">More Information on Permissions</a></p>
             <hr class="my-2">
         </div>
     </div>
 
     <div class="d-grid g-2 gap-2 mb-2">
-    <div class="btn-group btn-group" role="group" aria-label="Basic example">
+    <div class="btn-group btn-group btn-group-sm" role="group" aria-label="ASN Links">
         <a type="button" class="btn btn-outline-primary" href="https://aviation-safety.net/">
             ASN</a>
         <a type="button" class="btn btn-outline-primary" href="https://aviation-safety.net/asndb/country/N" id="country-url">
@@ -143,28 +143,37 @@
                 </span>
             </label>
         </div>
-        <hr class="my-2">
         <div class="form-check form-switch">
-            <input class="form-check-input" id="contextMenu" type="checkbox" role="switch">
-            <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
-                Enable Right Click Menu
-                <span data-bs-toggle="tooltip" data-bs-title="Show Context Menu on Right Click.">
-                    <i class="fa-solid fa-circle-info ms-1"></i>
-                </span>
-            </label>
-        </div>
-        <div class="form-check form-switch">
-            <input class="form-check-input" id="showUpdate" type="checkbox" role="switch">
-            <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">
-                Show Release Notes on Update
-                <span data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update.">
+            <input class="form-check-input" id="autoFill" type="checkbox" role="switch" data-related="autoFillOptions">
+            <label class="form-check-label" for="autoFill" aria-describedby="autoFillHelp">
+                Enable New Incident Auto Fill
+                <span data-bs-toggle="tooltip" data-bs-title="Enable New Incident Auto Fill.">
                     <i class="fa-solid fa-circle-info ms-1"></i>
                 </span>
             </label>
         </div>
+<!--        <hr class="my-2">-->
+<!--        <div class="form-check form-switch">-->
+<!--            <input class="form-check-input" id="contextMenu" type="checkbox" role="switch">-->
+<!--            <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">-->
+<!--                Enable Right Click Menu-->
+<!--                <span data-bs-toggle="tooltip" data-bs-title="Show Context Menu on Right Click.">-->
+<!--                    <i class="fa-solid fa-circle-info ms-1"></i>-->
+<!--                </span>-->
+<!--            </label>-->
+<!--        </div>-->
+<!--        <div class="form-check form-switch">-->
+<!--            <input class="form-check-input" id="showUpdate" type="checkbox" role="switch">-->
+<!--            <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">-->
+<!--                Show Release Notes on Update-->
+<!--                <span data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update.">-->
+<!--                    <i class="fa-solid fa-circle-info ms-1"></i>-->
+<!--                </span>-->
+<!--            </label>-->
+<!--        </div>-->
     </form>
 
-    <a class="btn btn-outline-primary w-100" role="button" href="../html/options.html">
+    <a class="btn btn-sm btn-outline-primary w-100" role="button" href="../html/options.html">
         <i class="fa-solid fa-sliders me-1"></i> Open Options</a>
     <hr class="my-2">
 

diff --git a/src/js/asn.js b/src/js/asn.js
@@ -225,6 +225,8 @@ function addEntryLink(reg, cell) {
             continue
         }
         const link = document.createElement('a')
+        link.target = '_blank'
+        link.rel = 'noopener'
         link.href = value
         link.textContent = key
         cell.appendChild(document.createTextNode(' | '))
@@ -254,7 +256,9 @@ function hideEntryWarning() {
     hideEntryWarning = function () {}
     console.debug('hideEntryWarning')
     const div = document.querySelector('div.alertbox')
-    div.style.display = 'none'
+    if (div) {
+        div.style.display = 'none'
+    }
 }
 
 function updateLastUpdated() {
@@ -352,3 +356,131 @@ async function keyboardEvent(e) {
         window.location = keyLocations[e.code]
     }
 }
+
+function enableAUtoFill(options) {
+    enableAUtoFill = function () {}
+    console.debug('enableAUtoFill:', options)
+
+    document.querySelector('[name="Username"]').value = options.asnUsername
+    document.querySelector('[name="Email"]').value = options.asnEmail
+
+    const date = new Date()
+    document.querySelector('[name="Day"]').value = date.getDay()
+    document.querySelector('[name="Month"]').value = (
+        '0' + date.getMonth()
+    ).slice(-2)
+    document.querySelector('[name="Year"]').value = date.getFullYear()
+
+    const operator = document.querySelector('[name="Operator"]')
+    const clone = operator.cloneNode(true)
+    clone.size = '40'
+    const td = operator.parentElement
+    td.textContent = ''
+    td.appendChild(clone)
+    const privateBtn = document.createElement('button')
+    privateBtn.id = 'operator-private'
+    privateBtn.textContent = 'Set Private'
+    privateBtn.style.marginLeft = '10px'
+    privateBtn.addEventListener('click', (e) => {
+        e.preventDefault()
+        clone.value = 'Private'
+    })
+    td.appendChild(privateBtn)
+
+    // const innertube = document.querySelector('.innertube')
+    const contentwrapper = document.getElementById('contentwrapper')
+
+    const input = document.createElement('input')
+    input.id = 'registration-autofill'
+    input.type = 'text'
+    input.placeholder = 'Registration: N-Number'
+    input.style.marginLeft = '40px'
+
+    const button = document.createElement('button')
+    button.id = 'button-autofill'
+    button.textContent = 'Auto Fill'
+    button.style.marginLeft = '10px'
+    button.addEventListener('click', doAutoFill)
+
+    const span = document.createElement('span')
+    span.textContent = '(Only Works for FAA N-Numbers)'
+    span.style.color = '#cc0000'
+    span.style.marginLeft = '10px'
+    contentwrapper.insertBefore(span, contentwrapper.children[0])
+    contentwrapper.insertBefore(button, contentwrapper.children[0])
+    contentwrapper.insertBefore(input, contentwrapper.children[0])
+
+    if (!chrome.runtime.onMessage.hasListener(onMessage)) {
+        console.debug('chrome.runtime.onMessage.addListener')
+        chrome.runtime.onMessage.addListener(onMessage)
+    }
+}
+
+function onMessage(message, sender) {
+    console.log('onMessage', message, sender)
+    if (message.error) {
+        console.warn('ERROR:', message.error)
+        return
+    }
+    processResponse(message)
+}
+
+function processResponse(message) {
+    if (message.registration) {
+        document.querySelector('[name="Registration"]').value =
+            message.registration
+    }
+    if (message.serial) {
+        document.querySelector('[name="Cn"]').value = message.serial
+    }
+    if (message.manufacturer || message.model) {
+        document.querySelector('[name="AcType"]').value =
+            `${message.manufacturer} ${message.model}`.trim()
+    }
+    if (message.name) {
+        document.querySelector('[name="Operator"]').value = message.name
+    }
+    if (message.type === 'Fixed Wing Single-Engine') {
+        document.querySelector('[name="Plane_cat"]').value = 'A'
+    }
+    if (message.registration) {
+        const source = document.getElementById('source')
+        const text =
+            `${source.value}\n` +
+            `https://registry.faa.gov/AircraftInquiry/Search/NNumberResult?nNumberTxt=${message.registration}\n`
+        // `https://globe.adsbexchange.com/?icao=${message.hex.toLowerCase()}\n`
+        source.value = text.trim()
+    }
+    document.querySelector('[name="Comments"]').value =
+        'Added New Incident. Auto Filled w/ ASN Plus.'
+}
+
+async function doAutoFill(event) {
+    console.log('doAutoFill', event)
+    event.preventDefault()
+
+    // TODO: Add separate permissions requests for asn and faa
+    // const hasPerms = await chrome.runtime.sendMessage({
+    //     permissions: ['*://registry.faa.gov/AircraftInquiry/Search/*'],
+    // })
+    // console.log('hasPerms', hasPerms)
+    // if (!hasPerms) {
+    //     // TODO: Open Permissions Request Page because it can't be done here
+    //     console.warn('MISSING HOST PERMISSIONS')
+    //     return
+    // }
+
+    const input = document.getElementById('registration-autofill')
+    const value = input.value.trim()
+    console.log('value', value)
+    if (!value) {
+        return console.debug('empty input')
+    }
+
+    const button = document.getElementById('button-autofill')
+    button.disabled = true
+
+    const url = `https://registry.faa.gov/AircraftInquiry/Search/NNumberResult?nNumberTxt=${value}`
+    console.log('url', url)
+    chrome.runtime.sendMessage({ faa: url })
+}
diff --git a/src/js/content-script.js b/src/js/content-script.js
@@ -78,4 +78,9 @@ function processOptions(options) {
             expandImages()
         }
     }
+    if (window.location.pathname === '/wikibase/web_db_input.php') {
+        if (options.autoFill) {
+            enableAUtoFill(options)
+        }
+    }
 }
diff --git a/src/js/export.js b/src/js/export.js
@@ -26,7 +26,10 @@ export function getSearchURL(type, value) {
  */
 export async function requestPerms() {
     return await chrome.permissions.request({
-        origins: ['*://aviation-safety.net/*'],
+        origins: [
+            '*://*.aviation-safety.net/*',
+            '*://registry.faa.gov/AircraftInquiry/Search/*',
+        ],
     })
 }
 
@@ -37,7 +40,10 @@ export async function requestPerms() {
  */
 export async function checkPerms() {
     const hasPerms = await chrome.permissions.contains({
-        origins: ['*://aviation-safety.net/*'],
+        origins: [
+            '*://*.aviation-safety.net/*',
+            '*://registry.faa.gov/AircraftInquiry/Search/*',
+        ],
     })
     console.debug('checkPerms:', hasPerms)
     // Firefox still uses DOM Based Background Scripts
@@ -147,6 +153,7 @@ export function updateOptions(options) {
 }
 
 function hideShowElement(selector, show, speed = 'fast') {
+    console.debug('hideShowElement:', selector)
     const element = $(`${selector}`)
     // console.debug('hideShowElement:', show, element)
     if (show) {