Rewrite

- removed options & remove compilation process to make code clean
- Firefox and Chrome now have different code
- upgrade Chrome manifest to v3

.eslintrc.cjs

@@ -3,33 +3,8 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: ['plugin:vue/vue3-recommended', 'airbnb-base'],
-  parserOptions: {
-    ecmaVersion: 12,
-    parser: '@typescript-eslint/parser',
-    sourceType: 'module',
-  },
-  plugins: ['vue', '@typescript-eslint'],
-  rules: {
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      {
-        js: 'never',
-        jsx: 'never',
-        ts: 'never',
-        tsx: 'never',
-      },
-    ],
-    'no-undef': 0,
-    'import/no-unresolved': 0,
-  },
-  settings: {
-    'import/parsers': {
-      '@typescript-eslint/parser': ['.ts', '.tsx'],
-    },
-    'import/resolver': {
-      typescript: {},
-    },
+  extends: ['airbnb-base'],
+  global: {
+    chrome: 'readonly',
   },
 };

.gitignore

@@ -1,8 +1,8 @@
 node_modules
 .pnpm-debug.log
 
-gecko-id.json
 key.pem
+firefox/.web-extension-id
+chrome/_metadata
 
-dist
-extension
+dist

chrome/background.js

@@ -0,0 +1,45 @@
+chrome.contextMenus.create({
+  id: 'imitate-image',
+  title: 'Copy imitated image',
+  documentUrlPatterns: ['<all_urls>'],
+  contexts: ['image'],
+});
+
+const blobToBase64 = (blob) => new Promise((resolve) => {
+  const reader = new FileReader();
+  reader.onloadend = () => resolve(reader.result);
+  reader.readAsDataURL(blob);
+});
+
+chrome.contextMenus.onClicked.addListener(async ({ srcUrl }, { id }) => {
+  const blob = await fetch(srcUrl).then((response) => response.blob());
+  const image = await createImageBitmap(blob);
+
+  const { width, height } = image;
+
+  const offscreen = new OffscreenCanvas(width, height);
+  const ctx = offscreen.getContext('2d');
+
+  ctx.drawImage(image, 0, 0, width, height);
+
+  const imitated = await offscreen.convertToBlob();
+
+  const base64 = await blobToBase64(imitated);
+
+  chrome.tabs.sendMessage(id, base64);
+});
+
+const showFinishedNotification = (message) => {
+  if (message) {
+    chrome.notifications.create({
+      type: 'basic',
+      title: 'Imitated image',
+      iconUrl: 'icon.png',
+      message,
+    });
+  }
+};
+
+chrome.runtime.onMessage.addListener((request) => {
+  showFinishedNotification(request.notification);
+});

chrome/content-script.js

@@ -0,0 +1,11 @@
+chrome.runtime.onMessage.addListener(async (base64) => {
+  const imageBlob = await fetch(base64).then((response) => response.blob());
+
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      'image/png': imageBlob,
+    }),
+  ]);
+
+  chrome.runtime.sendMessage({ notification: 'Copied' });
+});

chrome/manifest.json

@@ -0,0 +1,31 @@
+{
+  "name": "Imitate Image",
+  "version": "0.5.1",
+  "manifest_version": 3,
+  "declarative_net_request": {
+    "rule_resources": [
+      {
+        "id": "rules",
+        "enabled": true,
+        "path": "rules.json"
+      }
+    ]
+  },
+  "permissions": [
+    "contextMenus",
+    "declarativeNetRequest",
+    "declarativeNetRequestFeedback",
+    "clipboardWrite",
+    "notifications"
+  ],
+  "host_permissions": ["*://i.pximg.net/"],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://*/*"],
+      "js": ["content-script.js"]
+    }
+  ]
+}

chrome/rules.json

@@ -0,0 +1,16 @@
+[
+  {
+    "id": 1,
+    "priority": 1,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        { "header": "Referer", "operation": "set", "value": "https://www.pixiv.net/" }
+      ]
+    },
+    "condition": {
+      "urlFilter": "pximg",
+      "resourceTypes": ["main_frame", "sub_frame", "xmlhttprequest"]
+    }
+  }
+]

firefox/background.js

