Merge branch 'develop' into feature/#19-notifications-tab-title

# Conflicts:
#	src/javascript/index.js

.babelrc

@@ -6,7 +6,7 @@
         "targets": {
           "esmodules": true
         },
-        "modules": "umd"
+        "modules": "auto"
       }
     ]
   ],

.github/dependabot.yml

@@ -0,0 +1,14 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 10
+  target-branch: develop
+  reviewers:
+  - Serraniel
+  assignees:
+  - Serraniel
+  versioning-strategy: increase

.github/workflows/auto-merge.yml

@@ -0,0 +1,14 @@
+name: auto-merge
+
+on:
+  pull_request:
+
+jobs:
+  auto-merge:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2.3.3
+      - uses: ahmadnassri/action-dependabot-auto-merge@v2.1.2
+        with:
+          target: minor
+          github-token: ${{ secrets.PR_AUTO_MERGE }}

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,66 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [develop]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [develop]
+  schedule:
+    - cron: '0 2 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # Override automatic language detection by changing the below list
+        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
+        language: ['javascript']
+        # Learn more...
+        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+      with:
+        # We must fetch at least the immediate parents so that if this is
+        # a pull request then we can checkout the head.
+        fetch-depth: 2
+
+    # If this run was triggered by a pull request event, then checkout
+    # the head of the pull request instead of the merge commit.
+    - run: git checkout HEAD^2
+      if: ${{ github.event_name == 'pull_request' }}
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file. 
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1

.travis.yml

@@ -0,0 +1,12 @@
+language: node_js
+node_js:
+  - "node"
+dist: trusty
+cache:
+  npm: true
+  directories:
+  - node_modules
+install:
+  - npm install -d
+script:
+  - npm run dist:prod

README.md

