feat: upgrade to Manifest V3 in Chrome

BREAKING CHANGE: browser versions older than Chrome 123, Edge 123,
Firefox 115 and Opera 109 are no longer supported

Author: dessant

.browserslistrc

@@ -1,11 +1,10 @@
 [chrome]
-Chrome >= 92
-Edge >= 92
-Opera >= 78
+Chrome >= 123
+Edge >= 123
+Opera >= 109
 
 [edge]
-Edge >= 92
+Edge >= 123
 
 [firefox]
-Firefox >= 91
-FirefoxAndroid >= 91
+Firefox >= 115

.github/workflows/ci.yml

@@ -10,11 +10,11 @@ jobs:
       contents: read
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: 'false'
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'
@@ -29,7 +29,7 @@ jobs:
         run: sha256sum artifacts/*/*
         if: startsWith(github.ref, 'refs/tags/v')
       - name: Upload artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: startsWith(github.ref, 'refs/tags/v')
         with:
           name: artifacts
@@ -44,14 +44,14 @@ jobs:
       contents: write
     steps:
       - name: Download artifacts
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: artifacts
           path: artifacts/
       - name: Hash artifacts
         run: sha256sum artifacts/*/*
       - name: Create GitHub release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         with:
           tag_name: ${{ github.ref_name }}
           name: ${{ github.ref_name }}

.github/workflows/label-actions.yml

@@ -12,4 +12,4 @@ jobs:
   action:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/label-actions@v3
+      - uses: dessant/label-actions@v4

.github/workflows/lockdown.yml

@@ -11,7 +11,7 @@ jobs:
   action:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/repo-lockdown@v3
+      - uses: dessant/repo-lockdown@v4
         with:
           pr-comment: 'This project does not accept pull requests. Please use issues to report bugs or suggest new features.'
           process-only: 'prs'

.gitignore

@@ -1,4 +1,5 @@
 /.assets/
+/app/
 /artifacts/
 /dist/
 

.nvmrc

@@ -1 +1 @@
-18.16.0
+20.12.2

README.md

@@ -41,7 +41,7 @@ your autoplay settings between sessions.
 
 ## License
 
-Copyright (c) 2018-2023 Armin Sebastian
+Copyright (c) 2018-2024 Armin Sebastian
 
 This software is released under the terms of the GNU General Public License v3.0.
 See the [LICENSE](LICENSE) file for further information.

babel.config.js

@@ -1,11 +1,12 @@
 const path = require('node:path');
 
-const corejsVersion = require(path.join(
-  path.dirname(require.resolve('core-js')),
-  'package.json'
-)).version;
+const corejsVersion = require(
+  path.join(path.dirname(require.resolve('core-js')), 'package.json')
+).version;
 
 module.exports = function (api) {
+  api.cache(true);
+
   const presets = [
     [
       '@babel/env',
@@ -24,11 +25,7 @@ module.exports = function (api) {
     new RegExp(`node_modules\\${path.sep}(?!(vueton|wesa)\\${path.sep}).*`)
   ];
 
-  const parserOpts = {plugins: ['importAssertions']};
-
-  if (api.env('production')) {
-    plugins.push('lodash');
-  }
+  const parserOpts = {plugins: ['importAttributes']};
 
   return {presets, plugins, ignore, parserOpts};
 };

gulpfile.js

@@ -22,6 +22,9 @@ const targetEnv = process.env.TARGET_ENV || 'chrome';
 const isProduction = process.env.NODE_ENV === 'production';
 const enableContributions =
   (process.env.ENABLE_CONTRIBUTIONS || 'true') === 'true';
+
+const mv3 = ['chrome'].includes(targetEnv);
+
 const distDir = path.join(__dirname, 'dist', targetEnv);
 
 function initEnv() {
@@ -45,12 +48,17 @@ function js(done) {
 }
 
 function html() {
-  return src(
-    enableContributions
-      ? 'src/**/*.html'
-      : ['src/**/*.html', '!src/contribute/*.html'],
-    {base: '.'}
-  )
+  const htmlSrc = ['src/**/*.html'];
+
+  if (mv3) {
+    htmlSrc.push('!src/background/*.html');
+  }
+
+  if (!enableContributions) {
+    htmlSrc.push('!src/contribute/*.html');
+  }
+
+  return src(htmlSrc, {base: '.'})
     .pipe(gulpif(isProduction, htmlmin({collapseWhitespace: true})))
     .pipe(dest(distDir));
 }
@@ -70,7 +78,10 @@ async function images(done) {
   // Chrome Web Store does not correctly display optimized icons
   if (isProduction && targetEnv !== 'chrome') {
     await new Promise(resolve => {
-      src(path.join(distDir, 'src/assets/icons/app/*.png'), {base: '.'})
+      src(path.join(distDir, 'src/assets/icons/app/*.png'), {
+        base: '.',
+        encoding: false
+      })
         .pipe(imagemin())
         .pipe(dest('.'))
         .on('error', done)
@@ -79,7 +90,10 @@ async function images(done) {
   }
 
   await new Promise(resolve => {
-    src('src/assets/icons/@(app|misc)/*.@(png|svg)', {base: '.'})
+    src('src/assets/icons/@(app|misc)/*.@(png|svg)', {
+      base: '.',
+      encoding: false
+    })
       .pipe(gulpif(isProduction, imagemin()))
       .pipe(dest(distDir))
       .on('error', done)
@@ -88,7 +102,10 @@ async function images(done) {
 
   if (enableContributions) {
     await new Promise(resolve => {
-      src('node_modules/vueton/components/contribute/assets/*.@(png|svg)')
+      src(
+        'node_modules/vueton/components/contribute/assets/*.@(png|webp|svg)',
+        {encoding: false}
+      )
         .pipe(gulpif(isProduction, imagemin()))
         .pipe(dest(path.join(distDir, 'src/contribute/assets')))
         .on('error', done)
@@ -108,7 +125,8 @@ async function fonts(done) {
 
   await new Promise(resolve => {
     src(
-      'node_modules/@fontsource/roboto/files/roboto-latin-@(400|500|700)-normal.woff2'
+      'node_modules/@fontsource/roboto/files/roboto-latin-@(400|500|700)-normal.woff2',
+      {encoding: false}
     )
       .pipe(dest(path.join(distDir, 'src/assets/fonts/files')))
       .on('error', done)
@@ -169,22 +187,28 @@ function manifest() {
     .pipe(dest(distDir));
 }
 
-function license() {
+function license(done) {
   let year = '2018';
   const currentYear = new Date().getFullYear().toString();
   if (year !== currentYear) {
     year = `${year}-${currentYear}`;
   }
 
-  const notice = `Autoplay Settings for YouTube
+  let notice = `Autoplay Settings for YouTube
 Copyright (c) ${year} Armin Sebastian
+`;
 
+  if (['safari', 'samsung'].includes(targetEnv)) {
+    writeFileSync(path.join(distDir, 'NOTICE'), notice);
+    done();
+  } else {
+    notice = `${notice}
 This software is released under the terms of the GNU General Public License v3.0.
 See the LICENSE file for further information.
 `;
-
-  writeFileSync(path.join(distDir, 'NOTICE'), notice);
-  return src('LICENSE').pipe(dest(distDir));
+    writeFileSync(path.join(distDir, 'NOTICE'), notice);
+    return src('LICENSE').pipe(dest(distDir));
+  }
 }
 
 function zip(done) {