@@ -0,0 +1,44 @@
+const referrerList = [{ hostname: 'i.pximg.net', referrer: 'https://www.pixiv.net/' }];
+
+const getReferrer = (url) => {
+  const { hostname } = new URL(url);
+  const hostNeedReferrer = referrerList.find((r) => r.hostname === hostname);
+  return hostNeedReferrer?.referrer;
+};
+
+const blobToBase64 = (blob) => new Promise((resolve) => {
+  const reader = new FileReader();
+  reader.onloadend = () => resolve(reader.result);
+  reader.readAsDataURL(blob);
+});
+
+const showNotification = (message) => {
+  browser.notifications.create({
+    type: 'basic',
+    title: 'Imitated image',
+    message,
+  });
+};
+
+chrome.contextMenus.create({
+  id: 'imitate-image',
+  title: 'Copy imitated image',
+  documentUrlPatterns: ['<all_urls>'],
+  contexts: ['image'],
+});
+
+chrome.contextMenus.onClicked.addListener(async ({ srcUrl }, { id }) => {
+  const fetchWithReferrer = (url) => {
+    const referrer = getReferrer(url);
+    return referrer ? fetch(url, { referrer }) : fetch(url);
+  };
+
+  const blob = await fetchWithReferrer(srcUrl).then((response) => response.blob());
+  const base64 = await blobToBase64(blob);
+
+  chrome.tabs.sendMessage(id, base64);
+});
+
+chrome.runtime.onMessage.addListener((request) => {
+  showNotification(request.notification);
+});

firefox/content-script.js

@@ -0,0 +1,30 @@
+const copyCanvas = async (canvas) => {
+  const imageBlob = await new Promise((resolve) => {
+    canvas.toBlob((data) => {
+      if (!data) return;
+      resolve(data);
+    }, 'image/png');
+  });
+
+  await navigator.clipboard.write([
+    new ClipboardItem({
+      'image/png': imageBlob,
+    }),
+  ]);
+};
+
+chrome.runtime.onMessage.addListener(async (base64) => {
+  const blob = await fetch(base64).then((response) => response.blob());
+  image = await createImageBitmap(blob);
+  const canvas = document.createElement('canvas');
+  const { width, height } = image;
+  canvas.width = width;
+  canvas.height = height;
+
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(image, 0, 0, width, height);
+
+  await copyCanvas(canvas);
+
+  chrome.runtime.sendMessage({ notification: 'Copied' });
+});

firefox/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "Imitate Image",
+  "version": "0.5.1",
+  "manifest_version": 2,
+  "permissions": ["contextMenus", "clipboardWrite", "notifications", "<all_urls>"],
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://*/*"],
+      "js": ["content-script.js"]
+    }
+  ],
+  "applications": {
+    "gecko": {
+      "id": "imitate-image@suienzan"
+    }
+  }
+}

pack-crx.sh

@@ -1,7 +1,6 @@
 #!/bin/bash
 
 rm -rf dist/chrome &&
-pnpm run manifest:chrome &&
 mkdir -p dist/chrome &&
 PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') &&
-crx pack extension -o dist/chrome/imitate-image-"$PACKAGE_VERSION".crx
+crx pack chrome -o dist/chrome/imitate-image-"$PACKAGE_VERSION".crx

package.json

@@ -1,45 +1,17 @@
 {
   "name": "imitate-image",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "dev:js": "vite build -c vite.config.content.ts --watch",
-    "dev:html": "vite build --watch",
-    "build": "rimraf extension && vite build && vite build -c vite.config.content.ts",
-    "manifest:chrome": "node --loader ts-node/esm src/manifest.ts",
-    "manifest:firefox": "NODE_ENV=firefox node --loader ts-node/esm src/manifest.ts",
-    "start:chrome": "pnpm run manifest:chrome && web-ext run -s extension -t chromium",
-    "start:firefox": "pnpm run manifest:firefox && web-ext run -s extension -t firefox-desktop",
-    "pack:crx": "pnpm run manifest:chrome && bash pack-crx.sh",
-    "pack:xpi": "pnpm run manifest:firefox && bash pack-xpi.sh"
-  },
-  "dependencies": {
-    "crx": "^5.0.1",
-    "jsonfile": "^6.1.0",
-    "vue": "^3.2.25",
-    "webextension-polyfill": "^0.8.0"
+    "pack:crx": "bash pack-crx.sh"
   },
   "devDependencies": {
-    "@types/jsonfile": "^6.0.1",
-    "@types/webextension-polyfill": "^0.8.2",
-    "@typescript-eslint/eslint-plugin": "^5.9.0",
-    "@typescript-eslint/parser": "^5.9.0",
-    "@vitejs/plugin-vue": "^2.0.1",
-    "autoprefixer": "^10.4.1",
+    "crx": "^5.0.1",
     "eslint": "^8.6.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-vue": "^8.1.1",
-    "postcss": "^8.4.5",
     "prettier": "^2.5.0",
-    "rimraf": "^3.0.2",
-    "tailwindcss": "^3.0.9",
-    "ts-node": "^10.4.0",
-    "typescript": "^4.5.4",
-    "vite": "^2.7.10",
-    "vue-tsc": "^0.30.2",
-    "web-ext": "^6.6.0"
+    "rimraf": "^3.0.2"
   }
 }