@@ -1,24 +1,37 @@
+<img align="right" width="100" height="100" src="resources/logo/AnimeWatch.ico/main/black/AWPLUS%20Final%20Black%20128.png">
+
+[![Travis (.org)](https://img.shields.io/travis/serraniel/aniwatchplus?style=flat-square)](https://travis-ci.org/github/Serraniel/AniwatchPlus)
+[![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/serraniel/aniwatchplus?style=flat-square)](https://snyk.io/test/github/Serraniel/AniwatchPlus?targetFile=package.json)
+[![David](https://img.shields.io/david/serraniel/AniwatchPlus?style=flat-square)](https://david-dm.org/serraniel/aniwatchplus)
+[![Scrutinizer code quality (GitHub/Bitbucket)](https://img.shields.io/scrutinizer/quality/g/serraniel/aniwatchplus?style=flat-square)](https://scrutinizer-ci.com/g/Serraniel/AniwatchPlus/)
+[![GitHub issues](https://img.shields.io/github/issues/serraniel/aniwatchplus?style=flat-square)](https://github.com/Serraniel/AniwatchPlus/issues)
+[![GitHub](https://img.shields.io/github/license/serraniel/aniwatchplus?style=flat-square)](https://github.com/Serraniel/AniwatchPlus/blob/develop/LICENSE)
+
 # Aniwatch Plus
-*Aniwatch Plus* is an unofficial extension which provides several UI improvments for https://aniwatch.me. 
+**Aniwatch Plus** is an unofficial browser extension which will improve your experience on https://aniwatch.me by adding features like a quick search and improving the websites appearance.
 
 ## Features
-* adds quick search to website
+* Adds quick search
-* cleaner style for lists
+* Cleaner list presentation
-* better presentation of anime requests
+* Improved presentation of available audio and subtitles
+* Better display of anime requests 
 
-## Browser Support
+## Download
-We currently support the following browsers in current versions:
+[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/hgniihpjiioldkafogebpkbaiflmpimb?label=Google%20Chrome&logo=Google%20Chrome&style=flat-square)](https://chrome.google.com/webstore/detail/aniwatch-plus/hgniihpjiioldkafogebpkbaiflmpimb?hl=de)
-* Google Chrome
+[![Mozilla Add-on](https://img.shields.io/amo/v/aniwatch-plus?label=Mozilla%20Firefox&logo=Firefox&style=flat-square)](https://addons.mozilla.org/de/firefox/addon/aniwatch-plus/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search)
-* Mozilla Firefox
+[![GitHub release tag for opera (latest by date including pre-releases)](https://img.shields.io/github/v/release/serraniel/aniwatchplus?include_prereleases&label=Opera&logo=Opera&logoColor=red&style=flat-square)](https://addons.opera.com/de/extensions/details/aniwatch-plus/)
-* Opera
+[![GitHub release (latest by date including pre-releases)](https://img.shields.io/github/v/release/serraniel/aniwatchplus?include_prereleases&label=Download%20manually&logo=Github&style=flat-square)](https://github.com/Serraniel/AniwatchPlus/releases)
-* 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).
+This project requires you to install the latestst versions of [Node.js](https://nodejs.org/en/download/), [NPM](https://nodejs.org/en/download/) and [gulp](https://www.npmjs.com/package/gulp).
+Minimum required versions:
+| Tool | Version |
+|-|-|
+| node.js | => 12.18.x |
+| npm | => 6.14.x |
+| gulp | => 4.0.x |
+
 
 ### Build
 ```sh

gulpfile.js

@@ -1,7 +1,7 @@
 const gulp = require('gulp');
 const cssnano = require('cssnano')
 const gulpLoadPlugins = require('gulp-load-plugins')
-const uglify = require('gulp-uglify-es').default;
+const terser = require('terser');
 const del = require('del');
 const browserify = require('browserify');
 const babelify = require('babelify');
@@ -118,7 +118,7 @@ gulp.task('scripts', () => {
         .pipe(source('app.js'))
         .pipe(buffer())
         .pipe($.if(isDev, $.sourcemaps.init({ loadMaps: true })))
-        .pipe(uglify({ compress: { drop_console: isProd, drop_debugger: isProd } }))
+        .pipe($.terser({ compress: { drop_console: isProd, drop_debugger: isProd } }))
         .pipe($.rename({ suffix: '.min' }))
         .pipe($.size({
             showFiles: true,

package.json

@@ -1,6 +1,6 @@
 {
     "name": "aniwatch-plus",
-    "version": "0.1.0-beta.0",
+    "version": "0.2.1-beta.0",
     "description": "Aniwatch Plus is a browser extension for https://aniwatch.me/",
     "main": "index.js",
     "scripts": {
@@ -32,39 +32,39 @@
         "email": "mail@serraniel.dev"
     },
     "homepage": "https://github.com/Serraniel/AniwatchPlus#readme",
-    "dependencies": {
+    "dependencies": {},
-        "regenerator-runtime": "^0.13.7"
-    },
     "devDependencies": {
-        "@babel/compat-data": "^7.11.0",
+        "@babel/compat-data": "^7.12.1",
-        "@babel/core": "^7.11.4",
+        "@babel/core": "^7.12.3",
-        "@babel/helper-module-imports": "^7.10.4",
+        "@babel/helper-module-imports": "^7.12.1",
-        "@babel/plugin-proposal-class-properties": "^7.10.4",
+        "@babel/plugin-proposal-class-properties": "^7.12.1",
-        "@babel/plugin-proposal-private-methods": "^7.10.4",
+        "@babel/plugin-proposal-private-methods": "^7.12.1",
-        "@babel/preset-env": "^7.11.0",
+        "@babel/preset-env": "^7.12.1",
-        "@babel/register": "^7.10.5",
+        "@babel/register": "^7.12.1",
         "babelify": "^10.0.0",
-        "browserify": "^16.5.2",
+        "browserify": "^17.0.0",
         "cross-env": "^7.0.2",
         "cssnano": "^4.1.10",
-        "del": "^5.1.0",
+        "del": "^6.0.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-load-plugins": "^2.0.5",
         "gulp-plumber": "^1.2.1",
-        "gulp-postcss": "^8.0.0",
+        "gulp-postcss": "^9.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-uglify-es": "^2.0.0",
+        "gulp-terser": "^1.4.0",
         "gulp-zip": "^5.0.2",
         "merge-stream": "^2.0.0",
-        "sass": "^1.26.10",
+        "postcss": "^8.1.3",
+        "sass": "^1.27.0",
+        "terser": "^5.3.8",
         "vinyl-buffer": "^1.0.1",
         "vinyl-source-stream": "^2.0.0"
     }

src/javascript/enhancements/animeRequests.js

@@ -31,7 +31,7 @@ function changeBorderColorOwnRequests(node) {
 
         // highlight left border for own request
         if (profileLink.length > 0) {
-            item.style.borderColor = color.aniBlue
+            item.style.borderLeftColor = color.aniBlue
         }
     }
 
@@ -64,17 +64,27 @@ function removeUnknownUsers(node) {
         let anime = lowerDiv.innerText;
         let profileData = upperDiv.innerHTML;
 
-        // exchange data
-        upperDiv.innerHTML = `<b>${anime}</b>`;
-
         // add user note if own request
         if (profileLink.length > 0) {
-            lowerDiv.innerHTML = profileData;
+            // Workaround to avoid innerHTML because of #38, see https://devtidbits.com/2017/12/06/quick-fix-the-unsafe_var_assignment-warning-in-javascript/
+            let parser = new DOMParser();
+            let parsedDocument = parser.parseFromString(profileData, 'text/html');
+
+            lowerDiv.innerHTML = '';
+            while(parsedDocument.body.hasChildNodes()){
+                lowerDiv.appendChild(parsedDocument.body.removeChild(parsedDocument.body.firstChild));
+            }
         }
         // remove if foreign request.
         else {
             lowerDiv.innerHTML = '&nbsp;';
         }
+
+        // exchange data
+        let bElement = document.createElement('b');
+        bElement.textContent = anime;
+        upperDiv.innerHTML = ``;
+        upperDiv.appendChild(bElement);
     }
 
     if (node.tagName === targetTagName) {

src/javascript/enhancements/languageDisplay.js

@@ -0,0 +1,224 @@
+import * as core from '../utils/aniwatchCore';
+import * as helper from '../utils/helpers';
+
+export function init() {
+    core.registerScript(node => {
+        // run the scripts
+        if (helper.isHtmlElement(node)) {
+            updateLanguageDisplay(node)
+        }
+    }, "^/anime/[0-9]*$");
+}
+
+function updateLanguageDisplay(node) {
+    const listNodeName = 'MD-LIST-ITEM';
+    const boxNodeName = 'DIV';
+    const boxClassName = 'card-margin';
+
+    if (node.nodeName === listNodeName) {
+        updateLanguageDisplayListMode(node);
+    }
+    else if (node.nodeName === boxNodeName && node.classList.contains(boxClassName)) {
+        updateLanguageDisplayBoxMode(node);
+    }
+}
+
+function updateLanguageDisplayListMode(node) {
+    // last column with flags
+    let col = node.querySelector('h3.layout-align-end-center');
+
+    if (typeof col === 'undefined' || col.awpManipulated) {
+        return;
+    }
+
+    doUpdateLanguageDisplay(col, false);
+}
+
+function updateLanguageDisplayBoxMode(node) {
+    // last column with flags
+    let col = node.querySelector('div.layout-align-end-start');
+
+    if (typeof col === 'undefined' || col.awpManipulated) {
+        return;
+    }
+
+    doUpdateLanguageDisplay(col, true);
+}
+
+
+function doUpdateLanguageDisplay(parent, isBoxedModed) {
+    const listLangPrefix = 'ep.lang.';
+    const boxLangPrefix = 'episodeObject.lang.';
+    // aniwatch uses different prefixes in list und box mode :/
+    let realLangPrefix = isBoxedModed ? boxLangPrefix : listLangPrefix;
+
+    const dubSuffix = 'dub';
+    const subSuffix = 'sub';
+
+    const dubIcon = 'volume_up';
+    const subIcon = 'closed_caption';
+    const zeroWidthSpace = ''; // ​
+
+    let subs = [];
+    let dubs = [];
+
+    // find subs
+    let subCols = parent.querySelectorAll('[ng-hide*="sub"]');
+    subCols.forEach(element => {
+        let langAttr = element.attributes['ng-hide'].value;
+        let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(subSuffix));
+        if (element.attributes['aria-hidden'].value == 'false') {
+            subs.push(lang);
+        }
+    });
+
+    // find dubs
+    let dubCols = parent.querySelectorAll('[ng-hide*="dub"]');
+    dubCols.forEach(element => {
+        let langAttr = element.attributes['ng-hide'].value;
+        let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(dubSuffix));
+        if (element.attributes['aria-hidden'].value == 'false') {
+            dubs.push(lang);
+        }
+    });
+
+    // build output html
+    let iconsRequired = true;
+    let cols = [];
+
+    // subs first;
+    if (subs.length > 0) {
+        let colDiv = document.createElement('div');
+        colDiv.setAttribute('layout', 'column');
+        colDiv.classList.add('layout-column');
+
+        // do we have dubs?
+        if (dubs.length > 0) {
+            let dubDiv = document.createElement('div');
+            dubDiv.setAttribute('layout', 'row');
+            dubDiv.setAttribute('layout-align', 'start center');
+            dubDiv.classList.add('layout-align-start-center', 'layout-row');
+
+            let dubIconDiv = document.createElement('i');
+            if (iconsRequired) {
+                dubIconDiv.classList.add('material-icons', 'mr-3');
+                dubIconDiv.innerText = dubIcon;
+            }
+            // add dummy with 24px for correct presentation
+            else {
+                dubIconDiv.style.height = '24px';
+                dubIconDiv.innerText = zeroWidthSpace;
+            }
+
+            dubDiv.appendChild(dubIconDiv);
+
+            let japIcon = document.createElement('i');
+            japIcon.classList.add('flag', 'flag-jp', 'mg-all-1');
+            dubDiv.appendChild(japIcon);
+
+            colDiv.appendChild(dubDiv);
+        }
+
+        // do the subs
+        let subDiv = document.createElement('div');
+        subDiv.setAttribute('layout', 'row');
+        subDiv.setAttribute('layout-align', 'start center');
+        subDiv.classList.add('layout-align-start-center', 'layout-row');
+
+        let subIconDiv = document.createElement('i');
+        if (iconsRequired) {
+            subIconDiv.classList.add('material-icons', 'mr-3');
+            subIconDiv.innerText = subIcon;
+        }
+        // add dummy with 24px for correct presentation
+        else {
+            subIconDiv.style.height = '24px';
+            subIconDiv.innerText = zeroWidthSpace;
+        }
+
+        subDiv.appendChild(subIconDiv);
+        subs.forEach(lang => {
+            let langIcon = document.createElement('i');
+            langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1');
+            subDiv.appendChild(langIcon);
+        });
+
+        colDiv.appendChild(subDiv);
+
+        cols.push(colDiv);
+        iconsRequired = false;
+    }
+
+    if (dubs.length > 0) {
+        dubs.forEach(lang => {
+            let colDiv = document.createElement('div');
+            colDiv.setAttribute('layout', 'column');
+            colDiv.classList.add('layout-column');
+
+            let dubDiv = document.createElement('div');
+            dubDiv.setAttribute('layout', 'row');
+            dubDiv.setAttribute('layout-align', 'start center');
+            dubDiv.classList.add('layout-align-start-center', 'layout-row');
+
+            let dubIconDiv = document.createElement('i');
+            if (iconsRequired) {
+                dubIconDiv.classList.add('material-icons', 'mr-3');
+                dubIconDiv.innerText = dubIcon;
+            }
+            // add dummy with 24px for correct presentation
+            else {
+                dubIconDiv.style.height = '24px';
+                dubIconDiv.innerText = zeroWidthSpace;
+            }
+
+            dubDiv.appendChild(dubIconDiv);
+
+            let langIcon = document.createElement('i');
+            langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1');
+            dubDiv.appendChild(langIcon);
+
+            colDiv.appendChild(dubDiv);
+
+            // do we have subs?
+            if (subs.length > 0) {
+                let subDiv = document.createElement('div');
+                subDiv.setAttribute('layout', 'row');
+                subDiv.setAttribute('layout-align', 'start center');
+                subDiv.classList.add('layout-align-start-center', 'layout-row');
+
+                let subIconDiv = document.createElement('i');
+                if (iconsRequired) {
+                    subIconDiv.classList.add('material-icons', 'mr-3');
+                    subIconDiv.innerText = subIcon;
+                }
+                // add dummy with 24px for correct presentation
+                else {
+                    subIconDiv.style.height = '24px';
+                    subIconDiv.innerText = zeroWidthSpace;
+                }
+
+                subDiv.appendChild(subIconDiv);
+                colDiv.appendChild(subDiv);
+            }
+
+            cols.push(colDiv);
+            iconsRequired = false;
+        });
+    }
+
+    parent.innerHTML = '';
+    cols.forEach(div => {
+        parent.appendChild(div);
+    });
+
+    parent.querySelectorAll('.layout-column:not(:last-child)').forEach(div => {
+        div.style.borderRight = '1px solid rgba(155,155,155, 0.2)';
+    })
+
+    parent.querySelectorAll('.layout-column').forEach(div => {
+        div.style.paddingLeft = '2px';
+        div.style.paddingRight = '2px';
+    })
+
+    parent.awpManipulated = true;
+}

src/javascript/enhancements/lists.js

@@ -1,33 +0,0 @@
-import * as core from '../utils/aniwatchCore';
-import * as helper from '../utils/helpers';
-
-export function init() {
-    core.registerScript(node => {
-        // run the scripts
-        if (helper.isHtmlElement(node)) {
-            addListHorizontalSeparators(node)
-        }
-    }, ".*");
-}
-
-function addListHorizontalSeparators(node) {
-    const targetTagName = 'MD-LIST-ITEM'; // tagName is upper case
-
-    let updateFunc = item => {
-        // add border as horizontal seperator 
-        item.style.borderBottom = "1px solid rgba(155,155,155, 0.2)";
-    }
-
-    // are we target tag?
-    if (node.tagName === targetTagName) {
-        updateFunc(node);
-    } else {
-        // find items -> all 
-        let requestItems = node.querySelectorAll('md-list-item');
-
-        // update borders
-        requestItems.forEach(item => {
-            updateFunc(item);
-        });
-    }
-}

src/javascript/enhancements/quickSearch.js

@@ -57,14 +57,19 @@ function handleQuickSearch(event) {
         linkElement.click();
 
         // clean up afterwards
-        linkElement.href = '';
+        linkElement.removeAttribute('href');
         quickSearchElement.value = '';
     }
 }
 
 function handleSearchForShiftF(event) {
     if (helper.isShiftPressed) {
-        if (event.key === 'F') {
+        // check if some kind of input is focused already; we then prevent our hotkey
+        if (document.activeElement instanceof HTMLInputElement || document.activeElement.isContentEditable) {
+            return;
+        }
+        
+        if (event.code === 'KeyF') {
             event.preventDefault();
             document.getElementById(quickSearchID).focus();
         }

src/javascript/index.js

@@ -1,12 +1,10 @@
-import regeneratorRuntime from "regenerator-runtime";
-
 // core
 import { initCore } from './utils/aniwatchCore';
 // helper
 import { initHelpers } from './utils/helpers';
 // enhancements
 import { init as animeRequests } from './enhancements/animeRequests';
-import { init as lists } from './enhancements/lists';
+import { init as languageDisplay } from './enhancements/languageDisplay';
 import { init as notifications } from './enhancements/notifications';
 import { init as quickSearch } from './enhancements/quickSearch';
 
@@ -18,6 +16,6 @@ initHelpers();
 
 // enhancements
 animeRequests();
-lists();
+languageDisplay();
 notifications();
 quickSearch();

src/manifests/chrome.manifest.json

@@ -4,6 +4,9 @@
     "version": "$version",
     "version_name": "$semanticVersion",
     "description": "$description",
+    "permissions": [
+        "*://aniwatch.me/*"
+    ],
     "manifest_version": 2,
     "author": "$author",
     "homepage_url": "$homepageURL",
@@ -18,6 +21,9 @@
         "js": [
             "javascript/app.min.js"
         ],
+        "css": [
+            "stylesheets/aniwatchplus.min.css"
+        ],
         "run_at": "document_end"
     }]
 }

src/manifests/firefox.manifest.json

@@ -3,6 +3,9 @@
     "short_name": "$shortName",
     "version": "$version",
     "description": "$description",
+    "permissions": [
+        "*://aniwatch.me/*"
+    ],
     "manifest_version": 2,
     "author": "$author",
     "developer": $developer,
@@ -18,6 +21,9 @@
         "js": [
             "javascript/app.min.js"
         ],
+        "css": [
+            "stylesheets/aniwatchplus.min.css"
+        ],
         "run_at": "document_end"
     }]
 }

src/manifests/manifest.template.json

@@ -1,9 +1,12 @@
 {
     "name": "Aniwatch Plus",
     "short_name": "AW+",
-    "version": "0.1.0.0",
+    "version": "0.2.1.0",
-    "version_name": "0.1 Beta",
+    "version_name": "0.2.1 Beta",
     "description": "Aniwatch Plus is an unofficial extension which provides several UI improvments for https://aniwatch.me.",
+    "permissions": [
+        "*://aniwatch.me/*"
+    ],
     "manifest_version": 2,
     "author": "Serraniel",
     "developer": {
@@ -22,6 +25,9 @@
         "js": [
             "javascript/app.min.js"
         ],
+        "css": [
+            "stylesheets/aniwatchplus.min.css"
+        ],
         "run_at": "document_end"
     }]
 }

src/manifests/opera.manifest.json

@@ -4,6 +4,9 @@
     "version": "$version",
     "version_name": "$semanticVersion",
     "description": "$description",
+    "permissions": [
+        "*://aniwatch.me/*"
+    ],
     "manifest_version": 2,
     "author": "$author",
     "developer": $developer,
@@ -19,6 +22,9 @@
         "js": [
             "javascript/app.min.js"
         ],
+        "css": [
+            "stylesheets/aniwatchplus.min.css"
+        ],
         "run_at": "document_end"
     }]
 }

src/stylesheets/aniwatchplus.scss

@@ -0,0 +1,5 @@
+// vars
+@import './vars/colors';
+
+// enhancements
+@import './enhancements/lists.scss';

src/stylesheets/enhancements/_lists.scss

@@ -0,0 +1,5 @@
+md-list-item {
+    &:not(:last-child) {
+        border-bottom: 1px solid $gray;
+    }
+}

src/stylesheets/vars/_colors.scss

@@ -0,0 +1,2 @@
+$aniwatchBlue: #348fff;
+$gray: rgba(155, 155, 155, 0.2);