Add Pin Notification

.github/ISSUE_TEMPLATE/0-bug.yaml

@@ -0,0 +1,38 @@
+name: "⚠️ Report an Issue"
+description: "Something Not Working Right? Please let us know..."
+labels: ["bug"]
+assignees:
+  - smashedr
+
+body:
+  - type: input
+    id: website
+    validations:
+      required: false
+    attributes:
+      label: Site Link
+      description: Please provide a link to the page you are having issues on if possible.
+      placeholder: https://www.smwcentral.net/?p=section&a=details&id=18238
+
+  - type: textarea
+    id: description
+    validations:
+      required: true
+    attributes:
+      label: Details
+      description: Please describe the issue you are experiencing and how to reproduce.
+      placeholder: Provide as many details as you can...
+
+  - type: textarea
+    id: logs
+    validations:
+      required: false
+    attributes:
+      label: Support Information
+      description: Open the extension options, scroll to the bottom, click Copy Support Information and paste below.
+      render: shell
+
+  - type: markdown
+    attributes:
+      value: |
+        All issues/bugs that we can verify will be fixed. Thank you for taking the time to make this report!

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,17 @@
+blank_issues_enabled: true
+contact_links:
+    - name: '💡 Request a Feature'
+      about: Request a New Feature or Enhancement in the Discussions.
+      url: https://github.com/cssnr/smwc-web-extension/discussions/new?category=feature-requests
+
+    - name: '❔ Ask a Question'
+      about: Ask a General Question or start a Discussions.
+      url: https://github.com/cssnr/smwc-web-extension/discussions/new?category=q-a
+
+    - name: '💬 Join Discord'
+      about: Chat with us about Issues, Features, Questions and More.
+      url: https://discord.gg/wXy6m2X8wY
+
+    - name: '📝 Submit Feedback'
+      about: Send General Feedback.
+      url: https://cssnr.github.io/feedback/?app=SMWC%20Web%20Extension

README.md

