Lots of updates :o

src/index.ts

@@ -1,46 +1,25 @@
-function hasSuffix(content: string, suffix: string) {
-    return content.indexOf(suffix, content.length - suffix.length) !== -1
-}
+import {matches} from "./match/match";
+import {getAllDisabled, getDisabled} from "./store/store";
 
-// @ts-ignore
-chrome.storage.local.get(['all', 'disabled'], function (result) {
-    let keys = Object.keys(result)
-    if (keys.indexOf('all') !== -1 && !result['all']) {
+async function main() {
+    if (await getAllDisabled()) {
         return
     }
-    // @ts-ignore
-    for (let match of matches) {
-        let domain = match[0] as string
-        if (window.location.href.indexOf(domain) !== -1) {
-            if (keys.indexOf('disabled') === -1 || result['disabled'].indexOf(domain) === -1) {
-                let regex = match[1] as RegExp
-                let matchClass = match[2] as Match
-                let reliability = match[3] as Reliability
+    const disabled = await getDisabled()
 
-                let re
-                if (regex !== null) {
-                    if ((re = document.body.innerHTML.match(regex)) === null) {
-                        continue
-                    }
-                } else {
-                    re = document.body.innerHTML.match(regex)
-                }
-
-                if (matchClass === null) {
-                    if (regex === null) {
-                        location.assign(document.body.innerHTML)
-                    } else {
-                        // @ts-ignore
-                        location.assign(hasSuffix(re[0], 'm3u8') ? chrome.runtime.getURL(`res/hls.html?domain=${domain}&reliability=${reliability}#${re[0]}`) : re[0])
-                    }
-                } else {
-                    matchClass.match(re).then(function (path) {
-                        // @ts-ignore
-                        location.assign(hasSuffix(path, 'm3u8') ? chrome.runtime.getURL(`res/hls.html?domain=${domain}&reliability=${reliability}#${path}`) : path)
-                    })
-                }
-            }
-            return
+    for (const match of matches) {
+        if (disabled.some((v) => v == match) || !match.domains.some((v) => window.location.host.indexOf(v) !== -1)) {
+            continue
         }
+
+        const re = document.body.innerHTML.match(match.regex)
+        if (re === null) {
+            continue
+        }
+
+        const url = await match.match(re)
+        location.assign(url.indexOf('.m3u8', url.length - 5) === -1 ? url : chrome.runtime.getURL(`ui/hls/hls.html?id=${match.id}&url=${encodeURIComponent(url)}`))
     }
-})
+}
+
+main()

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "Stream Bypass",
   "author": "ByteDream",
   "description": "A multi-browser addon / extension for multiple streaming providers which redirects directly to the source video.",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "homepage_url": "https://github.com/ByteDream/stream-bypass",
   "browser_specific_settings": {
     "gecko": {
@@ -21,16 +21,17 @@
         "*://*.streamtape.com/*",
         "*://*.streamzz.to/*",
         "*://*.thevideome.com/*",
+        "*://*.upstream.to/*",
         "*://*.vidlox.me/*",
         "*://*.vidstream.pro/*",
         "*://*.vidoza.net/*",
         "*://*.vivo.st/*",
         "*://*.vivo.sx/*",
         "*://*.voe.sx/*",
+        "*://*.voeunblk.com/*",
         "*://*.vupload.com/*"
       ],
       "js": [
-        "match.js",
         "index.js"
       ],
       "run_at": "document_end"
@@ -39,11 +40,10 @@
   "permissions": [
     "storage"
   ],
-  "content_security_policy": "script-src 'self' blob:; object-src 'self'",
   "browser_action": {
     "default_icon": "icons/stream-bypass.png",
     "default_title": "Stream Bypass",
-    "default_popup": "popup/popup.html"
+    "default_popup": "ui/popup/popup.html"
   },
   "icons": {
     "128": "icons/stream-bypass.png"

src/match.ts

@@ -1,139 +0,0 @@
-enum Reliability {
-    LOW = 1,
-    NORMAL,
-    HIGH
-}
-
-interface Match {
-    match(match: RegExpMatchArray): Promise<string>
-}
-
-class Evoload implements Match {
-    async match(match: RegExpMatchArray): Promise<string> {
-        const code = window.location.pathname.split('/').slice(-1)[0]
-        const response = await fetch('https://evoload.io/SecurePlayer', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({code: code})
-        })
-
-        const json = await response.json()
-        return json['stream']['src']
-    }
-}
-
-class MCloud implements Match {
-    async match(match: RegExpMatchArray): Promise<string> {
-        const code = window.location.pathname.split('/').slice(-1)[0]
-        const response = await fetch(`https://mcloud.to/info/${code}?skey=${match[0]}`, {
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            referrer: `https://mcloud.to/embed/${code}`
-        })
-        const json = await response.json()
-        return json['media']['sources'][0]['file']
-    }
-}
-
-class Mixdrop implements Match {
-    async match(match: RegExpMatchArray): Promise<string> {
-        return `https://a-${match[1]}.${match[4]}.${match[5]}/v/${match[2]}.${match[6]}?s=${match[12]}&e=${match[13]}`
-    }
-}
-
-class Newgrounds implements Match {
-    async match(match: RegExpMatchArray): Promise<string> {
-        let id = window.location.pathname.split('/').slice(-1)[0]
-        let response = await fetch(`https://www.newgrounds.com/portal/video/${id}`, {
-            headers: {
-                'X-Requested-With': 'XMLHttpRequest'
-            }
-        })
-        let json = await response.json()
-        return decodeURI(json['sources'][Object.keys(json['sources'])[0]][0]['src'])
-    }
-}
-
-class Streamtape implements Match {
-    async match(match: RegExpMatchArray): Promise<string> {
-        return `https://streamtape.com/get_video?${match[0]}`
-    }
-}
-
-class TheVideoMe implements Match {
-    async match(match: RegExpMatchArray): Promise<string> {
-        return `https://thevideome.com/${match[5]}.mp4`
-    }
-}
-
-class Upstream implements Match {
-    async match(match: RegExpMatchArray): Promise<string> {
-        return `https://${match[47]}.upstreamcdn.co/hls/${match.sort((a, b) => {return b.length - a.length})[0]}/master.m3u8`
-    }
-}
-
-class Vidstream implements Match {
-    async match(match: RegExpMatchArray): Promise<string> {
-        const code = window.location.pathname.split('/').slice(-1)[0]
-        const response = await fetch(`https://vidstream.pro/info/${code}?skey=${match[0]}`, {
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            referrer: `https://vidstream.pro/embed/${code}`
-        })
-        const json = await response.json()
-        return json['media']['sources'][0]['file']
-    }
-}
-
-class Vivo implements Match {
-    async match(match: RegExpMatchArray): Promise<string> {
-        return this.rot47(decodeURIComponent(match[0]))
-    }
-
-    // decrypts a string with the rot47 algorithm (https://en.wikipedia.org/wiki/ROT13#Variants)
-    rot47(encoded: string): string {
-        const s = []
-        for(let i = 0; i < encoded.length; i++) {
-            const j = encoded.charCodeAt(i)
-            if((j >= 33) && (j <= 126)) {
-                s[i] = String.fromCharCode(33+((j+ 14)%94))
-            } else {
-                s[i] = String.fromCharCode(j)
-            }
-        }
-        return s.join('')
-    }
-}
-
-// all domains to match. the matches must be structured like this:
-//      [domain, regex match (can be null), class to call after match (can be null), reliability]
-// => the domain which should be redirected
-// => the regex gets called if the user visits a site with the given domain and matches the websites document body.
-//    if the regex is null, the complete document body gets handled as one big regex match
-// => the class to call when the regex was parsed successfully. the class has to implement the `Match` interface.
-//    if the class is null, the user gets redirected to the first regex match element
-// => the reliability shows how reliable a stream redirect is. for example, vivo.sx works nearly every time whereas
-//    upstream.to works only sometimes because of a security mechanism they're using (CORS) which currently can't be bypassed
-//
-// every match HAS to be on an separate line (for automatically manifest generation)
-const matches = [
-    ['evoload.io', null, new Evoload(), Reliability.NORMAL],
-    ['mcloud.to', new RegExp(/(?<=')\w+(?=';)/gm), new MCloud(), Reliability.NORMAL],
-    ['mixdrop.co', new RegExp(/(?<=\|)\w{2,}/gm), new Mixdrop(), Reliability.HIGH],
-    ['newgrounds.com', null, new Newgrounds(), Reliability.HIGH],
-    ['streamtape.com', new RegExp(/id=\S*(?=')/gm), new Streamtape(), Reliability.NORMAL],
-    ['streamzz.to', new RegExp(/https?:\/\/get.streamz.tw\/getlink-\w+\.dll/gm), null, Reliability.NORMAL],
-    ['thevideome.com', new RegExp(/(?<=\|)\w{2,}/gm), new TheVideoMe(), Reliability.NORMAL],
-    //['upstream.to', new RegExp(/(?<=\|)\w{2,}/gm), new Upstream(), Reliability.LOW],
-    ['vidlox.me', new RegExp(/(?<=\[")\S+?(?=")/gm), null, Reliability.NORMAL],
-    ['vidstream.pro', new RegExp(/(?<=')\w+(?=';)/gm), new Vidstream(), Reliability.LOW],
-    ['vidoza.net', new RegExp(/(?<=src:(\s*)?")\S*(?=")/gm), null, Reliability.NORMAL],
-    ['vivo.st', new RegExp(/(?<=source:\s')(\S+)(?=')/gm), new Vivo(), Reliability.HIGH],
-    ['vivo.sx', new RegExp(/(?<=source:\s')(\S+)(?=')/gm), new Vivo(), Reliability.HIGH],
-    ['voe.sx', new RegExp(/https?:\/\/\S*m3u8(?=")/gm), null, Reliability.HIGH],
-    ['vupload.com', new RegExp(/(?<=src:\s?").+?(?=")/gm), null, Reliability.NORMAL]
-]

src/match/match.ts

@@ -0,0 +1,278 @@
+export enum Reliability {
+    HIGH = 1,
+    NORMAL,
+    LOW,
+}
+
+export abstract class Match {
+    name: string
+    id: string
+    reliability: Reliability
+    domains: string[]
+    regex: RegExp
+    abstract match(match: RegExpMatchArray): Promise<string>
+
+    locked?: boolean
+    notice?: string
+}
+
+class Evoload implements Match {
+    name = 'Evoload'
+    id = 'evoload'
+    reliability = Reliability.NORMAL
+    domains = [
+        'evoload.io'
+    ]
+    regex = new RegExp(/.*/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        const code = window.location.pathname.split('/').slice(-1)[0]
+        const response = await fetch('https://evoload.io/SecurePlayer', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({code: code})
+        })
+
+        const json = await response.json()
+        return json['stream']['src']
+    }
+}
+
+class MCloud implements Match {
+    name = 'MCloud'
+    id = 'mcloud'
+    reliability = Reliability.HIGH
+    domains = [
+        'mcloud.to'
+    ]
+    regex = new RegExp(/(?<=')\w+(?=';)/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        const code = window.location.pathname.split('/').slice(-1)[0]
+        const response = await fetch(`https://mcloud.to/info/${code}?skey=${match[0]}`, {
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            referrer: `https://mcloud.to/embed/${code}`
+        })
+        const json = await response.json()
+        return json['media']['sources'][0]['file']
+    }
+}
+
+class Mixdrop implements Match {
+    name = 'Mixdrop'
+    id = 'mixdrop'
+    reliability = Reliability.HIGH
+    domains = [
+        'mixdrop.co'
+    ]
+    regex = new RegExp(/(?<=\|)\w{2,}/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        return `https://a-${match[1]}.${match[4]}.${match[5]}/v/${match[2]}.${match[6]}?s=${match[12]}&e=${match[13]}`
+    }
+}
+
+class Newgrounds implements Match {
+    name = 'Newgrounds'
+    id = 'newgrounds'
+    reliability = Reliability.HIGH
+    domains = [
+        'newgrounds.com'
+    ]
+    regex = new RegExp(/.*/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        let id = window.location.pathname.split('/').slice(-1)[0]
+        let response = await fetch(`https://www.newgrounds.com/portal/video/${id}`, {
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+        let json = await response.json()
+        return decodeURI(json['sources'][Object.keys(json['sources'])[0]][0]['src'])
+    }
+}
+
+class Streamtape implements Match {
+    name = 'Streamtape'
+    id = 'streamtape'
+    reliability = Reliability.NORMAL
+    domains = [
+        'streamtape.com'
+    ]
+    regex = new RegExp(/id=\S*(?=')/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        return `https://streamtape.com/get_video?${match[0]}`
+    }
+}
+
+class Streamzz implements Match {
+    name = 'Streamzz'
+    id = 'streamzz'
+    reliability = Reliability.NORMAL
+    domains = [
+        'streamzz.to'
+    ]
+    regex = new RegExp(/https?:\/\/get.streamz.tw\/getlink-\w+\.dll/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        return match[0]
+    }
+}
+
+class TheVideoMe implements Match {
+    name = 'TheVideoMe'
+    id = 'thevideome'
+    reliability = Reliability.NORMAL
+    domains = [
+        'thevideome.com'
+    ]
+    regex = new RegExp(/(?<=\|)\w{2,}/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        return `https://thevideome.com/${match[5]}.mp4`
+    }
+}
+
+class Upstream implements Match {
+    name = 'Upstream'
+    id = 'upstream'
+    reliability = Reliability.NORMAL
+    domains = [
+        'upstream.to'
+    ]
+    regex = new RegExp(/(?<=\|)\w{2,}/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        return `https://${match[49]}.upstreamcdn.co/hls/${match[148]}/master.m3u8`
+    }
+}
+
+class Vidlox implements Match {
+    name = 'Vidlox'
+    id = 'vidlox'
+    reliability = Reliability.NORMAL
+    domains = [
+        'vidlox.me'
+    ]
+    regex = new RegExp(/(?<=\[")\S+?(?=")/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        return match[0]
+    }
+}
+
+class Vidstream implements Match {
+    name = 'Vidstream'
+    id = 'vidstream'
+    reliability = Reliability.LOW
+    domains = [
+        'vidstream.pro'
+    ]
+    regex = new RegExp(/(?<=')\w+(?=';)/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        const code = window.location.pathname.split('/').slice(-1)[0]
+        const response = await fetch(`https://vidstream.pro/info/${code}?skey=${match[0]}`, {
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            referrer: `https://vidstream.pro/embed/${code}`
+        })
+        const json = await response.json()
+        return json['media']['sources'][0]['file']
+    }
+}
+
+class Vidoza implements Match {
+    name = 'Vidoza'
+    id = 'vidoza'
+    reliability = Reliability.NORMAL
+    domains = [
+        'vidoza.net'
+    ]
+    regex = new RegExp(/(?<=src:(\s*)?")\S*(?=")/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        return match[0]
+    }
+}
+
+class Vivo implements Match {
+    name = 'Vivo'
+    id = 'vivo'
+    reliability = Reliability.HIGH
+    domains = [
+        'vivo.st',
+        'vivo.sx'
+    ]
+    regex = new RegExp(/(?<=source:\s')(\S+)(?=')/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        return this.rot47(decodeURIComponent(match[0]))
+    }
+
+    // decrypts a string with the rot47 algorithm (https://en.wikipedia.org/wiki/ROT13#Variants)
+    rot47(encoded: string): string {
+        const s = []
+        for(let i = 0; i < encoded.length; i++) {
+            const j = encoded.charCodeAt(i)
+            if((j >= 33) && (j <= 126)) {
+                s[i] = String.fromCharCode(33+((j+ 14)%94))
+            } else {
+                s[i] = String.fromCharCode(j)
+            }
+        }
+        return s.join('')
+    }
+}
+
+class Voe implements Match {
+    name = 'Voe'
+    id = 'voe'
+    reliability = Reliability.HIGH
+    domains = [
+        'voe.sx',
+        'voeunblk.com'
+    ]
+    regex = new RegExp(/https?:\/\/\S*m3u8(?=")/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        return match[0]
+    }
+}
+
+class Vupload implements Match {
+    name = 'Vupload'
+    id = 'vupload'
+    reliability = Reliability.HIGH
+    domains = [
+        'vupload.com'
+    ]
+    regex = new RegExp(/(?<=src:\s?").+?(?=")/gm)
+
+    async match(match: RegExpMatchArray): Promise<string> {
+        return match[0]
+    }
+}
+
+export const matches = [
+    new Evoload(),
+    new MCloud(),
+    new Mixdrop(),
+    new Newgrounds(),
+    new Streamtape(),
+    new Streamzz(),
+    new TheVideoMe(),
+    new Upstream(),
+    new Vidlox(),
+    new Vidoza(),
+    new Vivo(),
+    new Voe(),
+    new Vupload()
+]

src/popup/popup.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <link rel="stylesheet" href="popup.css">
-    <script src="../ext/popper.min.js"></script>
-    <script src="../ext/tippy-bundle.umd.min.js"></script>
-    <script src="../match.js"></script>
-</head>
-<body>
-    <div id="container">
-        <div id="all">
-            <div class="buttons">
-                <a>On</a>
-                <a>Off</a>
-            </div>
-        </div>
-        <hr>
-        <table id="sub-container">
-        </table>
-        <a id="error" href="https://github.com/ByteDream/stream-bypass/issues/new">Something does not work as expected</a>
-    </div>
-    <script src="./popup.js"></script>
-</body>
-</html>

src/popup/popup.ts

@@ -1,163 +0,0 @@
-function enableAll(enable: boolean) {
-    // @ts-ignore
-    chrome.storage.local.set({'all': enable})
-
-    // @ts-ignore
-    for (let button of document.getElementById('sub-container').getElementsByTagName('a')) {
-        enable ? button.classList.remove('disabled') : button.classList.add('disabled')
-    }
-}
-
-function enableOne(website: string, enable: boolean) {
-    // @ts-ignore
-    chrome.storage.local.get(['disabled'], function (result) {
-        let disabled: string[] = Object.keys(result).length === 0 ? [] : result['disabled']
-        if (enable && disabled.indexOf(website) !== -1) {
-            disabled.splice(disabled.indexOf(website), 1)
-        } else if (!enable && disabled.indexOf(website) === -1) {
-            disabled.push(website)
-        } else {
-            return
-        }
-
-        // @ts-ignore
-        chrome.storage.local.set({'disabled': disabled})
-    })
-}
-
-// @ts-ignore
-chrome.storage.local.get(['all', 'disabled'], function (result) {
-    let allDisabled = result['all'] !== undefined && !result['all']
-    let disabled = new Map()
-
-    if (allDisabled) {
-        // @ts-ignore
-        for (let match of matches) {
-            disabled.set(match[0], false)
-        }
-    } else {
-        if (Object.keys(result).indexOf('disabled') !== -1) {
-            for (let disable of result['disabled']) {
-                disabled.set(disable, false)
-            }
-        }
-    }
-
-    let subContainer = document.getElementById('sub-container')
-    // @ts-ignore
-    for (let match of matches) {
-        let row = document.createElement('tr')
-
-        let name = document.createElement('td')
-        let nameValue = document.createElement('p')
-        nameValue.innerText = match[0]
-        switch (match[3]) {
-            case 1: // low
-                nameValue.classList.add('low-reliability')
-                // @ts-ignore
-                tippy(nameValue, {
-                    content: 'Low reliability: Errors may occur often'
-                })
-                break
-            case 2: // normal
-                nameValue.classList.add('normal-reliability')
-                // @ts-ignore
-                tippy(nameValue, {
-                    content: 'Normal reliability: Save to use but errors may occur'
-                })
-                break
-            case 3: //high
-                nameValue.classList.add('high-reliability')
-                // @ts-ignore
-                tippy(nameValue, {
-                    content: 'High reliability: Errors are very unlikely to happen'
-                })
-                break
-        }
-        let buttons = document.createElement('td')
-        buttons.classList.add('buttons')
-        let on = document.createElement('a')
-        on.innerText = 'On'
-        // @ts-ignore
-        let onTippy = tippy(on, {
-            content: `Enable ${match[0]}`,
-            onMount: () => {
-                if (on.classList.contains('active') || off.classList.contains('disabled')) {
-                    onTippy.hide()
-                }
-            }
-        })
-        let off = document.createElement('a')
-        off.innerText = 'Off'
-        // @ts-ignore
-        let offTippy = tippy(off, {
-            content: `Disable ${match[0]}`,
-            onMount: () => {
-                if (off.classList.contains('active') || off.classList.contains('disabled')) {
-                    offTippy.hide()
-                }
-            }
-        })
-        disabled.has(match[0]) ? off.classList.add('active') : on.classList.add('active')
-        if (allDisabled) {
-            on.classList.add('disabled')
-            off.classList.add('disabled')
-        }
-
-        on.onclick = function () {
-            if (!on.classList.contains('disabled')) {
-                enableOne(match[0], true)
-                on.classList.add('active')
-                off.classList.remove('active')
-            }
-        }
-        off.onclick = function () {
-            if (!off.classList.contains('disabled')) {
-                enableOne(match[0], false)
-                on.classList.remove('active')
-                off.classList.add('active')
-            }
-        }
-
-        name.append(nameValue)
-        buttons.append(on, off)
-        row.append(name, buttons)
-        subContainer.append(row)
-    }
-
-    let allButtons = document.getElementById('all').getElementsByTagName('a')
-    let allOn = allButtons[0]
-    allButtons[0].onclick = function () {
-        if (!allButtons[0].classList.contains('disabled')) {
-            enableAll(true)
-            allButtons[0].classList.add('active')
-            allButtons[1].classList.remove('active')
-        }
-    }
-    // @ts-ignore
-    let allOnTippy = tippy(allOn, {
-        content: 'Enable all websites',
-        onMount: () => {
-            if (allButtons[0].classList.contains('active')) {
-                allOnTippy.hide()
-            }
-        }
-    })
-    allButtons[1].onclick = function () {
-        if (!allButtons[1].classList.contains('disabled')) {
-            enableAll(false)
-            allButtons[0].classList.remove('active')
-            allButtons[1].classList.add('active')
-        }
-    }
-    // @ts-ignore
-    let allOffTippy = tippy(allButtons[1], {
-        content: 'Disable all websites',
-        onMount: () => {
-            if (allButtons[1].classList.contains('active')) {
-                allOffTippy.hide()
-            }
-        }
-    })
-    allDisabled ? allButtons[1].classList.add('active') : allButtons[0].classList.add('active')
-})

src/res/hls.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>m3u8</title>
-    <link rel="stylesheet" href="/res/hls.css">
-    <script src="/ext/hls.light.min.js"></script>
-</head>
-<body>
-<video id="video"></video>
-<p id="message" hidden></p>
-<script src="/res/hls.js"></script>
-</body>
-</html>

src/res/hls.ts

@@ -1,62 +0,0 @@
-function showMessage(message: string) {
-    let messageElement = document.getElementById('message') as HTMLParagraphElement
-    messageElement.innerHTML = message
-    messageElement.hidden = false
-    document.getElementById('video').hidden = true
-}
-
-function loadHls() {
-    let url = window.location.hash.substring(1)
-    let video = document.getElementById('video') as HTMLVideoElement;
-
-    video.controls = true
-    if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url
-    // @ts-ignore
-    } else if (Hls.isSupported()) {
-        // @ts-ignore
-        let hls = new Hls()
-        hls.loadSource(url)
-        hls.attachMedia(video)
-
-        let searchParams = new URLSearchParams(window.location.search)
-        let rawReliability = parseInt(searchParams.get('reliability'))
-
-        let thirdPartyFallback = setTimeout(() => {
-            let message: string
-
-            switch (rawReliability) {
-                case 1: // low
-                    message = `The reliability for this domain is low, errors like this are common.
-                    Try to choose another streaming provider (if existent) or deactivate the addon for this domain (${searchParams.get('domain')}) and try again`
-                    break
-                case 2: // normal
-                    message = `The reliability for this domain is normal, errors like this can occur but are not very common. Try to refresh the page`
-                    break
-                case 3: // high
-                    message = `The reliability for this domains is high, errors like this are very unlikely to happen.
-                    Try to refresh the page and if the error still exists you might want to open a new issue <a href="https://github.com/ByteDream/stream-bypass/issues/new">here</a>.
-                    When you're using <a href="https://www.torproject.org/">Tor</a> such errors have a slight chance to occur more often,
-                    so if this is the case just try to reload the page and see if you it's working then`
-                    break
-            }
-
-            // shows a message if hls could not be loaded
-            showMessage(`Could not load hls video. ${message}`)
-        }, rawReliability * 3000)
-
-        document.title = searchParams.get('domain')
-
-        // @ts-ignore
-        hls.on(Hls.Events.MANIFEST_PARSED, () => {
-            clearTimeout(thirdPartyFallback)
-            document.getElementById('video').hidden = false
-            document.getElementById('message').hidden = true
-        })
-    } else {
-        // shows a message if hls is not supported
-        showMessage(`Failed to play m3u8 video (hls is not supported). Try again or create a new issue <a href="https://github.com/ByteDream/stream-bypass/issues/new">here</a>`)
-    }
-}
-
-loadHls()

src/store/store.ts

@@ -0,0 +1,55 @@
+import {Match, matches} from "../match/match";
+
+async function storageGet(key: string): Promise<any> {
+    return new Promise((resolve) => {
+        chrome.storage.local.get(key, (value) => {
+            resolve(value[key])
+        })
+    })
+}
+
+async function storageSet(key: string, value: any) {
+    const obj = {}
+    obj[key] = value
+    await chrome.storage.local.set(obj)
+}
+
+export async function getDisabled(): Promise<Match[]> {
+    const localMatches = []
+
+    for (const disabled of (await storageGet('disabled') as string[]) || []) {
+        let m: Match
+        if ((m = matches.find((v) => v.id === disabled)) !== undefined) {
+            localMatches.push(m)
+        }
+    }
+
+    return localMatches
+}
+
+export async function getAllDisabled(): Promise<boolean> {
+    const value = await storageGet('all')
+    return value !== undefined ? value as unknown as boolean : false
+}
+
+export async function enableAll() {
+    await storageSet('all', false)
+}
+
+export async function disableAll() {
+    await storageSet('all', true)
+}
+
+export async function enable(match: Match) {
+    const disabled = await storageGet('disabled') || []
+    disabled.splice(disabled.indexOf(match.id))
+    await storageSet('disabled', disabled)
+}
+
+export async function disable(match: Match) {
+    const disabled = await storageGet('disabled') as string[] || []
+    if (disabled.indexOf(match.id) !== undefined) {
+        disabled.push(match.id)
+        await storageSet('disabled', disabled)
+    }
+}

src/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
-    "target": "es2015",
+    "module": "esnext",
+    "target": "es2019",
     "removeComments": true,
     "lib": [
       "dom",
@@ -12,6 +12,6 @@
     ]
   },
   "exclude": [
-    "node_modules"
-  ],
-}
+    "../node_modules"
+  ]
+}

src/ui/hls/hls.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>HLS</title>
+    <link rel="stylesheet" href="hls.css">
+    <script src="hls.js" defer></script>
+</head>
+<body>
+<video id="video"></video>
+<p id="message" hidden></p>
+</body>
+</html>

src/ui/hls/hls.ts

@@ -0,0 +1,70 @@
+import {matches, Reliability} from "../../match/match";
+// @ts-ignore
+import Hls from "hls.js";
+
+function show_message(message: string) {
+    const messageElement = document.getElementById('message') as HTMLParagraphElement
+    messageElement.innerText = message
+    messageElement.hidden = false
+    document.getElementById('video').hidden = true
+}
+
+async function main() {
+    const urlQuery = new URLSearchParams(window.location.search)
+    const id = urlQuery.get('id')
+    const url = urlQuery.get('url')
+
+    const match = matches.find((m) => m.id === id)
+    if (match === undefined) {
+        show_message(`Invalid id: ${id}. Please report this <a href="https://github.com/ByteDream/stream-bypass/issues/new">here</a>`)
+        return
+    }
+    document.title = match.name
+
+    const video = document.getElementById('video') as HTMLVideoElement
+    video.controls = true
+
+    if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url
+    } else if (Hls.isSupported()) {
+        const hls = new Hls({
+            enableWorker: false
+        })
+        hls.loadSource(url)
+        hls.attachMedia(video)
+
+        const loaded = await new Promise((resolve, reject) => {
+            setTimeout(() => {
+                resolve(false)
+            }, match.reliability * 3000)
+
+            hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                resolve(true)
+            })
+        })
+
+        if (!loaded) {
+            let message: string
+            switch (match.reliability) {
+                case Reliability.LOW:
+                    message = `The reliability for this domain is low, errors like this are common.
+                    Try to choose another streaming provider (if existent) or deactivate the addon for this provider (${match.name}) and try again`
+                    break
+                case Reliability.NORMAL:
+                    message = `The reliability for this domain is normal, errors like this can occur but are not very common. Try to refresh the page`
+                    break
+                case Reliability.HIGH:
+                    message = `The reliability for this domains is high, errors like this are very unlikely to happen.
+                    Try to refresh the page and if the error still exists you might want to open a new issue <a href="https://github.com/ByteDream/stream-bypass/issues/new">here</a>.
+                    When you're using <a href="https://www.torproject.org/">Tor</a> such errors have a slight chance to occur more often,
+                    so if this is the case just try to reload the page and see if it's working then`
+                    break
+            }
+            show_message(`Could not load HLS video. ${message}`)
+        }
+    } else {
+        show_message('Failed to play m3u8 video (hls is not supported). Try again or create a new issue <a href="https://github.com/ByteDream/stream-bypass/issues/new">here</a>')
+    }
+}
+
+main()

src/ui/popup/popup.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Stream-Bypass</title>
+    <link rel="stylesheet" href="popup.css">
+    <script src="popup.js" defer></script>
+</head>
+<body>
+<div id="container">
+    <div id="all">
+        <div class="buttons">
+            <a>On</a>
+            <a>Off</a>
+        </div>
+    </div>
+    <hr>
+    <table id="sub-container">
+    </table>
+    <a id="error" href="https://github.com/ByteDream/stream-bypass/issues/new">Something does not work</a>
+</div>
+</body>
+</html>

src/ui/popup/popup.ts

@@ -0,0 +1,96 @@
+import {getDisabled, disable, enable, getAllDisabled, enableAll, disableAll} from "../../store/store";
+import {matches, Reliability} from "../../match/match";
+
+async function main() {
+    const disabled = await getDisabled()
+
+    const subContainer = document.getElementById('sub-container')
+    for (const m of matches) {
+        const row = document.createElement('tr')
+
+        const name = document.createElement('td')
+        const nameValue = document.createElement('p')
+        nameValue.innerText = m.name
+        switch (m.reliability) {
+            case Reliability.LOW:
+                nameValue.classList.add('low-reliability')
+                break
+            case Reliability.NORMAL:
+                nameValue.classList.add('normal-reliability')
+                break
+            case Reliability.HIGH:
+                nameValue.classList.add('high-reliability')
+                break
+        }
+
+        const buttons = document.createElement('td')
+        buttons.classList.add('buttons')
+        const on = document.createElement('a')
+        on.innerText = 'On'
+        const off = document.createElement('a')
+        off.innerText = 'Off'
+        disabled.find((v) => v.id === m.id) === undefined ? on.classList.add('active') : off.classList.add('active')
+
+        on.onclick = async function () {
+            if (!on.classList.contains('disabled')) {
+                await enable(m)
+                on.classList.add('active')
+                off.classList.remove('active')
+            }
+        }
+        off.onclick = async function () {
+            if (!off.classList.contains('disabled')) {
+                await disable(m)
+                on.classList.remove('active')
+                off.classList.add('active')
+            }
+        }
+
+        name.append(nameValue)
+        buttons.append(on, off)
+        row.append(name, buttons)
+        subContainer.append(row)
+    }
+
+    const allOnButton = document.getElementById('all').getElementsByTagName('a')[0]
+    const allOffButton = document.getElementById('all').getElementsByTagName('a')[1]
+
+    if (await getAllDisabled()) {
+        const allBtns = document.getElementById('sub-container').getElementsByTagName('a')
+        for (let i = 0; i < allBtns.length; i++) {
+            allBtns[i].classList.add('disabled')
+        }
+        allOffButton.classList.add('active')
+    } else {
+        allOnButton.classList.add('active')
+    }
+
+    allOnButton.onclick = async () => {
+        if (!allOnButton.classList.contains('active')) {
+            allOnButton.classList.add('active')
+            allOffButton.classList.remove('active')
+
+            const allBtns = document.getElementById('sub-container').getElementsByTagName('a')
+            for (let i = 0; i < allBtns.length; i++) {
+                allBtns[i].classList.remove('disabled')
+            }
+
+            await enableAll()
+        }
+    }
+    allOffButton.onclick = async () => {
+        if (!allOffButton.classList.contains('active')) {
+            allOffButton.classList.add('active')
+            allOnButton.classList.remove('active')
+
+            const allBtns = document.getElementById('sub-container').getElementsByTagName('a')
+            for (let i = 0; i < allBtns.length; i++) {
+                allBtns[i].classList.add('disabled')
+            }
+
+            await disableAll()
+        }
+    }
+}
+
+main()