Notifications for YouTube

[seomikewaltman]

I refactored the Notifications for YouTube extension into Manifest 3 using the https://github.com/antfu/vitesse-webext/tree/refactor/mv3 branch.

Works great!

https://chrome.google.com/webstore/detail/notifications-for-youtube/hckfdngdbkdhnbhehfefkcelfeofdjdo?hl=en

Made a few mods to add _locales

// scripts/prepare.ts
...
fs.copySync(r('src/_locales'), r('extension/_locales'))
...

I needed multiple content scripts so I just created a separate vite.config.page2.ts for each extra script. and added a command to package.json

"scripts" : {
...
"dev:page2js": "npm run build:page2js -- --mode development",
"build": "cross-env NODE_ENV=production run-s clear build:web build:prepare build:js build:page2js build:bg",
"build:page2js": "vite build --config vite.config.page2.ts",
...
}

I also created an extension page that could be accessed for onboarding and showing a version update screen. This was outside of the normal popup and options html windows.

To do this I copied src/popup and made src/pages

Added an entry on scripts/prepare.ts so it would copy the directory and watch for changes

const views = [
        'options',
        'popup',
        'pages'
    ]

then updated the vite.config.ts with a new input entry

rollupOptions: {
      input: {
        options: r('src/options/index.html'),
        popup: r('src/popup/index.html'),
        pages: r('src/pages/index.html'),
      },
    },

I extended the Manifest interface since I needed externally_connectable and key like so on src/manifest.ts

interface WebExtensionExternal extends Manifest.WebExtensionManifest {
    externally_connectable: {
        matches: string[]
    }
    key?: string
}

Took less than 24 hours to get approved in the Chrome Store after the refactor from Manifest 2 👍🏼