feat: migrate extension to plasmo framework

.github/workflows/release-ext.yml

@@ -13,24 +13,37 @@ env:
 permissions: write-all
 
 jobs:
-  chrome:
-    name: building chrome extension
+  release-ext:
+    name: building and packaging extension
     runs-on: ubuntu-latest
     outputs:
       version: ${{ steps.version.outputs.version }}
     steps:
-      - name: checking out repository ⏬
+      - name: Checking out repository ⏬
         uses: actions/checkout@v3
 
-      - name: get-npm-version
-        id: package-version
-        uses: martinbeentjes/npm-get-version-action@v1.3.1
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-
+
+      - name: Setup pnpm and install required node_modules
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: latest
+          run_install: true
 
-      - name: Install Dependencies
-        run: npm install
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 16.x
+          cache: "pnpm"
 
-      - name: Build Extension
-        run: npm run build
+      - name: Build and package Extension
+        run: pnpm build
 
       - name: Find the upcoming release version from semantic-release
         id: version
@@ -42,26 +55,35 @@ jobs:
       - name: log extension version
         run: echo v${{ steps.version.outputs.version }}
 
-      - name: Bump up version in package.json and manifest.json
+      - name: Bump up version in package.json
         if: steps.version.outputs.version
-        run: ./scripts/bump-version.sh ${{ steps.version.outputs.version }} ./package.json ./manifest.json
+        run: ./scripts/bump-version.sh ${{ steps.version.outputs.version }} ./package.json
 
-      - name: creating oslash-chrome-extension.zip
-        run: zip -r oslash-chrome-extension.zip oslash-chrome-extension
+      - name: zipping chrome extension
+        run: zip -r oslash-chrome-extension.zip chrome-mv3-prod
+
+      - name: zipping firefox extension
+        run: zip -r oslash-firefox-extension.zip firefox-mv2-prod
 
       - name: upload oslash-chrome-extension.zip to artifacts
         uses: actions/upload-artifact@v2
         with:
           name: oslash-chrome-extension
           path: oslash-chrome-extension.zip
 
+      - name: upload oslash-firefox-extension.zip to artifacts
+        uses: actions/upload-artifact@v2
+        with:
+          name: oslash-firefox-extension
+          path: oslash-firefox-extension.zip
+
       - name: reset changes for release notes
         run: git checkout -- .
 
       - name: generate release notes
         run: npm run semantic-release
 
-      - name: 📎 Attach local flavour of extension ZIP file to GitHub release
+      - name: 📎 Attach local flavour of chrome extension ZIP file to GitHub release
         if: steps.version.outputs.version
         continue-on-error: true
         uses: svenstaro/upload-release-action@v2
@@ -70,3 +92,13 @@ jobs:
           file: oslash-chrome-extension.zip
           tag: "@v${{ steps.version.outputs.version }}"
           overwrite: true
+
+      - name: 📎 Attach local flavour of firefox extension ZIP file to GitHub release
+        if: steps.version.outputs.version
+        continue-on-error: true
+        uses: svenstaro/upload-release-action@v2
+        with:
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          file: oslash-firefox-extension.zip
+          tag: "@v${{ steps.version.outputs.version }}"
+          overwrite: true

.gitignore

@@ -1,25 +1,42 @@
-# Logs
-logs
-*.log
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+.next
+.vercel
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-oslash-chrome-extension
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.pnpm-debug.log*
+
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

.prettierrc.mjs

@@ -0,0 +1,26 @@
+/**
+ * @type {import('prettier').Options}
+ */
+export default {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: false,
+  trailingComma: "none",
+  bracketSpacing: true,
+  bracketSameLine: true,
+  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  importOrder: [
+    "<BUILTIN_MODULES>", // Node.js built-in modules
+    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
+    "", // Empty line
+    "^@plasmo/(.*)$",
+    "",
+    "^@plasmohq/(.*)$",
+    "",
+    "^~(.*)$",
+    "",
+    "^[./]"
+  ]
+}

README.md

@@ -19,17 +19,23 @@ So, we replaced them with OSlash shortcuts (or `o/shortcuts`) to make them more
 
 ### How to install OSlash?
 