@@ -6,7 +6,10 @@
 [![Build](https://img.shields.io/github/actions/workflow/status/cssnr/smwc-web-extension/build.yaml?logo=github&logoColor=white&label=build)](https://github.com/cssnr/smwc-web-extension/actions/workflows/build.yaml)
 [![Test](https://img.shields.io/github/actions/workflow/status/cssnr/smwc-web-extension/test.yaml?logo=github&logoColor=white&label=test)](https://github.com/cssnr/smwc-web-extension/actions/workflows/test.yaml)
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=cssnr_smwc-web-extension&metric=alert_status&label=quality)](https://sonarcloud.io/summary/overall?id=cssnr_smwc-web-extension)
-[![Discord](https://img.shields.io/discord/536290056571453450?logo=discord&logoColor=white&label=discord&color=7289da)](https://discord.gg/ZrRbfdE6kz)
+[![GitHub Last Commit](https://img.shields.io/github/last-commit/cssnr/smwc-web-extension?logo=github&logoColor=white&label=updated)](https://github.com/cssnr/smwc-web-extension/graphs/commit-activity)
+[![GitHub Top Language](https://img.shields.io/github/languages/top/cssnr/smwc-web-extension?logo=htmx&logoColor=white)](https://github.com/cssnr/smwc-web-extension)
+[![GitHub Org Stars](https://img.shields.io/github/stars/cssnr?style=flat&logo=github&logoColor=white)](https://cssnr.github.io/)
+[![Discord](https://img.shields.io/discord/536290056571453450?logo=discord&logoColor=white&label=discord&color=7289da)](https://discord.gg/6pzXJE5)
 # SMWC Web Extension
 
 Modern Chrome Web Extension and Firefox Browser Addon to easily Patch and Play ROMs Online via the [smwc.world](https://smwc.world) site.
@@ -17,6 +20,7 @@ Modern Chrome Web Extension and Firefox Browser Addon to easily Patch and Play R
 *   [Support](#support)
 *   [Development](#development)
     -   [Building](#building)
+*   [Contributing](#Contributing)
 
 # Install
 
@@ -58,13 +62,13 @@ For help using the web extension, utilize any these resources:
 If you are experiencing an issue/bug or getting unexpected results, use:
 
 - Report an Issue: https://github.com/cssnr/smwc-web-extension/issues
-- Chat with us on Discord: https://discord.gg/wXy6m2X8wY
-- Provide Anonymous Feedback: https://cssnr.github.io/feedback
+- Chat with us on Discord: https://discord.gg/6pzXJE5
+- Provide General Feedback: [https://cssnr.github.io/feedback](https://cssnr.github.io/feedback/?app=SMWC%20Web%20Extension)
 
 Logs can be found inspecting the page (Ctrl+Shift+I), clicking on the Console, and;
 Firefox: toggling Debug logs, Chrome: toggling Verbose from levels dropdown.
 
-Note: When providing anonymous feedback there is no way to follow up and get more information unless you provide a contact method.
+To support this project, see the [Contributing](#Contributing) section at the bottom.
 
 # Development
 
@@ -135,3 +139,22 @@ You may also use an Unbranded Build: [https://wiki.mozilla.org/Add-ons/Extension
 1.  Run `npm run build:firefox` then use `web-ext-artifacts/{name}-firefox-{version}.zip`.
 1.  Open `about:config` search for `xpinstall.signatures.required` and set to `false`.
 1.  Open `about:addons` and drag the zip file to the page or choose Install from File from the Settings wheel.
+
+# Contributing
+
+Currently, the best way to contribute to this project is to give a 5-star rating on
+[Google](https://chromewebstore.google.com/detail/smwc-web-extension/foalfafgmnglcgpgkhhmcfhjgmdcjide) or
+[Mozilla](https://addons.mozilla.org/addon/smwc-web-extension) and to star this project on GitHub.
+
+Other Web Extensions I have created and published:
+
+- [Link Extractor](https://github.com/cssnr/link-extractor)
+- [Open Links in New Tab](https://github.com/cssnr/open-links-in-new-tab)
+- [HLS Video Downloader](https://github.com/cssnr/hls-video-downloader)
+- [SMWC Web Extension](https://github.com/cssnr/smwc-web-extension)
+- [PlayDrift Extension](https://github.com/cssnr/playdrift-extension)
+- [ASN Plus](https://github.com/cssnr/asn-plus)
+- [Aviation Tools](https://github.com/cssnr/aviation-tools)
+- [Text Formatter](https://github.com/cssnr/text-formatter)
+
+For a full list of current projects visit: [https://cssnr.github.io/](https://cssnr.github.io/)

package.json

@@ -14,7 +14,7 @@
     "build": "npm run build:chrome && npm run build:firefox"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.5.2",
+    "@fortawesome/fontawesome-free": "^6.6.0",
     "bootstrap": "^5.3.3",
     "jquery": "^3.7.1"
   },
@@ -23,7 +23,7 @@
     "eslint": "^8.57.0",
     "gulp": "^4.0.2",
     "json-merger": "^1.1.10",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "web-ext": "^8.2.0"
   }
 }

src/css/options.css

@@ -1,5 +1,45 @@
 /* CSS for options.html */
 
-.card {
-    min-width: 380px;
+body {
+    min-width: 400px;
+}
+
+#pin-notice {
+    position: fixed;
+    right: 10px;
+    top: 0;
+    cursor: pointer;
+    user-select: none;
+}
+
+[data-bs-theme='dark'] #pin-notice {
+    text-shadow:
+        0 0 3px #000,
+        0 0 6px #000,
+        0 0 9px #000,
+        0 0 12px #000;
+}
+
+[data-bs-theme='light'] #pin-notice {
+    text-shadow:
+        0 0 3px #fff,
+        0 0 6px #fff,
+        0 0 9px #fff,
+        0 0 12px #fff;
+}
+
+.bounce {
+    animation: bounce 4s infinite;
+}
+
+@keyframes bounce {
+    0% {
+        top: 0;
+    }
+    50% {
+        top: 30px;
+    }
+    100% {
+        top: 0;
+    }
 }

src/html/options.html

@@ -83,6 +83,23 @@ <h1>SMWC Web Extension</h1>
 </div> <!-- flex -->
 </div> <!-- container -->
 
+<div id="pin-notice" class="text-center bounce p-2 d-none">
+    <i class="fa-solid fa-hand-point-up"></i>
+    <br>
+    To Add to Toolbar
+    <br>
+    Click the <i class="fa-solid fa-puzzle-piece mx-1"></i> Icon then
+    <br>
+    <span>
+        Find the
+        <img src="../images/logo16.png" class="mx-1 mb-1" alt="ASN Plus" title="ASN Plus" style="height: 1.1em;">
+        Icon and Click
+        <i class="fa-solid fa-thumbtack ms-1 d-none chromium"></i>
+        <i class="fa-solid fa-gear d-none firefox"></i>
+        <i class="fa-regular fa-eye-slash d-none edge"></i>
+    </span>
+</div> <!-- pin-notice -->
+
 <div aria-live="polite" aria-atomic="true" class="">
     <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
 </div> <!-- toast -->

src/js/options.js

@@ -11,6 +11,7 @@ chrome.storage.onChanged.addListener(onChanged)
 
 document.addEventListener('DOMContentLoaded', initOptions)
 document.getElementById('copy-support').addEventListener('click', copySupport)
+document.getElementById('pin-notice').addEventListener('click', pinClick)
 document
     .querySelectorAll('#options-form input')
     .forEach((el) => el.addEventListener('change', saveOptions))
@@ -25,6 +26,7 @@ document
 async function initOptions() {
     console.debug('initOptions')
 
+    checkInstall()
     updateManifest()
     await setShortcuts()
 
@@ -33,6 +35,25 @@ async function initOptions() {
     updateOptions(options)
 }
 
+function checkInstall() {
+    if (window.location.search.includes('?install=new')) {
+        console.debug('New Install Detected.')
+        history.pushState(null, '', location.href.split('?')[0])
+        const pin = document.getElementById('pin-notice')
+        pin.classList.remove('d-none')
+        if (navigator.userAgent.includes('Firefox/')) {
+            console.log('Firefox')
+            pin.querySelector('.firefox').classList.remove('d-none')
+        } else if (navigator.userAgent.includes('Edg/')) {
+            console.log('Edge')
+            pin.querySelector('.edge').classList.remove('d-none')
+        } else {
+            console.log('Chromium/Other')
+            pin.querySelector('.chromium').classList.remove('d-none')
+        }
+    }
+}
+
 /**
  * On Changed Callback
  * @function onChanged
@@ -91,3 +112,14 @@ async function copySupport(event) {
     await navigator.clipboard.writeText(result.join('\n'))
     showToast('Support Information Copied.')
 }
+
+/**
+ * Pin Animation Click Callback
+ * @function pinClick
+ * @param {MouseEvent} event
+ */
+function pinClick(event) {
+    const div = event.target.closest('div')
+    console.log('div:', div)
+    div.classList.add('d-none')
+}