feat: add /gif slash command for inline GIF search

.github/workflows/test.yml

@@ -20,3 +20,5 @@ jobs:
       - run: pnpm test
         env:
           KLIPY_API_KEY: ${{ secrets.KLIPY_API_KEY }}
+      - run: pnpm exec playwright install --with-deps chromium
+      - run: pnpm run test:browser

.gitignore

@@ -10,3 +10,9 @@ distribution
 .agents/
 .claude/
 skills-lock.json
+
+/.idea
+package-lock.json
+
+test-results/
+playwright-report/

README.md

@@ -61,6 +61,15 @@ pnpm run build   # Output goes to distribution/
 pnpm run watch   # Rebuild on file changes
 ```
 
+### Browser tests
+
+The browser tests cover slash commands and existing toolbar insertion with mocked storage and GIF responses.
+
+```sh
+pnpm exec playwright install chromium
+pnpm run test:browser
+```
+
 ### Project layout
 
 | Path | Purpose |

package.json

@@ -12,7 +12,8 @@
     "lint:js": "eslint .",
     "lint:css": "stylelint src/**/*.css",
     "fix": "eslint . --fix",
-    "test": "run-s lint build"
+    "test": "run-s lint build",
+    "test:browser": "webpack && playwright test"
   },
   "browserslist": [
     "last 1 Chrome version",
@@ -59,6 +60,7 @@
     "@parcel/transformer-postcss": "^2.0.0-nightly.599",
     "@parcel/transformer-posthtml": "^2.0.0-nightly.598",
     "@parcel/transformer-webextension": "^2.12.0",
+    "@playwright/test": "1.63.0",
     "babel-loader": "^10.0.0",
     "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^7.1.2",

playwright.config.js

@@ -0,0 +1,12 @@
+import process from 'node:process';
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  forbidOnly: Boolean(process.env.CI),
+  workers: 1,
+  reporter: 'list',
+  use: {
+    viewport: { width: 1280, height: 800 },
+  },
+});

src/lib/settings.js

@@ -7,6 +7,7 @@ import browser from 'webextension-polyfill';
 const defaultSettings = {
   useCollapsibleGifs: false,
   giphyApiKey: '',
+  enableSlashCommand: false,
 };
 
 /**