chore: support safari (hmmm, i guess?) (#960)

* Add support of Safari

1. Workaround of Safari's bug of not sending cookies when using fetch in background service worker. This fixes https://github.com/hakadao/BewlyBewly/issues/275#issuecomment-1927278492. See: https://stackoverflow.com/questions/78239213/safari-extension-service-worker-not-sending-cookie
2. Add scripts to for Safari specific build and convert it to a Safari web extension.

* Fixed a bug in Safari that when the extension was installed, the page would turn into a white screen

* Safari may fire DOMContentLoaded before the codes get called

* Remove false fix; Ignore extension-safari

* Reduce memory and power usage with a nonpersistent background page on Safari and Firefox, see https://developer.apple.com/documentation/safariservices/safari_web_extensions/optimizing_your_web_extension_for_safari#3743241 and https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Background_scripts

* Build and release Safari extension with Github actions (#585)

* feat: add safari extension build

* fix: safari pathname

* fix: add build branch

* Merge

* Try building Safari extension using GitHub action

Correct versions

Debug

Minor bug fixed

Minor bug fixed

Add scripts to release

Minor bug fixed

Minor bug fixed

Minor bug fixed

---------

Co-authored-by: 梦念逍遥 <2589141604@qq.com>
Co-authored-by: Xiaolin Wang <exgphe@gmail.com>
Co-authored-by: Hakadao <a578457889743@gmail.com>

* fix: safari build (#665)

* chore: update

* chore: update knip.json to ignore "xcrun" binaries

---------

Co-authored-by: Xiaolin Wang <exgphe@gmail.com>
Co-authored-by: exgphe <14009450+exgphe@users.noreply.github.com>
Co-authored-by: 梦念逍遥 <2589141604@qq.com>

.gitignore

@@ -12,5 +12,7 @@ dist
 dist-ssr
 extension/
 extension-firefox/
+extension-safari/
 node_modules
 web-ext-profile
+extension-safari-macos/

knip.json

@@ -14,7 +14,7 @@
     "uno.css",
     "lint-staged"
   ],
-  "ignoreBinaries": ["gh"],
+  "ignoreBinaries": ["gh", "xcrun"],
   "rules": {
     "types": "off",
     "enumMembers": "off",

package.json

@@ -16,10 +16,12 @@
     "dev:bg": "tsup --watch ./src",
     "build": "cross-env NODE_ENV=production run-s clear build:web build:prepare build:js build:bg",
     "build-firefox": "cross-env NODE_ENV=production FIREFOX=true run-s clear-firefox build:web build:prepare build:js build:bg",
+    "build-safari": "cross-env NODE_ENV=production SAFARI=true run-s clear-safari build:web build:prepare build:js build:bg",
     "build:prepare": "esno scripts/prepare.ts",
     "build:web": "vite build",
     "build:js": "vite build --config vite.config.content.ts",
     "build:bg": "tsup",
+    "convert-safari": "xcrun safari-web-extension-converter ./extension-safari --project-location ./extension-safari-macos --macos-only",
     "pack": "cross-env NODE_ENV=production run-p pack:*",
     "pack:zip": "rimraf extension.zip && jszip-cli add extension/* -o ./extension.zip",
     "pack:zip-firefox": "rimraf extension-firefox.zip && jszip-cli add extension-firefox/* -o ./extension-firefox.zip",
@@ -30,6 +32,7 @@
     "start:firefox": "web-ext run --source-dir ./extension-firefox --target=firefox-desktop",
     "clear": "rimraf --glob extension extension.*",
     "clear-firefox": "rimraf --glob extension-firefox extension-firefox.*",
+    "clear-safari": "rimraf --glob extension-safari extension-safari.*",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "test": "vitest test",

scripts/manifest.ts

@@ -1,10 +1,14 @@
 import fs from 'fs-extra'
 
 import { getManifest } from '../src/manifest'
-import { isFirefox, log, r } from './utils'
+import { isFirefox, isSafari, log, r } from './utils'
 
 export async function writeManifest() {
-  await fs.writeJSON(r(isFirefox ? 'extension-firefox/manifest.json' : 'extension/manifest.json'), await getManifest(), { spaces: 2 })
+  await fs.writeJSON(r(
+    isFirefox
+      ? 'extension-firefox/manifest.json'
+      : isSafari ? 'extension-safari/manifest.json' : 'extension/manifest.json',
+  ), await getManifest(), { spaces: 2 })
   log('PRE', 'write manifest.json')
 }
 

scripts/prepare.ts

@@ -4,7 +4,7 @@ import { execSync } from 'node:child_process'
 import chokidar from 'chokidar'
 import fs from 'fs-extra'
 
-import { isDev, isFirefox, log, r } from './utils'
+import { isDev, isFirefox, isSafari, log, r } from './utils'
 
 /**
  * Stub index.html to use Vite in development
@@ -16,12 +16,20 @@ async function stubIndexHtml() {
   ]
 
   for (const view of views) {
-    await fs.ensureDir(r(isFirefox ? `extension-firefox/dist/${view}` : `extension/dist/${view}`))
+    await fs.ensureDir(r(
+      isFirefox
+        ? `extension-firefox/dist/${view}`
+        : isSafari ? `extension-safari/dist/${view}` : `extension/dist/${view}`,
+    ))
     let data = await fs.readFile(r(`src/${view}/index.html`), 'utf-8')
     data = data
       .replace('"./main.ts"', `"/${view}/main.ts.js"`)
       .replace('<div id="app"></div>', '<div id="app">Vite server did not start</div>')
-    await fs.writeFile(r(isFirefox ? `extension-firefox/dist/${view}/index.html` : `extension/dist/${view}/index.html`), data, 'utf-8')
+    await fs.writeFile(r(
+      isFirefox
+        ? `extension-firefox/dist/${view}/index.html`
+        : isSafari ? `extension-safari/dist/${view}/index.html` : `extension/dist/${view}/index.html`,
+    ), data, 'utf-8')
     log('PRE', `stub ${view}`)
   }
 }
@@ -30,8 +38,8 @@ function writeManifest() {
   execSync('npx esno ./scripts/manifest.ts', { stdio: 'inherit' })
 }
 
-fs.ensureDirSync(r(isFirefox ? 'extension-firefox' : 'extension'))
-fs.copySync(r('assets'), r(isFirefox ? 'extension-firefox/assets' : 'extension/assets'))
+fs.ensureDirSync(r(isFirefox ? 'extension-firefox' : isSafari ? 'extension-safari' : 'extension'))
+fs.copySync(r('assets'), r(isFirefox ? 'extension-firefox/assets' : isSafari ? 'extension-safari/assets' : 'extension/assets'))
 writeManifest()
 
 if (isDev) {

scripts/utils.ts

@@ -9,6 +9,7 @@ export const r = (...args: string[]) => resolve(dirname(fileURLToPath(import.met
 export const isDev = process.env.NODE_ENV !== 'production'
 export const isWin = process.platform === 'win32'
 export const isFirefox = process.env.FIREFOX === 'true'
+export const isSafari = process.env.SAFARI === 'true'
 
 export function log(name: string, message: string) {
   console.log(black(bgCyan(` ${name} `)), message)

src/contentScripts/index.ts

@@ -113,7 +113,8 @@ if (settings.value.adaptToOtherPageStyles && isHomePage()) {
   `)
 }
 
-document.addEventListener('DOMContentLoaded', async () => {
+function onDOMLoaded() {
+  // Remove the original Bilibili homepage if in Bilibili homepage & useOriginalBilibiliHomepage is enabled
   if (!settings.value.useOriginalBilibiliHomepage && isHomePage()) {
     const originalTopBar = document.querySelector<HTMLElement>('#i_cecream > .bili-feed4 > .bili-header')
     const originalTopBarInnerUselessContents = document.querySelectorAll<HTMLElement>('#i_cecream > .bili-feed4 > .bili-header > *:not(.bili-header__bar)')
@@ -138,7 +139,12 @@ document.addEventListener('DOMContentLoaded', async () => {
     // Then inject the app
     injectApp()
   }
-})
+}
+
+if (document.readyState !== 'loading')
+  onDOMLoaded()
+else
+  document.addEventListener('DOMContentLoaded', () => onDOMLoaded())
 
 function injectApp() {
   // Inject app when idle

src/manifest.ts

@@ -2,7 +2,7 @@ import fs from 'fs-extra'
 import type { Manifest } from 'webextension-polyfill'
 
 import type PkgType from '../package.json'
-import { isDev, isFirefox, port, r } from '../scripts/utils'
+import { isDev, isFirefox, isSafari, port, r } from '../scripts/utils'
 
 export async function getManifest() {
   const pkg = await fs.readJSON(r('package.json')) as typeof PkgType
@@ -23,8 +23,8 @@ export async function getManifest() {
     //   page: './dist/options/index.html',
     //   open_in_tab: true,
     // },
-    background: isFirefox
-      ? { scripts: ['./dist/background/index.js'] }
+    background: (isFirefox || isSafari)
+      ? { scripts: ['./dist/background/index.js'], persistent: false }
       : { service_worker: './dist/background/index.js' },
     icons: {
       16: './assets/icon-512.png',

src/styles/adaptedStyles/common/comments.scss

@@ -85,6 +85,10 @@
       }
     }
 
+    .bili-dyn-forward-publishing__editor {
+      background-color: var(--bew-content-solid);
+    }
+
     // Like & dislike icon
     .like-icon,
     .dislike-icon,
@@ -311,7 +315,6 @@
     .comment-bilibili-fold .comment-send .textarea-container .ipt-txt,
     .bb-comment .comment-send-lite .textarea-container .ipt-txt,
     .comment-bilibili-fold .comment-send-lite .textarea-container .ipt-txt,
-    .bili-dyn-forward-publishing__editor,
     .textarea-container textarea {
       background-color: var(--bew-fill-1);
       border-color: var(--bew-border-color);

tsup.config.ts

@@ -1,16 +1,16 @@
 import { defineConfig } from 'tsup'
 
-import { isDev, isFirefox } from './scripts/utils'
+import { isDev, isFirefox, isSafari } from './scripts/utils'
 
 export default defineConfig(() => ({
   entry: {
     'background/index': './src/background/index.ts',
     ...(isDev ? { mv3client: './scripts/client.ts' } : {}),
   },
-  outDir: isFirefox ? 'extension-firefox/dist' : 'extension/dist',
+  outDir: isFirefox ? 'extension-firefox/dist' : isSafari ? 'extension-safari/dist' : 'extension/dist',
   format: ['esm'],
   target: 'esnext',
-  ignoreWatch: ['**/extension/**', '**/extension-firefox/**'],
+  ignoreWatch: ['**/extension/**', '**/extension-firefox/**', '**/extension-safari/**'],
   splitting: false,
   sourcemap: false, // https://github.com/vitejs/vite-plugin-vue/issues/35
   define: {

vite-mv3-hmr.ts

@@ -3,9 +3,9 @@ import { dirname, join } from 'node:path'
 import fs from 'fs-extra'
 import type { HMRPayload, PluginOption } from 'vite'
 
-import { isFirefox, isWin, r } from './scripts/utils'
+import { isFirefox, isSafari, isWin, r } from './scripts/utils'
 
-const targetDir = r(isFirefox ? 'extension-firefox' : 'extension')
+const targetDir = r(isFirefox ? 'extension-firefox' : isSafari ? 'extension-safari' : 'extension')
 
 export function MV3Hmr(): PluginOption {
   return {

vite.config.content.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 
 import packageJson from './package.json'
-import { isDev, isFirefox, r } from './scripts/utils'
+import { isDev, isFirefox, isSafari, r } from './scripts/utils'
 import { sharedConfig } from './vite.config'
 
 // bundling the content script using Vite
@@ -11,7 +11,7 @@ export default defineConfig({
     watch: isDev
       ? { include: ['./**/*'] }
       : undefined,
-    outDir: r(isFirefox ? 'extension-firefox/dist/contentScripts' : 'extension/dist/contentScripts'),
+    outDir: r(isFirefox ? 'extension-firefox/dist/contentScripts' : isSafari ? 'extension-safari/dist/contentScripts' : 'extension/dist/contentScripts'),
     cssCodeSplit: false,
     emptyOutDir: false,
     sourcemap: false, // https://github.com/vitejs/vite-plugin-vue/issues/35

vite.config.ts

@@ -10,7 +10,7 @@ import AutoImport from 'unplugin-auto-import/vite'
 import type { UserConfig } from 'vite'
 import { defineConfig } from 'vite'
 
-import { isDev, isFirefox, port, r } from './scripts/utils'
+import { isDev, isFirefox, isSafari, port, r } from './scripts/utils'
 import { MV3Hmr } from './vite-mv3-hmr'
 
 export const sharedConfig: UserConfig = {
@@ -84,7 +84,7 @@ export default defineConfig(({ command }) => ({
     },
   },
   build: {
-    outDir: r(isFirefox ? 'extension-firefox/dist' : 'extension/dist'),
+    outDir: r(isFirefox ? 'extension-firefox/dist' : isSafari ? 'extension-safari/dist' : 'extension/dist'),
     emptyOutDir: false,
     sourcemap: false, // https://github.com/vitejs/vite-plugin-vue/issues/35
     // https://developer.chrome.com/docs/webstore/program_policies/#:~:text=Code%20Readability%20Requirements