2.2 (#16)

* fix: youtube bypassCSP #15

* doc: 2.2

* doc: fix package stats

* doc: add note

Author: lanly-dev

CHANGELOG.md

@@ -17,6 +17,18 @@ Check [Keep a Changelog](http://keepachangelog.com) for recommendations on how t
 - Shelljs vs Execa
 - Support for other sites
 
+## [2.2.0] - September 2024
+- Youtube CSP bypass [#15](https://github.com/lanly-dev/VSCode-LMPTM/issues/15)
+- webpack 5.94.0 compiled successfully in 8730 ms
+- 20 files, 1.4MB, 1.93.0
+
+### Note
+- Chrome team added the [Trusted Types to YouTube](https://developer.chrome.com/blog/trusted-types-on-youtube) - thanks [Matthew](https://github.com/mattzgg) for the info
+- There is probably a proper way to comply with the new security requirement but yeah, one shortcut is just to bypass it by disabling the [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+- It seems like the webpack (in old project/machine) that used to publish this extension doesn't combine files, another package stats:
+  - webpack 5.94.0 compiled successfully in 3000 ms
+  - 15 files, 1.4MB, 1.93.0
+
 ## [2.1.0] - July 2024
 - Fix Spotify and YouTube Music due to its UI change
 - webpack 5.92.1 compiled successfully in 10241 ms

README.md

@@ -18,7 +18,8 @@ This extension launches a Chrome/Chromium browser to the 4 popular music sites,
 Supports SoundCloud, Spotify, YouTube, and YouTube Music
 
 ## Requirements
-Required Chromium-based browser
+- Required Chromium-based browser
+- [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) is disabled for Spotify, Youtube, and Youtube Music
 
 ## Extension Settings
 * `lmptm.browserPath`: Specify custom browser executable file path.
@@ -33,6 +34,9 @@ Required Chromium-based browser
 - Won't be able to log into YouTube and SoundCloud(email method)
 
 ## Release Notes
+### 2.2.0
+- CSP bypass for Youtube and Youtube Music
+
 ### 2.1.0
 - Fix Spotify and YouTube Music for its UI changes
 

package.json

@@ -3,10 +3,10 @@
   "displayName": "Let Me Play The Music",
   "description": "Playback control buttons for the popular music sites",
   "homepage": "https://github.com/lanly-dev/VSCode-LMPTM",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "publisher": "lanly-dev",
   "engines": {
-    "vscode": "^1.91.0"
+    "vscode": "^1.93.0"
   },
   "extensionKind": [
     "ui"
@@ -72,7 +72,7 @@
             "type": "array",
             "default": [
               "https://soundcloud.com",
-              "https://www.youtube.com",
+              "https://www.youtube.com/trending",
               "https://open.spotify.com",
               "https://music.youtube.com"
             ],
@@ -130,10 +130,10 @@
   "devDependencies": {
     "@types/copy-webpack-plugin": "^8.0.1",
     "@types/karma-chrome-launcher": "^3.1.4",
-    "@types/node": "^20.14.10",
+    "@types/node": "^22.5.5",
     "@types/puppeteer-core": "^5.4.0",
     "@types/shelljs": "^0.8.15",
-    "@types/vscode": "^1.91.0",
+    "@types/vscode": "^1.93.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "copy-webpack-plugin": "^12.0.2",
@@ -142,9 +142,9 @@
     "shelljs": "^0.8.5",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.3",
-    "vsce": "^2.5.1",
-    "webpack": "^5.92.1",
+    "typescript": "^5.6.2",
+    "vsce": "^2.15.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {

src/browser.ts

@@ -60,7 +60,7 @@ export default class Browser {
       }
 
       Browser.launched = true
-      // console.log('###########################################')
+      // console.log('#### Browser Launched ####')
       puppeteer.launch({
         args,
         defaultViewport: null,
@@ -301,10 +301,7 @@ export default class Browser {
     await page.waitForNetworkIdle() // this somehow prevents navigation error
     const pageURL = page.url()
     const brand = this.musicBrandCheck(pageURL)
-
-    // Spotify needs bypass CSP
-    // won't stick to another site (if go to another URL) after set
-    if (brand === 'spotify') this.spotifyBypassCSP(page)
+    this.bypassCSP(brand, page)
 
     const title = await page.title()
 
@@ -339,9 +336,7 @@ export default class Browser {
   private async pageCreated(page: puppeteer.Page) {
     const pageURL = page.url()
     const brand = pageURL === 'about:blank' ? 'other' : this.musicBrandCheck(pageURL)
-
-    // Spotify needs bypass CSP
-    if (brand === 'spotify') this.spotifyBypassCSP(page)
+    this.bypassCSP(brand, page)
 
     let title = pageURL === 'about:blank' ? pageURL : await page.title()
     if (title === '') title = 'New Tab'
@@ -422,7 +417,9 @@ export default class Browser {
     }
   }
 
-  private async spotifyBypassCSP(page: puppeteer.Page) {
+  // Won't stick if go to another site (if go to another URL)
+  private async bypassCSP(brand: string, page: puppeteer.Page) {
+    if (['spotify', 'youtube', 'ytmusic'].includes(brand)) await page.setBypassCSP(true)
     page.setBypassCSP(true)
     // for debugging
     await page.evaluate(() => sessionStorage.setItem('bypassCSP', 'true'))

src/inject/script.js

@@ -52,25 +52,25 @@ function click() {
   if (href.includes('soundcloud.com')) {
     if (!document.querySelector('.m-visible')) {
       btnPick.disabled = true
-      return void showInfo(btnPick, 'soundcloud')
+      return void showRejectInfo(btnPick, 'soundcloud')
     }
     brand = 'soundcloud'
   } else if (href.includes('open.spotify.com')) {
     if (!navigator.mediaSession.metadata.title) {
       btnPick.disabled = true
-      return void showInfo(btnPick, 'spotify')
+      return void showRejectInfo(btnPick, 'spotify')
     }
     brand = 'spotify'
   } else if (href.includes('www.youtube.com')) {
     if (!href.includes('/watch')) {
       btnPick.disabled = true
-      return void showInfo(btnPick, 'youtube')
+      return void showRejectInfo(btnPick, 'youtube')
     }
     brand = 'youtube'
   } else if (href.includes('music.youtube.com')) {
     if (!href.includes('/watch')) {
       btnPick.disabled = true
-      return void showInfo(btnPick, 'ytmusic')
+      return void showRejectInfo(btnPick, 'ytmusic')
     }
     brand = 'ytmusic'
   } else {
@@ -164,7 +164,7 @@ function changeBtnAttr(brand) {
   btnPick.innerHTML = null
 }
 
-function showInfo(btnPick, brand) {
+function showRejectInfo(btnPick, brand) {
   btnPick.className = `btn-pick-float border-gray ${brand}-info`
   let msg = 'Something is not right...'
   switch (brand) {