Merge pull request #1 from fiahfy/develop

v0.0.1

.babelrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@babel/env'],
+  plugins: ['@babel/transform-runtime']
+}

.eslintrc.js

@@ -3,12 +3,10 @@ module.exports = {
   env: {
     node: true
   },
-  globals: {
-    chrome: true
-  },
   extends: [
     'eslint:recommended',
     'plugin:prettier/recommended',
-    'plugin:vue/recommended'
+    'plugin:vue/recommended',
+    'prettier/vue'
   ]
 }

.huskyrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  hooks: {
+    'pre-commit': 'yarn test'
+  }
+}

.travis.yml

@@ -1,7 +1,6 @@
 os: osx
-osx_image: xcode10
 language: node_js
-node_js: 10
+node_js: node
 
 cache:
   yarn: true
@@ -18,6 +17,7 @@ deploy:
   file_glob: true
   file: dist/*
   skip_cleanup: true
+  draft: true
 
 branches:
   only:

README.md

@@ -1,23 +1,23 @@
 # YouTube Live Chat Filter
 [![Build Status](https://travis-ci.org/fiahfy/youtube-live-chat-filter.svg?branch=master)](https://travis-ci.org/fiahfy/youtube-live-chat-filter)
 
-> Chrome Extension for filtering messages on YouTube Live Chat.
+> Chrome Extension for Filtering Messages on YouTube Live Chat.
 
 
 ## Features
-* Filter messages added NG list.
+* Filter messages on chat by authority types.
 
 
 ## Screenshot
-![screenshot](./build/screenshots/screenshot.png?raw=true)
+![screenshot](.github/img/screenshot1.png)
+![screenshot](.github/img/screenshot2.png)
 
 
 ## Installation
-1. Download `.zip` file from [releases page](https://github.com/fiahfy/youtube-live-chat-filter/releases).
-2. Unzip this file.
-3. Open URL `chrome://extensions/` by Google Chrome.
-4. Enable developer mode.
-5. Drag and drop `app` directory.
+1. Download `archive.zip` from [releases page](https://github.com/fiahfy/youtube-live-chat-filter/releases) and unzip this file.
+2. Open the Extension Management page by navigating to `chrome://extensions`.
+3. Enable Developer Mode by clicking the toggle switch next to **Developer mode**.
+4. Click the **LOAD UNPACKED** button and select the unpacked directory named `app`.
 
 
 ## Development

package.json

@@ -5,34 +5,38 @@
   "author": {
     "name": "fiahfy",
     "email": "[email protected]",
-    "url": "http://fiahfy.blogspot.com/"
+    "url": "https://fiahfy.github.io/"
   },
   "dependencies": {
-    "vue": "^2.5.16",
-    "vuetify": "^1.0.17",
-    "vuex": "^3.0.1"
+    "vue": "^2.6.10",
+    "vuetify": "^2.0.5",
+    "vuex": "^3.0.1",
+    "vuex-persist": "^2.0.0",
+    "webextension-polyfill": "^0.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/register": "^7.0.0",
-    "@babel/runtime": "^7.0.0",
-    "babel-loader": "^8.0.2",
-    "copy-webpack-plugin": "^4.5.1",
-    "css-loader": "^1.0.0",
-    "eslint": "^5.6.0",
-    "eslint-config-prettier": "^3.1.0",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-vue": "^5.0.0-beta.3",
-    "file-loader": "^2.0.0",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/register": "^7.5.5",
+    "@babel/runtime": "^7.5.5",
+    "babel-loader": "^8.0.6",
+    "copy-webpack-plugin": "^5.0.4",
+    "css-loader": "^3.2.0",
+    "eslint": "^6.1.0",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-vue": "^5.2.3",
+    "file-loader": "^4.2.0",
     "html-webpack-plugin": "^3.2.0",
-    "prettier": "^1.14.3",
-    "vue-loader": "^15.0.5",
-    "vue-template-compiler": "^2.5.16",
-    "webpack": "^4.0.1",
-    "webpack-chrome-extension-reloader": "^0.8.3",
-    "webpack-cli": "^3.0.2"
+    "husky": "^3.0.3",
+    "prettier": "^1.18.2",
+    "svg-inline-loader": "^0.8.0",
+    "vue-loader": "^15.7.1",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.39.1",
+    "webpack-cli": "^3.3.6",
+    "webpack-extension-reloader": "^1.1.0"
   },
   "keywords": [
     "chrome extension",
@@ -42,15 +46,16 @@
     "youtube"
   ],
   "private": true,
+  "productName": "YouTube Live Chat Filter",
   "repository": {
     "type": "git",
     "url": "https://github.com/fiahfy/youtube-live-chat-filter"
   },
   "scripts": {
     "build": "webpack",
     "dev": "webpack -w --config webpack.config.dev.babel.js",
-    "lint": "eslint -f codeframe --ext .js --ignore-path .gitignore .",
-    "package": "NODE_ENV=production npm run build && mkdir -p dist && zip -r dist/youtube-live-chat-filter.zip app",
+    "lint": "eslint -f codeframe --ext .js,.vue --ignore-path .gitignore .",
+    "package": "NODE_ENV=production npm run build && mkdir -p dist && zip -r dist/archive.zip app",
     "test": "npm run lint"
   }
 }

src/background.js

@@ -1,69 +1,116 @@
-import { defaults } from './store/settings'
-import Logger from './utils/logger'
-import Storage from './utils/storage'
-import iconOff from './assets/icon-off48.png'
-import iconOn from './assets/icon-on48.png'
-import './assets/icon16.png'
-import './assets/icon48.png'
-import './assets/icon128.png'
-
-const enabled = {}
-
-const setIcon = (tabId) => {
-  const path = enabled[tabId] ? iconOn : iconOff
-  chrome.pageAction.setIcon({ tabId, path })
+import browser from 'webextension-polyfill'
+import createStore from './store'
+import code from './constants/stylesheet'
+import icon from './assets/icon.png'
+import iconOn from './assets/icon-on.png'
+
+let initialState = { enabled: false }
+let tabStates = {}
+
+const getSettings = async () => {
+  const store = await createStore(true)
+  return JSON.parse(JSON.stringify(store.state))
 }
 
-const sendMessage = (tabId) => {
-  chrome.tabs.sendMessage(tabId, {
-    id: 'enabledChanged',
-    data: { enabled: enabled[tabId] }
+const setIcon = async (tabId) => {
+  const path = tabStates[tabId] && tabStates[tabId].enabled ? iconOn : icon
+  await browser.pageAction.setIcon({ tabId, path })
+}
+
+const initTab = async (tabId, frameId) => {
+  const enabled = initialState.enabled
+  tabStates = { ...tabStates, [tabId]: { enabled } }
+
+  await setIcon(tabId)
+  await browser.pageAction.show(tabId)
+  await browser.tabs.insertCSS(tabId, { frameId, code })
+
+  const settings = await getSettings()
+
+  return { enabled, settings }
+}
+
+const getStateOnCurrentTab = async () => {
+  const tabs = await browser.tabs.query({
+    active: true,
+    currentWindow: true
   })
+  if (!tabs) {
+    return { enabled: false }
+  }
+  const tabId = tabs[0].id
+
+  return { enabled: !!(tabStates[tabId] && tabStates[tabId].enabled) }
 }
 
-chrome.pageAction.onClicked.addListener((tab) => {
-  Logger.log('chrome.pageAction.onClicked', tab)
+const toggleEnabled = async (tabId) => {
+  const enabled = !(tabStates[tabId] && tabStates[tabId].enabled)
+  tabStates = {
+    ...tabStates,
+    [tabId]: { ...(tabStates[tabId] || {}), enabled }
+  }
 
-  enabled[tab.id] = !enabled[tab.id]
-  setIcon(tab.id)
-  sendMessage(tab.id)
-})
+  await setIcon(tabId)
+
+  await browser.tabs.sendMessage(tabId, {
+    id: 'enabledChanged',
+    data: { enabled }
+  })
+}
 
-chrome.runtime.onInstalled.addListener(async (details) => {
-  Logger.log('chrome.runtime.onInstalled', details)
+const enabledChangedOnCurrentTab = async (enabled) => {
+  const tabs = await browser.tabs.query({
+    active: true,
+    currentWindow: true
+  })
+  if (!tabs) {
+    return
+  }
+  const tabId = tabs[0].id
 
-  const state = {
-    settings: defaults,
-    ...(await Storage.get())
+  tabStates = {
+    ...tabStates,
+    [tabId]: { ...(tabStates[tabId] || {}), enabled }
   }
-  await Storage.set(state)
-})
 
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-  Logger.log('chrome.runtime.onMessage', message, sender, sendResponse)
+  await setIcon(tabId)
 
-  const { id } = message
-  const { tab } = sender
+  await browser.tabs.sendMessage(tabId, {
+    id: 'enabledChanged',
+    data: { enabled }
+  })
+}
+
+const settingsChanged = async () => {
+  const settings = await getSettings()
+  const tabs = await browser.tabs.query({})
+  for (let tab of tabs) {
+    try {
+      await browser.tabs.sendMessage(tab.id, {
+        id: 'settingsChanged',
+        data: { settings }
+      })
+    } catch (e) {} // eslint-disable-line no-empty
+  }
+}
+
+browser.runtime.onMessage.addListener(async (message, sender) => {
+  const { id, data } = message
+  const { tab, frameId } = sender
   switch (id) {
     case 'contentLoaded':
-      chrome.pageAction.show(tab.id)
-      setIcon(tab.id)
-      sendMessage(tab.id)
+      return await initTab(tab.id, frameId)
+    case 'popupLoaded': {
+      return await getStateOnCurrentTab()
+    }
+    case 'menuButtonClicked':
+      await toggleEnabled(tab.id)
       break
-    case 'controlButtonClicked':
-      enabled[tab.id] = !enabled[tab.id]
-      setIcon(tab.id)
-      sendMessage(tab.id)
+    case 'enabledChanged':
+      await enabledChangedOnCurrentTab(data.enabled)
       break
-    case 'stateChanged':
-      chrome.tabs.query({}, (tabs) => {
-        tabs.forEach((tab) => {
-          chrome.tabs.sendMessage(tab.id, { id: 'stateChanged' })
-        })
-      })
+    case 'settingsChanged':
+      await settingsChanged()
       break
   }
 })
-;(() => {
-  Logger.log('background script loaded')
-})()