Added extension implementation

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+
+dist
+
+.husky
+
+.DS_Store

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+}

README.md

@@ -0,0 +1,26 @@
+# ![Icon](public/icons/icon-32x32.png) DALL-E 2 for Google Images Search
+
+A browser extension that allows you to enhance your Google Images search experience by adding generated images from DALL-E 2 to the search results.
+
+![Example](example.png)
+
+## Install from Chrome Web Store
+
+https://chrome.google.com/webstore/detail/dall-e-2-google-extension/debegnklcecggjmakkfjmbhikifklmjm
+
+## Usage
+
+1. Generate an API key for DALL-E 2 by visiting the [API keys](https://beta.openai.com/account/api-keys) page on the OpenAI website.
+2. In the extension options, enter the API key and click "Save".
+3. Open Google Images and start searching for images to see the generated results.
+
+## Build from source
+
+1. Clone the repo
+2. Install dependencies with `yarn`
+3. `yarn build`
+4. Load `dist` directory to your browser
+
+## License
+
+This extension is licensed under the [MIT License](LICENSE).

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "DALLE2-google-extension",
+  "version": "1.1.0",
+  "main": "index.js",
+  "repository": "[email protected]:alonstern/DALLE2-google-extension.git",
+  "author": "alonstern",
+  "license": "MIT",
+  "scripts": {
+    "build": "yarn lint && webpack --config webpack/webpack.config.js",
+    "lint": "eslint --ext .ts .",
+    "prettier": "prettier --config .prettierrc 'src/**/*.ts' --write",
+    "prepare": "husky install"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.203",
+    "@typescript-eslint/eslint-plugin": "^5.46.0",
+    "@typescript-eslint/parser": "^5.46.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "eslint": "^8.29.0",
+    "husky": "^8.0.0",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "prettier": "^2.8.1"
+  },
+  "dependencies": {
+    "axios": "^1.2.1"
+  }
+}

public/content_script.css

@@ -0,0 +1,69 @@
+.dalle-container {
+  margin-bottom: 30px;
+  border-radius: 8px;
+  border: 1px solid;
+  padding: 15px;
+  flex-basis: 0;
+  flex-grow: 1;
+}
+
+@media (prefers-color-scheme: light) {
+  .dalle-container {
+    border-color: #dadce0;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dalle-container {
+    border-color: #3c4043;
+  }
+}
+
+.dalle-container p {
+  margin-top: 0;
+}
+
+.dalle-title {
+  font-weight: bold;
+  margin-bottom: 1%;
+}
+
+.dalle-loading {
+  color: #b6b8ba;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.dalle-images-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.dalle-link {
+  max-width: 19%;
+  margin-bottom: 1%;
+  margin-right: 1%;
+}
+
+.dalle-image {
+  max-width: 100%;
+}
+
+.dalle-error {
+  color: red;
+  margin-bottom: 0;
+}
+
+.dalle-warning {
+  color: orange;
+  margin-bottom: 0;
+}

public/manifest.json

