Merge branch 'develop' into feature/#3-better-display-of-language-icons

# Conflicts:
#	manifest.json
#	src/javascript/enhancements/languageDisplay.js

!build.cmd

@@ -0,0 +1,3 @@
+@echo off
+call npm run dist:prod
+pause

.babelrc

@@ -0,0 +1,27 @@
+{
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "targets": {
+          "esmodules": true
+        },
+        "modules": "auto"
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-proposal-private-methods",
+      {
+        "loose": true
+      }
+    ]
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+/.tmp
+/dist

README.md

@@ -1,2 +1,36 @@
-# EnhancedAniwatch
+# Aniwatch Plus
-Enhancment extension for https://aniwatch.me/
+*Aniwatch Plus* is an unofficial extension which provides several UI improvments for https://aniwatch.me. 
+
+## Features
+* adds quick search to website
+* cleaner style for lists
+* better presentation of anime requests
+
+## Browser Support
+We currently support the following browsers in current versions:
+* Google Chrome
+* Mozilla Firefox
+* Opera
+* Microsoft Edge
+
+### Installation
+This extension isn´t available in browser stores yet. Please download from [releases](https://github.com/Serraniel/AniwatchPlus/releases) for your browser and check how to manually install an extension into your browser. If you want to install the extension in Microsoft Edge, please use the Chrome release version.
+
+## Development
+### Tools
+This project requires you to install [NPM](https://nodejs.org/en/download/) and [gulp](https://www.npmjs.com/package/gulp).
+
+### Build
+```sh
+# mandatory
+npm install -d
+
+# build release version into './dist'
+npm run dist:prod
+
+# build dev version into './div' and start the watcher
+npm run watch
+
+# clean build and dist directories
+npm run clean
+```

gulpfile.js

@@ -0,0 +1,282 @@
+const gulp = require('gulp');
+const cssnano = require('cssnano')
+const gulpLoadPlugins = require('gulp-load-plugins')
+const terser = require('terser');
+const del = require('del');
+const browserify = require('browserify');
+const babelify = require('babelify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const merge = require('merge-stream');
+const fs = require('fs');
+
+const $ = gulpLoadPlugins()
+
+$.sass.compiler = require('sass');
+
+/* ============================================================================
+Base consts
+============================================================================ */
+
+// Project sources
+const src = {
+    root: 'src',
+    manifests: 'src/manifests',
+    styles: 'src/stylesheets',
+    scripts: 'src/javascript',
+    images: 'src/images',
+}
+
+// Build path
+const tmp = {
+    root: '.tmp',
+    manifests: '.tmp/manifests',
+    styles: '.tmp/stylesheets',
+    scripts: '.tmp/javascript',
+    images: '.tmp/images',
+}
+
+// Dist path
+const dist = {
+    root: 'dist',
+    chrome: {
+        root: 'dist/chrome',
+        styles: 'dist/chrome/stylesheets',
+        scripts: 'dist/chrome/javascript',
+        images: 'dist/chrome/images',
+    },
+    firefox: {
+        root: 'dist/firefox',
+        styles: 'dist/firefox/stylesheets',
+        scripts: 'dist/firefox/javascript',
+        images: 'dist/firefox/images',
+    },
+    opera: {
+        root: 'dist/opera',
+        styles: 'dist/opera/stylesheets',
+        scripts: 'dist/opera/javascript',
+        images: 'dist/opera/images',
+    },
+    zip: 'dist/zips',
+}
+
+// Build mode
+const isProd = process.env.NODE_ENV === 'production';
+const isDev = !isProd;
+
+/* ============================================================================
+Build tasks
+============================================================================ */
+
+gulp.task('styles', () => {
+    return gulp.src(`${src.styles}/*.scss`)
+        .pipe($.plumber())
+        // sourcemap initialization
+        .pipe($.if(isDev, $.sourcemaps.init()))
+        // sass compilation
+        .pipe($.sass.sync({
+            outputStyle: 'expanded',
+            precision: 7,
+            includePaths: ['.'],
+        }).on('error', $.sass.logError))
+        // autoprefix
+        .pipe($.autoprefixer())
+        // out stream size
+        .pipe($.size({
+            showFiles: true
+        }))
+        .pipe(gulp.dest(tmp.styles))
+        .pipe($.rename({ suffix: '.min' }))
+        // minimize and optimize
+        .pipe($.if('*.css', $.postcss([
+            cssnano({
+                safe: true,
+                autoprefixer: false,
+                zindex: false,
+                reduceIdents: {
+                    keyframes: true,
+                },
+            })
+        ])))
+        // out stream size
+        .pipe($.size({
+            showFiles: true
+        }))
+        // write sourcemaps
+        .pipe($.if(isDev, $.sourcemaps.write()))
+        .pipe(gulp.dest(tmp.styles))
+})
+
+gulp.task('scripts', () => {
+    let b = browserify({
+        entries: `${src.scripts}/index.js`,
+        debug: isDev
+    });
+
+    return b.transform('babelify').bundle()
+        .pipe($.plumber())
+        .pipe(source('app.js'))
+        .pipe(buffer())
+        .pipe($.if(isDev, $.sourcemaps.init({ loadMaps: true })))
+        .pipe($.terser({ compress: { drop_console: isProd, drop_debugger: isProd } }))
+        .pipe($.rename({ suffix: '.min' }))
+        .pipe($.size({
+            showFiles: true,
+        }))
+        .pipe($.if(isDev, $.sourcemaps.write()))
+        .pipe(gulp.dest(`${tmp.scripts}`))
+})
+
+gulp.task('images', () => {
+    return gulp.src(`${src.images}/**/*`)
+        .pipe($.plumber())
+        .pipe($.imagemin([
+            $.imagemin.gifsicle({ interlaced: true }),
+            $.imagemin.mozjpeg({ progressive: true }),
+            $.imagemin.optipng(),
+            $.imagemin.svgo({ plugins: [{ cleanupIDs: false }] })
+        ]))
+        .pipe($.size({
+            showFiles: true,
+        }))
+        .pipe(gulp.dest(tmp.images))
+})
+
+gulp.task('manifests', () => {
+    const templateFile = `${src.manifests}/manifest.template.json`;
+
+    let template = JSON.parse(fs.readFileSync(templateFile))
+
+    return gulp.src(`${src.manifests}/**/!(*.template).json`)
+        .pipe($.plumber())
+        .pipe($.replace('$name', template.name))
+        .pipe($.replace('$shortName', template.short_name))
+        .pipe($.replace('$version', template.version))
+        .pipe($.replace('$semanticVersion', template.version_name))
+        .pipe($.replace('$description', template.description))
+        .pipe($.replace('$author', template.author))
+        .pipe($.replace('$developer', JSON.stringify(template.developer)))
+        .pipe($.replace('$homepageURL', template.homepage_url))
+        .pipe($.size({
+            showFiles: true,
+        }))
+        .pipe(gulp.dest(tmp.manifests))
+})
+
+/* ============================================================================
+Watchers
+============================================================================ */
+
+gulp.task('watch', (done) => {
+    gulp.watch(`${src.styles}/**/*.scss`, gulp.series('clean:build', 'styles', 'dist:copy', 'dist:zip'))
+
+    gulp.watch(`${src.scripts}/**/*.js`, gulp.series('clean:build', 'scripts', 'dist:copy', 'dist:zip'))
+
+    gulp.watch(`${src.images}/**/*`, gulp.series('clean:build', 'images', 'dist:copy', 'dist:zip'))
+
+    gulp.watch(`${src.manifests}/**/*.*`, gulp.series('clean:build', 'manifests', 'dist:copy', 'dist:zip'))
+
+    done();
+})
+
+/* ============================================================================
+Clean
+============================================================================ */
+
+gulp.task('clean:build', del.bind(null, [tmp.root]))
+
+gulp.task('clean:dist', del.bind(null, [dist.root], { force: true })) // Das Force brauchen wir, da das Assets Verzeichnis außerhalb des Working Directories ist.
+
+gulp.task('clean', gulp.series('clean:build', 'clean:dist'))
+
+/* ============================================================================
+BUILD CLEAN ALL
+============================================================================ */
+
+gulp.task('build', gulp.series('manifests', 'images', 'scripts', 'styles'));
+
+gulp.task('build:clean', gulp.series('clean:build', 'manifests', 'images', 'scripts', 'styles'));
+
+/* ============================================================================
+DIST CLEAN ALL
+============================================================================ */
+
+gulp.task('dist:chrome', (done) => {
+    return merge(
+        // copy images
+        gulp.src(`${tmp.images}/**/*`)
+            .pipe(gulp.dest(dist.chrome.images)),
+
+        // copy scripts
+        gulp.src(`${tmp.scripts}/**/*.{min.js,min.js.gz}`)
+            .pipe(gulp.dest(dist.chrome.scripts)),
+
+        // copy styles
+        gulp.src(`${tmp.styles}/*.{min.css,min.css.gz}`)
+            .pipe(gulp.dest(dist.chrome.styles)),
+
+        gulp.src(`${tmp.manifests}/chrome*`)
+            .pipe($.rename('manifest.json'))
+            .pipe(gulp.dest(dist.chrome.root))
+    );
+})
+
+gulp.task('dist:firefox', (done) => {
+    return merge(
+        // copy images
+        gulp.src(`${tmp.images}/**/*`)
+            .pipe(gulp.dest(dist.firefox.images)),
+
+        // copy scripts
+        gulp.src(`${tmp.scripts}/**/*.{min.js,min.js.gz}`)
+            .pipe(gulp.dest(dist.firefox.scripts)),
+
+        // copy styles
+        gulp.src(`${tmp.styles}/*.{min.css,min.css.gz}`)
+            .pipe(gulp.dest(dist.firefox.styles)),
+
+        gulp.src(`${tmp.manifests}/firefox*`)
+            .pipe($.rename('manifest.json'))
+            .pipe(gulp.dest(dist.firefox.root))
+    );
+})
+
+gulp.task('dist:opera', (done) => {
+    return merge(
+        // copy images
+        gulp.src(`${tmp.images}/**/*`)
+            .pipe(gulp.dest(dist.opera.images)),
+
+        // copy scripts
+        gulp.src(`${tmp.scripts}/**/*.{min.js,min.js.gz}`)
+            .pipe(gulp.dest(dist.opera.scripts)),
+
+        // copy styles
+        gulp.src(`${tmp.styles}/*.{min.css,min.css.gz}`)
+            .pipe(gulp.dest(dist.opera.styles)),
+
+        gulp.src(`${tmp.manifests}/opera*`)
+            .pipe($.rename('manifest.json'))
+            .pipe(gulp.dest(dist.opera.root))
+    );
+})
+
+gulp.task('dist:copy', gulp.series('dist:chrome', 'dist:firefox', 'dist:opera'));
+
+gulp.task('dist:zip', (done) => {
+    gulp.src(`${dist.chrome.root}/**/*`)
+        .pipe($.zip('chrome.zip'))
+        .pipe(gulp.dest(dist.root));
+
+    gulp.src(`${dist.firefox.root}/**/*`)
+        .pipe($.zip('firefox.zip'))
+        .pipe(gulp.dest(dist.root));
+
+    gulp.src(`${dist.opera.root}/**/*`)
+        .pipe($.zip('opera.zip'))
+        .pipe(gulp.dest(dist.root));
+
+    done();
+})
+
+gulp.task('dist', gulp.series('clean', 'build', 'dist:copy', 'dist:zip'));

manifest.json

@@ -1,31 +0,0 @@
-  {
-      "name": "Enhanced Aniwatch",
-      "version": "0.1.0.0",
-      "description": "Contains several enhancments for https://aniwatch.me.",
-      "manifest_version": 2,
-      "author": "Serraniel",
-      "homepage_url": "https://github.com/Serraniel/EnhancedAniwatch",
-      "content_scripts": [{
-              "matches": [
-                  "*://aniwatch.me/*"
-              ],
-              "js": [
-                  "utils/colors.js",
-                  "utils/helpers.js",
-                  "utils/aniwatchCore.js"
-              ],
-              "run_at": "document_start"
-          },
-          {
-              "matches": [
-                  "*://aniwatch.me/*"
-              ],
-              "js": [
-                  "enhancements/quickSearch.js",
-                  "enhancements/animeRequests.js",
-                  "enhancements/languageDisplay.js"
-              ],
-              "run_at": "document_end"
-          }
-      ]
-  }

package.json

@@ -0,0 +1,70 @@
+{
+    "name": "aniwatch-plus",
+    "version": "0.1.0-beta.0",
+    "description": "Aniwatch Plus is a browser extension for https://aniwatch.me/",
+    "main": "index.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "clean": "gulp clean",
+        "build": "gulp build",
+        "build:prod": "cross-env NODE_ENV=production gulp build",
+        "dist": "gulp dist",
+        "dist:prod": "cross-env NODE_ENV=production gulp dist",
+        "watch": "gulp dist && gulp watch"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Serraniel/AniwatchPlus.git"
+    },
+    "author": {
+        "name": "Serraniel",
+        "email": "mail@serraniel.dev",
+        "url": "https://serraniel.dev"
+    },
+    "contributors": [
+        {
+            "name": "Kaffem"
+        }
+    ],
+    "license": "MPL-2.0",
+    "bugs": {
+        "url": "https://github.com/Serraniel/AniwatchPlus/issues",
+        "email": "mail@serraniel.dev"
+    },
+    "homepage": "https://github.com/Serraniel/AniwatchPlus#readme",
+    "dependencies": {},
+    "devDependencies": {
+        "@babel/compat-data": "^7.11.0",
+        "@babel/core": "^7.11.4",
+        "@babel/helper-module-imports": "^7.10.4",
+        "@babel/plugin-proposal-class-properties": "^7.10.4",
+        "@babel/plugin-proposal-private-methods": "^7.10.4",
+        "@babel/preset-env": "^7.11.0",
+        "@babel/register": "^7.10.5",
+        "babelify": "^10.0.0",
+        "browserify": "^16.5.2",
+        "cross-env": "^7.0.2",
+        "cssnano": "^4.1.10",
+        "del": "^5.1.0",
+        "gulp": "^4.0.2",
+        "gulp-autoprefixer": "^7.0.1",
+        "gulp-babel": "^8.0.0",
+        "gulp-if": "^3.0.0",
+        "gulp-imagemin": "^7.1.0",
+        "gulp-load-plugins": "^2.0.4",
+        "gulp-plumber": "^1.2.1",
+        "gulp-postcss": "^8.0.0",
+        "gulp-rename": "^2.0.0",
+        "gulp-replace": "^1.0.0",
+        "gulp-sass": "^4.1.0",
+        "gulp-size": "^3.0.0",
+        "gulp-sourcemaps": "^2.6.5",
+        "gulp-terser": "^1.4.0",
+        "gulp-zip": "^5.0.2",
+        "merge-stream": "^2.0.0",
+        "sass": "^1.26.11",
+        "terser": "^5.3.2",
+        "vinyl-buffer": "^1.0.1",
+        "vinyl-source-stream": "^2.0.0"
+    }
+}

resources/logo/AnimeWatch.ico/sizes/black/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

resources/logo/AnimeWatch.ico/sizes/black/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

resources/logo/AnimeWatch.ico/sizes/white/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

resources/logo/AnimeWatch.ico/sizes/white/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}