added image context menu

cex/.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "EditorConfig.EditorConfig",
+    "oderwat.indent-rainbow",
+    "christian-kohler.path-intellisense",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

cex/.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "typescript.validate.enable": false,
+  "javascript.validate.enable": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnPaste": true, // required
+  "editor.formatOnType": false, // required
+  "editor.formatOnSave": true, // optional
+  "editor.formatOnSaveMode": "file", // required to format on save
+  "files.autoSave": "onFocusChange" // optional but recommended
+}

cex/README.md

@@ -5,7 +5,12 @@
 - [2 part series](https://dev.to/bnn1/mise-en-place-31n5)
 - [Detailed series](https://dev.to/jacksteamdev/create-a-vite-react-chrome-extension-in-90-seconds-3df7)
 
+## Note
+
+- May need to delete localhost using edge://net-internals/#hsts (Delete domain security policies)
+
 ## TODO
+
 - [ ] background and other info from 2 part series
 - [ ] build for firefox
 - [ ] build and upload chrome extension

cex/jsconfig.json

@@ -7,6 +7,12 @@
     "jsx": "react-jsx",
     "types": ["vite/client"]
   },
-  "include": ["public"],
+  "include": [
+    "public",
+    "./src/**/*.js",
+    "./src/**/*.jsx",
+    "./tests/**/*.js",
+    "./tests/**/*.jsx"
+  ],
   "exclude": ["node_modules", "**/node_modules/*"]
 }

cex/src/App.jsx

@@ -1,6 +1,7 @@
 import './App.css'
 
-const getURL = window.chrome?.runtime?.getURL ?? ((path) => path)
+const getURL =
+  typeof chrome !== 'undefined' ? chrome.runtime.getURL : (path) => path
 
 const memeticsLogoUrl = getURL('/icon.svg')
 

cex/src/background.js

@@ -0,0 +1,15 @@
+const onclickHandler = (info, tab) => {
+  // eslint-disable-next-line no-console
+  console.log('onclick handler', info, tab)
+}
+
+chrome.runtime.onInstalled.addListener(async () => {
+  chrome.contextMenus.create({
+    id: 'download meme',
+    title: 'download meme',
+    type: 'normal',
+    contexts: ['image'],
+  })
+})
+
+chrome.contextMenus.onClicked.addListener(onclickHandler)

cex/vite.config.js

@@ -6,8 +6,9 @@ import { crx, defineManifest } from '@crxjs/vite-plugin'
 
 const manifest = defineManifest({
   manifest_version: 3,
-  name: 'memetics downloader extension',
+  name: 'memetics',
   version: '0.0.1',
+  permissions: ['contextMenus', 'scripting'],
   icons: {
     16: 'icon-16.png',
     32: 'icon-32.png',
@@ -18,10 +19,14 @@ const manifest = defineManifest({
   action: {
     default_popup: 'index.html',
   },
+  background: {
+    service_worker: 'src/background.js',
+    type: 'module',
+  },
   content_scripts: [
     {
       js: ['src/content.jsx'],
-      matches: ['https://www.google.com/*'],
+      matches: ['https://x.com/*', 'https://www.facebook.com/*'],
     },
   ],
 })