-To install the open source extension, please follow these steps:
-
-1. Start by downloading the OSlash [ZIP file](https://github.com/getoslash/oslash/releases/download/%40v1.1.0/oslash-chrome-extension.zip) to your local drive and then extract its contents into a designated folder.
-2. Open your Chrome browser.
-3. Access the extensions management page by entering `chrome://extensions` into the Chrome address bar and pressing Enter.
-4. In the top right corner of the extensions page, toggle the switch to enable "Developer mode."
-5. With developer mode activated, click on the "Load unpacked" button that appears.
-6. Navigate to the location where you extracted the OSlash extension files and select the folder.
-7. After the folder is loaded, you should see the OSlash extension in your list of installed extensions.
-8. To have quick access to OSlash, locate it in the extensions list and click the `pin` icon, so it appears in your browser's toolbar.
-9. Here is a short video for the same: https://drive.google.com/file/d/1nPZqKjsDWJezidBEAS1R8fDgsb3AYWgg/view?usp=drive_link
+To install the local version of open source extension, please follow these steps:
+
+1. Go to the [Releases Page](https://github.com/getoslash/oslash/releases) and start by downloading the OSlash extension as per your browser name to your local drive and then extract its contents into a designated folder.
+2. Open your browser
+3. For chrome/brave/arc/chromium users:
+   1. Access the extensions management page by entering `chrome://extensions` into the Chrome address bar and pressing Enter.
+   2. In the top right corner of the extensions page, toggle the switch to enable "Developer mode."
+   3. With developer mode activated, click on the "Load unpacked" button that appears.
+   4. Navigate to the location where you extracted the OSlash extension files and select the folder.
+   5. After the folder is loaded, you should see the OSlash extension in your list of installed   extensions.
+   6. To have quick access to OSlash, locate it in the extensions list and click the `pin` icon, so it appears in your browser's toolbar.
+   7. Here is a short video for the same: https://drive.google.com/file/d/1nPZqKjsDWJezidBEAS1R8fDgsb3AYWgg/view?usp=drive_lin
+4. For firefox users:
+   1. Open the [about:debugging](https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html) page, click the This Firefox option, click the Load Temporary Add-on button, then select any file in your extension's directory.
+   2. The extension now installs, and remains installed until you restart Firefox.
+   3. To have quick access to OSlash, locate it in the extensions list and click the `pin` icon, so it appears in your browser's toolbar.
+
 
 ### How to start creating and using OSlash shortcuts?
 

background.ts

@@ -0,0 +1,117 @@
+"use strict"
+import Fuse from "fuse.js"
+import { constructShortcutRules } from "~lib/utils/browser/constructShortcutRules"
+import { isNonChromiumBrowser } from "~lib/utils/browser/getBrowserName"
+import { getDeclarativeNetRequestRules } from "~lib/utils/browser/getDeclarativeNetRequestRules"
+import { openNewTab, updateTab } from "~lib/utils/browser/tabOperations"
+import { updateDeclarativeNetRequestRules } from "~lib/utils/browser/updateDeclarativeNetRequestRules"
+import { setShortcutsToStorage } from "~lib/utils/setShortcutsToStorage"
+
+import { DEFAULT_SHORTCUTS } from "./lib/constants/defaultShortcuts"
+import { getSavedShortcutsFromStorage } from "./lib/utils/getSavedShortcuts"
+
+const defaultShortcuts = DEFAULT_SHORTCUTS
+const fuseOptions = {
+  includeScore: true,
+  keys: ["shortlink"]
+}
+
+let fuse = new Fuse(defaultShortcuts, fuseOptions)
+
+let browserInstance: typeof browser | typeof chrome | null  = null ;
+if (isNonChromiumBrowser()) {
+  browserInstance = browser
+}
+else {
+  browserInstance = chrome
+}
+
+if (browserInstance){
+  browserInstance.runtime.onInstalled.addListener(async (details) => {
+    if (details.reason !== "install") return
+
+    // persist default Shortcuts to local storage
+    await setShortcutsToStorage(defaultShortcuts)
+
+    // construct new rules on every installation
+    const newRules = constructShortcutRules(defaultShortcuts)
+    const oldRules = await getDeclarativeNetRequestRules()
+
+    let oldRuleIds = []
+    if (oldRules) {
+      oldRuleIds = oldRules.map((rule) => rule.id)
+    }
+
+    // add the new rules as declarativeNetRequest Dynamic rules, and remove old rules if there are any
+    await updateDeclarativeNetRequestRules(newRules, oldRuleIds)
+  })
+
+  browserInstance.omnibox.onInputStarted.addListener(async function () {
+    // on each input session, get all shortcuts and create a new fuse object with them
+    const savedShortcuts = await getSavedShortcutsFromStorage()
+    fuse = new Fuse(savedShortcuts, fuseOptions)
+  })
+
+  browserInstance.omnibox.onInputChanged.addListener(async function (text, suggest) {
+    // get fuse suggestions
+    const suggestedShortcuts = fuse.search(text)
+    // map fuse suggestions to omnibox suggestions
+    const suggestions = suggestedShortcuts.map(
+      (shortcut) => {
+        return {
+          content: shortcut.item.shortlink,
+          description: `${shortcut.item.shortlink} - <url>${shortcut.item.url}</url>`
+        }
+      }
+    )
+    suggest(suggestions)
+  })
+
+  browserInstance.omnibox.onInputEntered.addListener(function (text, disposition) {
+    // redirect to url in new tab
+    const url = `http://${text}`
+    switch (disposition) {
+      case "currentTab":
+        updateTab({ url })
+        break
+      case "newForegroundTab":
+        openNewTab({ url })
+        break
+      case "newBackgroundTab":
+        openNewTab({ url, active: false })
+        break
+    }
+  })
+
+  // If o/ is prefix and no shortcut with given name is saved then redirect to options page
+  browserInstance.webRequest.onBeforeRequest.addListener(
+    (param) => {
+      getSavedShortcutsFromStorage().then((shortcuts) => {
+        const savedShortcutNamesSet = new Set(
+          shortcuts.map((shortcut) => shortcut.shortlink)
+        )
+        const requestUrl = new URL(param.url)
+        if (requestUrl.searchParams.has("q")) {
+          const queryValue = requestUrl.searchParams.get("q") ?? ""
+          if (queryValue.startsWith("o/")) {
+            if (!savedShortcutNamesSet.has(queryValue)) {
+              updateTab({ url: "/options.html" })
+            } else {
+              const url =
+                shortcuts.find((shortcut) => shortcut.shortlink === queryValue)
+                  ?.url ?? ""
+              updateTab({ url })
+            }
+          }
+        } else if (param.url.startsWith("http://o/")) {
+          const requestShortcutName = param.url.replace("http://", "")
+          if (!savedShortcutNamesSet.has(requestShortcutName)) {
+            updateTab({ url: "/options.html" })
+          }
+        }
+      })
+    },
+    { urls: ["*://*/search*", "*://o/*"] }
+  )
+}
+