@@ -0,0 +1,218 @@
+{
+  "manifest_version": 3,
+  "name": "DALL-E 2 Google Extension",
+  "version": "1.1",
+  "description": "Display DALL-E 2 images alongside Google Images Search results",
+  "permissions": [
+    "storage"
+  ],
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": false
+  },
+  "icons": {
+    "16": "icons/icon-16x16.png",
+    "32": "icons/icon-32x32.png",
+    "48": "icons/icon-48x48.png",
+    "128": "icons/icon-128x128.png"
+  },
+  "content_scripts": [
+    {
+      "js": ["content_script.js"],
+      "css": ["content_script.css"],
+      "include_globs": ["https://*/search*tbm=isch*"],
+      "matches": [
+        "https://*.google.com/search*",
+        "https://*.google.ad/search*",
+        "https://*.google.ae/search*",
+        "https://*.google.com.af/search*",
+        "https://*.google.com.ag/search*",
+        "https://*.google.com.ai/search*",
+        "https://*.google.al/search*",
+        "https://*.google.am/search*",
+        "https://*.google.co.ao/search*",
+        "https://*.google.com.ar/search*",
+        "https://*.google.as/search*",
+        "https://*.google.at/search*",
+        "https://*.google.com.au/search*",
+        "https://*.google.az/search*",
+        "https://*.google.ba/search*",
+        "https://*.google.com.bd/search*",
+        "https://*.google.be/search*",
+        "https://*.google.bf/search*",
+        "https://*.google.bg/search*",
+        "https://*.google.com.bh/search*",
+        "https://*.google.bi/search*",
+        "https://*.google.bj/search*",
+        "https://*.google.com.bn/search*",
+        "https://*.google.com.bo/search*",
+        "https://*.google.com.br/search*",
+        "https://*.google.bs/search*",
+        "https://*.google.bt/search*",
+        "https://*.google.co.bw/search*",
+        "https://*.google.by/search*",
+        "https://*.google.com.bz/search*",
+        "https://*.google.ca/search*",
+        "https://*.google.cd/search*",
+        "https://*.google.cf/search*",
+        "https://*.google.cg/search*",
+        "https://*.google.ch/search*",
+        "https://*.google.ci/search*",
+        "https://*.google.co.ck/search*",
+        "https://*.google.cl/search*",
+        "https://*.google.cm/search*",
+        "https://*.google.cn/search*",
+        "https://*.google.com.co/search*",
+        "https://*.google.co.cr/search*",
+        "https://*.google.com.cu/search*",
+        "https://*.google.cv/search*",
+        "https://*.google.com.cy/search*",
+        "https://*.google.cz/search*",
+        "https://*.google.de/search*",
+        "https://*.google.dj/search*",
+        "https://*.google.dk/search*",
+        "https://*.google.dm/search*",
+        "https://*.google.com.do/search*",
+        "https://*.google.dz/search*",
+        "https://*.google.com.ec/search*",
+        "https://*.google.ee/search*",
+        "https://*.google.com.eg/search*",
+        "https://*.google.es/search*",
+        "https://*.google.com.et/search*",
+        "https://*.google.fi/search*",
+        "https://*.google.com.fj/search*",
+        "https://*.google.fm/search*",
+        "https://*.google.fr/search*",
+        "https://*.google.ga/search*",
+        "https://*.google.ge/search*",
+        "https://*.google.gg/search*",
+        "https://*.google.com.gh/search*",
+        "https://*.google.com.gi/search*",
+        "https://*.google.gl/search*",
+        "https://*.google.gm/search*",
+        "https://*.google.gr/search*",
+        "https://*.google.com.gt/search*",
+        "https://*.google.gy/search*",
+        "https://*.google.com.hk/search*",
+        "https://*.google.hn/search*",
+        "https://*.google.hr/search*",
+        "https://*.google.ht/search*",
+        "https://*.google.hu/search*",
+        "https://*.google.co.id/search*",
+        "https://*.google.ie/search*",
+        "https://*.google.co.il/search*",
+        "https://*.google.im/search*",
+        "https://*.google.co.in/search*",
+        "https://*.google.iq/search*",
+        "https://*.google.is/search*",
+        "https://*.google.it/search*",
+        "https://*.google.je/search*",
+        "https://*.google.com.jm/search*",
+        "https://*.google.jo/search*",
+        "https://*.google.co.jp/search*",
+        "https://*.google.co.ke/search*",
+        "https://*.google.com.kh/search*",
+        "https://*.google.ki/search*",
+        "https://*.google.kg/search*",
+        "https://*.google.co.kr/search*",
+        "https://*.google.com.kw/search*",
+        "https://*.google.kz/search*",
+        "https://*.google.la/search*",
+        "https://*.google.com.lb/search*",
+        "https://*.google.li/search*",
+        "https://*.google.lk/search*",
+        "https://*.google.co.ls/search*",
+        "https://*.google.lt/search*",
+        "https://*.google.lu/search*",
+        "https://*.google.lv/search*",
+        "https://*.google.com.ly/search*",
+        "https://*.google.co.ma/search*",
+        "https://*.google.md/search*",
+        "https://*.google.me/search*",
+        "https://*.google.mg/search*",
+        "https://*.google.mk/search*",
+        "https://*.google.ml/search*",
+        "https://*.google.com.mm/search*",
+        "https://*.google.mn/search*",
+        "https://*.google.ms/search*",
+        "https://*.google.com.mt/search*",
+        "https://*.google.mu/search*",
+        "https://*.google.mv/search*",
+        "https://*.google.mw/search*",
+        "https://*.google.com.mx/search*",
+        "https://*.google.com.my/search*",
+        "https://*.google.co.mz/search*",
+        "https://*.google.com.na/search*",
+        "https://*.google.com.ng/search*",
+        "https://*.google.com.ni/search*",
+        "https://*.google.ne/search*",
+        "https://*.google.nl/search*",
+        "https://*.google.no/search*",
+        "https://*.google.com.np/search*",
+        "https://*.google.nr/search*",
+        "https://*.google.nu/search*",
+        "https://*.google.co.nz/search*",
+        "https://*.google.com.om/search*",
+        "https://*.google.com.pa/search*",
+        "https://*.google.com.pe/search*",
+        "https://*.google.com.pg/search*",
+        "https://*.google.com.ph/search*",
+        "https://*.google.com.pk/search*",
+        "https://*.google.pl/search*",
+        "https://*.google.pn/search*",
+        "https://*.google.com.pr/search*",
+        "https://*.google.ps/search*",
+        "https://*.google.pt/search*",
+        "https://*.google.com.py/search*",
+        "https://*.google.com.qa/search*",
+        "https://*.google.ro/search*",
+        "https://*.google.ru/search*",
+        "https://*.google.rw/search*",
+        "https://*.google.com.sa/search*",
+        "https://*.google.com.sb/search*",
+        "https://*.google.sc/search*",
+        "https://*.google.se/search*",
+        "https://*.google.com.sg/search*",
+        "https://*.google.sh/search*",
+        "https://*.google.si/search*",
+        "https://*.google.sk/search*",
+        "https://*.google.com.sl/search*",
+        "https://*.google.sn/search*",
+        "https://*.google.so/search*",
+        "https://*.google.sm/search*",
+        "https://*.google.sr/search*",
+        "https://*.google.st/search*",
+        "https://*.google.com.sv/search*",
+        "https://*.google.td/search*",
+        "https://*.google.tg/search*",
+        "https://*.google.co.th/search*",
+        "https://*.google.com.tj/search*",
+        "https://*.google.tl/search*",
+        "https://*.google.tm/search*",
+        "https://*.google.tn/search*",
+        "https://*.google.to/search*",
+        "https://*.google.com.tr/search*",
+        "https://*.google.tt/search*",
+        "https://*.google.com.tw/search*",
+        "https://*.google.co.tz/search*",
+        "https://*.google.com.ua/search*",
+        "https://*.google.co.ug/search*",
+        "https://*.google.co.uk/search*",
+        "https://*.google.com.uy/search*",
+        "https://*.google.co.uz/search*",
+        "https://*.google.com.vc/search*",
+        "https://*.google.co.ve/search*",
+        "https://*.google.vg/search*",
+        "https://*.google.co.vi/search*",
+        "https://*.google.com.vn/search*",
+        "https://*.google.vu/search*",
+        "https://*.google.ws/search*",
+        "https://*.google.rs/search*",
+        "https://*.google.co.za/search*",
+        "https://*.google.co.zm/search*",
+        "https://*.google.co.zw/search*",
+        "https://*.google.cat/search*"
+      ]
+    }
+  ]
+}

public/options.css

@@ -0,0 +1,3 @@
+div {
+  margin-top: 5px;
+}