Initial commit for v3.

.editorconfig

@@ -0,0 +1,3 @@
+[*.sass]
+indent_size = 2
+indent_style = space

.github/workflows/build.yml

@@ -0,0 +1,43 @@
+name: Build
+
+on: push
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    env:
+      AMO_JWT_ISSUER: "${{ secrets.AMO_JWT_ISSUER }}"
+      AMO_JWT_SECRET: "${{ secrets.AMO_JWT_SECRET }}"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: "npm"
+
+      - name: Install
+        run: yarn install
+
+      - name: Build chrome
+        run: yarn run package:chrome
+
+      - name: Build firefox-debug
+        run: yarn run package:firefox-debug
+
+      - name: Build firefox-release-unlisted
+        run: yarn run package:firefox-release-unlisted
+
+      - name: Build firefox-release-listed
+        if: startsWith(github.event.ref, 'refs/tags/v')
+        run: yarn run package:firefox-release-listed
+
+      - uses: actions/upload-artifact@v4
+        with:
+          if-no-files-found: error
+          name: zips-xpis
+          path: web-ext-artifacts/*

.gitignore

@@ -1,6 +1,9 @@
 build/
-src/img/icon-*.png
+dist/
+node_modules/
 .sass-cache/
+.parcel-cache/
+web-ext-artifacts/
 *.css
 *.css.map
 *.crx

.parcelrc

@@ -0,0 +1,7 @@
+{
+  "extends": "@parcel/config-webextension",
+  "transformers": {
+    "url:*.svg": ["@parcel/transformer-svgo", "@parcel/transformer-raw"],
+    "data-url:*.svg": ["@parcel/transformer-svgo", "@parcel/transformer-raw"]
+  }
+}

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "html",
+    "json",
+    "jsonc"
+  ]
+}

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.0] 2023-03-24
+
+- Complete rewrite!
+- Add support for shadow DOM nested elements.
+- Only show images actually under the cursor.
+- Revamped the modal UI.
+- Switched to Manifest V3.
+- Switched to modern development tooling.
+
 ## [0.4] 2017-06-27
 
 - Add support for SVG elements.

eslint.config.mjs

@@ -0,0 +1,15 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  typescript: true,
+  stylistic: {
+    indent: 2,
+    quotes: 'single',
+  },
+  rules: {
+    'no-console': 'warn',
+  },
+  formatters: {
+    css: true,
+  },
+})

flake.nix

@@ -0,0 +1,17 @@
+{
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
+  };
+
+  outputs = { self, nixpkgs }:
+    let
+      pkgs = import nixpkgs {
+        system = "x86_64-linux";
+      };
+    in
+    {
+      devShells.x86_64-linux.default = pkgs.mkShell {
+        buildInputs = with pkgs; [ yarn nodejs ];
+      };
+    };
+}

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "images-under-cursor",
+  "type": "module",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "parcel watch src/manifest.json --host localhost --config @parcel/config-webextension",
+    "build": "parcel build src/manifest.json --config @parcel/config-webextension --no-content-hash --no-source-maps",
+    "patch-manifest-for-firefox": "cp dist/manifest.json dist/manifest_.json && jq -s -c '(.[0] * .[1]) | (.background.scripts = [.background.service_worker]) | (del(.background.service_worker))' dist/manifest_.json src/manifest.firefox.json > dist/manifest.json && rm dist/manifest_.json",
+    "package:chrome": "rm -rf dist && yarn run build && web-ext build --overwrite-dest --source-dir dist --filename chrome.zip",
+    "package:firefox-debug": "rm -rf dist && yarn run build && yarn run patch-manifest-for-firefox && web-ext build --overwrite-dest --source-dir dist --filename firefox-debug.zip",
+    "package:firefox-release-unlisted": "rm -rf dist && yarn run build && yarn run patch-manifest-for-firefox && web-ext sign --source-dir dist --use-submission-api --channel=unlisted --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET",
+    "package:firefox-release-listed": "rm -rf dist && yarn run build && yarn run patch-manifest-for-firefox && web-ext sign --source-dir dist --use-submission-api --channel=listed --api-key=$AMO_JWT_ISSUER --api-secret=$AMO_JWT_SECRET"
+  },
+  "dependencies": {
+    "@types/webextension-polyfill": "^0.10.7",
+    "preact": "^10.20.1",
+    "query-selector-shadow-dom": "^1.0.1",
+    "webextension-polyfill": "^0.10.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.9.0",
+    "@parcel/config-webextension": "^2.12.0",
+    "@parcel/optimizer-data-url": "2.12.0",
+    "@parcel/transformer-inline-string": "^2.12.0",
+    "@parcel/transformer-raw": "^2.12.0",
+    "@parcel/transformer-sass": "^2.12.0",
+    "@parcel/transformer-svgo": "^2.0.0-nightly.1739",
+    "@types/query-selector-shadow-dom": "^1.0.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-format": "^0.1.0",
+    "parcel": "^2.12.0",
+    "typescript": "^5.4.3",
+    "web-ext": "^7.11.0"
+  },
+  "alias": {
+    "preact/jsx-dev-runtime": "preact/jsx-runtime"
+  },
+  "@parcel/bundler-default": {
+    "minBundles": 10000000,
+    "minBundleSize": 3000,
+    "maxParallelRequests": 20
+  }
+}

src/_locales/en/messages.json

@@ -6,24 +6,54 @@
     "message": "Images Under Cursor"
   },
   "app_desc": {
-    "message": "Finds all images and background images laying under the cursor"
+    "message": "Finds all sorts of images and videos located under the cursor."
+  },
+  "open": {
+    "message": "Open"
   },
   "save_as": {
     "message": "Save as…"
   },
   "copy_link": {
-    "message": "Copy link"
+    "message": "📋 Copy"
   },
-  "bg_image": {
-    "message": "background image"
+  "copy_copied": {
+    "message": "✅ Copied!"
   },
-  "video": {
-    "message": "video"
+  "invoke_cmd_desc": {
+    "message": "Find Images Under Cursor"
   },
-  "svg": {
-    "message": "SVG (vector image)"
+  "shortcut": {
+    "message": "Try invoking Images Under Cursor with ‘$1’ for more accuracy!"
   },
-  "invoke_cmd_desc": {
-    "message": "Invoke Images Under Cursor"
+  "empty": {
+    "message": "🤔 No image or video found at this location, sorry!"
+  },
+  "unknown_size": {
+    "message": "unknown size"
+  },
+  "type_image": {
+    "message": "Image"
+  },
+  "type_canvas": {
+    "message": "Canvas image"
+  },
+  "type_background": {
+    "message": "Background"
+  },
+  "type_backgroundcrop": {
+    "message": "Background, cropped"
+  },
+  "type_video": {
+    "message": "Video"
+  },
+  "type_pseudo": {
+    "message": "Pseudo"
+  },
+  "type_pseudocrop": {
+    "message": "Pseudo, cropped"
+  },
+  "type_svg": {
+    "message": "SVG (vector)"
   }
-}
+}