Fix menu button

Author: fiahfy

.github/workflows/extension.yml

@@ -1,23 +1,28 @@
-name: Web Extension CI
+name: Web Extension
 
 on:
   push:
     tags:
       - 'v*'
 
 jobs:
-  build:
+  publish:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version: 16
       - run: yarn
-      - run: yarn test
       - run: yarn package
       - uses: softprops/action-gh-release@v1
         with:
           draft: true
-          files: dist/archive.zip
+          files: dist/extension.zip
+      - uses: mnao305/chrome-extension-upload@v4.0.1
+        with:
+          files: dist/extension.zip
+          extension-id: ${{ vars.EXTENSION_ID }}
+          client-id: ${{ secrets.CLIENT_ID }}
+          client-secret: ${{ secrets.CLIENT_SECRET }}
+          refresh-token: ${{ secrets.REFRESH_TOKEN }}

README.md

@@ -1,6 +1,6 @@
 # Chat Filter for YouTube Live
 
-![badge](https://github.com/fiahfy/youtube-live-chat-filter/workflows/Web%20Extension%20CI/badge.svg)
+![badge](https://github.com/fiahfy/youtube-live-chat-filter/workflows/Web%20Extension/badge.svg)
 
 > Chrome Extension for Filtering Chat Messages on YouTube Live.
 
@@ -18,7 +18,7 @@
 
 ## Installation
 
-1. Download `archive.zip` from [releases page](https://github.com/fiahfy/youtube-live-chat-filter/releases) and unzip this file.
+1. Download `extension.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`.

package.json

@@ -3,38 +3,38 @@
   "description": "Chrome Extension for Filtering Chat Messages on YouTube Live.",
   "version": "0.0.11",
   "dependencies": {
-    "@vue/composition-api": "^1.6.2",
-    "nanoid": "^3.3.4",
+    "@vue/composition-api": "^1.7.1",
+    "nanoid": "^4.0.2",
     "vue": "~2.6.14",
-    "vuetify": "^2.6.6",
+    "vuetify": "~2.6.15",
     "vuex": "~3.6.2",
     "vuex-module-decorators": "~1.2.0",
     "vuex-persist": "^3.1.3"
   },
   "devDependencies": {
-    "@fiahfy/eslint-config-vue": "^0.0.17",
-    "@fiahfy/prettier-config": "^0.0.2",
-    "@fiahfy/tsconfig": "^0.0.1",
-    "@types/chrome": "^0.0.188",
-    "concurrently": "^7.2.1",
+    "@fiahfy/eslint-config-vue": "^0.0.20",
+    "@fiahfy/prettier-config": "^0.0.3",
+    "@fiahfy/tsconfig": "^0.0.2",
+    "@types/chrome": "^0.0.235",
+    "concurrently": "^8.0.1",
     "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.1",
-    "eslint": "^8.17.0",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.39.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
-    "husky": "^8.0.1",
+    "html-webpack-plugin": "^5.5.1",
+    "husky": "^8.0.3",
     "mv3-hot-reload": "^0.2.7",
-    "prettier": "^2.6.2",
+    "prettier": "^2.8.8",
     "sass": "~1.32.13",
-    "sass-loader": "^13.0.0",
+    "sass-loader": "^13.2.2",
     "svg-inline-loader": "^0.8.2",
-    "ts-loader": "^9.3.0",
-    "typescript": "^4.7.3",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.4",
     "vue-loader": "~15.9.8",
-    "vue-template-compiler": "^2.6.14",
-    "vuetify-loader": "^1.7.3",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.9.2"
+    "vue-template-compiler": "~2.6.14",
+    "vuetify-loader": "~1.7.3",
+    "webpack": "^5.81.0",
+    "webpack-cli": "^5.0.2"
   },
   "private": true,
   "productName": "Chat Filter for YouTube Live",
@@ -44,7 +44,7 @@
     "lint": "npm run lint:eslint && npm run lint:prettier",
     "lint:eslint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",
     "lint:prettier": "prettier -c --ignore-path .gitignore .",
-    "package": "npm run build && mkdir -p dist && zip -r dist/archive.zip app",
+    "package": "npm run build && mkdir -p dist && zip -r dist/extension.zip app",
     "prepare": "husky install",
     "test": "npm run lint",
     "watch:dist": "mv3-hot-reload",

src/components/RuleTableRow.vue

@@ -23,8 +23,9 @@
         outlined
         x-small
         style="pointer-events: none"
-        v-text="item.active ? 'active' : 'inactive'"
-      />
+      >
+        {{ item.active ? 'active' : 'inactive' }}
+      </v-chip>
     </td>
   </tr>
 </template>

src/content-script.css

@@ -7,10 +7,7 @@ yt-live-chat-header-renderer
   > yt-sort-filter-sub-menu-renderer {
   width: 100%;
 }
-yt-live-chat-header-renderer
-  > .ylcfr-menu-button.ylcfr-active-menu-button
-  > button
-  > yt-icon {
+yt-live-chat-header-renderer > .ylcfr-menu-button.ylcfr-active-menu-button {
   color: #4387f1 !important;
 }
 yt-live-chat-header-renderer > .ylcfr-menu-button > button > yt-icon > svg {

src/content-script.ts

@@ -59,17 +59,29 @@ const addMenuButton = async () => {
   const header = await querySelectorAsync(
     '#chat-messages > yt-live-chat-header-renderer'
   )
-  const refIconButton = header && header.querySelector('yt-icon-button')
+  const refIconButton = header && header.querySelector('yt-live-chat-button')
   if (!header || !refIconButton) {
     return
   }
 
   const icon = document.createElement('yt-icon')
-  icon.classList.add('yt-live-chat-header-renderer', 'style-scope')
+  icon.classList.add('style-scope', 'yt-button-renderer')
+
+  const button = document.createElement('button')
+  button.id = 'button'
+  button.classList.add('style-scope', 'yt-icon-button')
 
   const iconButton = document.createElement('yt-icon-button')
-  iconButton.id = 'overflow'
-  iconButton.classList.add(
+  iconButton.id = 'button'
+  iconButton.classList.add('style-scope', 'yt-button-renderer')
+
+  const a = document.createElement('a')
+  a.tabIndex = -1
+  a.classList.add('yt-simple-endpoint', 'style-scope', 'yt-button-renderer')
+
+  const liveChatButton = document.createElement('yt-live-chat-button')
+  liveChatButton.id = 'live-chat-header-context-menu'
+  liveChatButton.classList.add(
     ClassName.menuButton,
     'style-scope',
     'yt-live-chat-header-renderer'
@@ -78,13 +90,21 @@ const addMenuButton = async () => {
   iconButton.onclick = async () => {
     await chrome.runtime.sendMessage({ type: 'menu-button-clicked' })
   }
-  iconButton.append(icon)
 
-  header.insertBefore(iconButton, refIconButton)
+  header.insertBefore(liveChatButton, refIconButton)
+
+  liveChatButton.append(a)
+  a.append(iconButton)
+  iconButton.append(button)
+  button.append(icon)
 
   // insert svg after wrapper button appended
   icon.innerHTML = filterList
 
+  // remove unnecessary elements
+  liveChatButton.querySelector('yt-button-renderer')?.remove()
+  iconButton.querySelector('button')?.remove()
+
   updateMenuButton()
 }