Upgrade roboto. Extension loads fonts from files instead of data URL.

- Work around Firefox not loading font data URL sometimes due to respecting CSP. Instead we take advantage of the modified CSP that allows fetching extension resources (rather than modifying the CSP any further).
killergerbah · Apr 22, 2024 · 0f4e056 · 0f4e056
1 parent 4cc3aeb
commit 0f4e056
Show file tree

Hide file tree

Showing 33 changed files with 164 additions and 68 deletions.
diff --git a/client/package.json b/client/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "dependencies": {
         "@craco/craco": "^6.4.3",
-        "@fontsource/roboto": "^4.5.0",
+        "@fontsource/roboto": "^5.0.13",
         "@material-ui/core": "^4.11.3",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.57",

diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -1,4 +1,7 @@
-import '@fontsource/roboto';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
 import { createRoot } from 'react-dom/client';
 import reportWebVitals from './reportWebVitals';
 import { HttpFetcher } from '@project/common';

diff --git a/extension/package.json b/extension/package.json
@@ -10,7 +10,6 @@
         "packageProdFirefox": "yarn buildProd --env firefox && ../scripts/package firefox"
     },
     "dependencies": {
-        "@fontsource/roboto": "^4.5.0",
         "@material-ui/core": "^4.11.3",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.57",

diff --git a/extension/src/assets/Roboto-Bold.woff2 b/extension/src/assets/Roboto-Bold.woff2
diff --git a/extension/src/assets/Roboto-BoldItalic.woff2 b/extension/src/assets/Roboto-BoldItalic.woff2
diff --git a/extension/src/assets/Roboto-Italic.woff2 b/extension/src/assets/Roboto-Italic.woff2
diff --git a/extension/src/assets/Roboto-Light.woff2 b/extension/src/assets/Roboto-Light.woff2
diff --git a/extension/src/assets/Roboto-LightItalic.woff2 b/extension/src/assets/Roboto-LightItalic.woff2
diff --git a/extension/src/assets/Roboto-Medium.woff2 b/extension/src/assets/Roboto-Medium.woff2
diff --git a/extension/src/assets/Roboto-MediumItalic.woff2 b/extension/src/assets/Roboto-MediumItalic.woff2
diff --git a/extension/src/assets/Roboto-Regular.woff2 b/extension/src/assets/Roboto-Regular.woff2
diff --git a/extension/src/assets/fonts.css b/extension/src/assets/fonts.css
@@ -0,0 +1,63 @@
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/assets/Roboto-LightItalic.woff2) format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/assets/Roboto-Italic.woff2) format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/assets/Roboto-MediumItalic.woff2) format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/assets/Roboto-BoldItalic.woff2) format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(/assets/Roboto-Light.woff2) format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(/assets/Roboto-Regular.woff2) format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url(/assets/Roboto-Medium.woff2) format('woff2');
+}
+
+@font-face {
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(/assets/Roboto-Bold.woff2) format('woff2');
+}
diff --git a/extension/src/controllers/anki-ui-controller.ts b/extension/src/controllers/anki-ui-controller.ts
@@ -21,19 +21,24 @@ import { fetchLocalization } from '../services/localization-fetcher';
 async function html(language: string) {
     const mp3WorkerSource = await (await fetch(chrome.runtime.getURL('./mp3-encoder-worker.js'))).text();
     return `<!DOCTYPE html>
-              <html lang="en">
-              <head>
-                  <meta charset="utf-8" />
-                  <meta name="viewport" content="width=device-width, initial-scale=1" />
-                  <title>asbplayer - Anki</title>
-              </head>
-              <body>
-              <div id="root" style="width:100%;height:100vh;"></div>
-              <script type="application/json" id="loc">${JSON.stringify(await fetchLocalization(language))}</script>
-              <script id="mp3-encoder-worker" type="javascript/worker">${mp3WorkerSource}</script>
-              <script src="${chrome.runtime.getURL('./anki-ui.js')}"></script>
-              </body>
-              </html>`;
+                <html lang="en">
+                <head>
+                    <meta charset="utf-8" />
+                    <meta name="viewport" content="width=device-width, initial-scale=1" />
+                    <title>asbplayer - Anki</title>
+                    <style>
+                        @import url(${chrome.runtime.getURL('./assets/fonts.css')});
+                    </style>
+                </head>
+                <body>
+                    <div id="root" style="width:100%;height:100vh;"></div>
+                    <script type="application/json" id="loc">${JSON.stringify(
+                        await fetchLocalization(language)
+                    )}</script>
+                    <script id="mp3-encoder-worker" type="javascript/worker">${mp3WorkerSource}</script>
+                    <script src="${chrome.runtime.getURL('./anki-ui.js')}"></script>
+                </body>
+            </html>`;
 }
 
 export default class AnkiUiController {

diff --git a/extension/src/controllers/notification-controller.ts b/extension/src/controllers/notification-controller.ts
@@ -20,11 +20,16 @@ export default class NotificationController {
                         <meta charset="utf-8" />
                         <meta name="viewport" content="width=device-width, initial-scale=1" />
                         <title>asbplayer</title>
+                        <style>
+                        @import url(${chrome.runtime.getURL('./assets/fonts.css')});
+                        </style>
                     </head>
                     <body>
-                    <div id="root" style="width:100%;height:100vh;"></div>
-                    <script type="application/json" id="loc">${JSON.stringify(await fetchLocalization(lang))}</script>
-                    <script src="${chrome.runtime.getURL('./notification-ui.js')}"></script>
+                        <div id="root" style="width:100%;height:100vh;"></div>
+                        <script type="application/json" id="loc">${JSON.stringify(
+                            await fetchLocalization(lang)
+                        )}</script>
+                        <script src="${chrome.runtime.getURL('./notification-ui.js')}"></script>
                     </body>
                 </html>`
         );

diff --git a/extension/src/controllers/tab-anki-ui-controller.ts b/extension/src/controllers/tab-anki-ui-controller.ts
@@ -15,19 +15,24 @@ import { fetchLocalization } from '../services/localization-fetcher';
 async function html(language: string) {
     const mp3WorkerSource = await (await fetch(chrome.runtime.getURL('./mp3-encoder-worker.js'))).text();
     return `<!DOCTYPE html>
-              <html lang="en">
-              <head>
-                  <meta charset="utf-8" />
-                  <meta name="viewport" content="width=device-width, initial-scale=1" />
-                  <title>asbplayer - Anki</title>
-              </head>
-              <body>
-              <div id="root" style="width:100%;height:100vh;"></div>
-              <script type="application/json" id="loc">${JSON.stringify(await fetchLocalization(language))}</script>
-              <script id="mp3-encoder-worker" type="javascript/worker">${mp3WorkerSource}</script>
-              <script src="${chrome.runtime.getURL('./anki-ui.js')}"></script>
-              </body>
-              </html>`;
+                <html lang="en">
+                <head>
+                    <meta charset="utf-8" />
+                    <meta name="viewport" content="width=device-width, initial-scale=1" />
+                    <title>asbplayer - Anki</title>
+                    <style>
+                        @import url(${chrome.runtime.getURL('./assets/fonts.css')});
+                    </style>
+                </head>
+                <body>
+                    <div id="root" style="width:100%;height:100vh;"></div>
+                    <script type="application/json" id="loc">${JSON.stringify(
+                        await fetchLocalization(language)
+                    )}</script>
+                    <script id="mp3-encoder-worker" type="javascript/worker">${mp3WorkerSource}</script>
+                    <script src="${chrome.runtime.getURL('./anki-ui.js')}"></script>
+                </body>
+            </html>`;
 }
 
 export class TabAnkiUiController {

diff --git a/extension/src/controllers/video-data-sync-controller.ts b/extension/src/controllers/video-data-sync-controller.ts
@@ -21,18 +21,21 @@ import i18n from 'i18next';
 
 async function html(lang: string) {
     return `<!DOCTYPE html>
-              <html lang="en">
-              <head>
-                  <meta charset="utf-8" />
-                  <meta name="viewport" content="width=device-width, initial-scale=1" />
-                  <title>asbplayer - Video Data Sync</title>
-              </head>
-              <body>
-              <div id="root" style="width:100%;height:100vh;"></div>
-              <script type="application/json" id="loc">${JSON.stringify(await fetchLocalization(lang))}</script>
-              <script src="${chrome.runtime.getURL('./video-data-sync-ui.js')}"></script>
-              </body>
-              </html>`;
+            <html lang="en">
+            <head>
+                <meta charset="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <title>asbplayer - Video Data Sync</title>
+                <style>
+                    @import url(${chrome.runtime.getURL('./assets/fonts.css')});
+                </style>
+            </head>
+            <body>
+                <div id="root" style="width:100%;height:100vh;"></div>
+                <script type="application/json" id="loc">${JSON.stringify(await fetchLocalization(lang))}</script>
+                <script src="${chrome.runtime.getURL('./video-data-sync-ui.js')}"></script>
+            </body>
+            </html>`;
 }
 
 interface ShowOptions {

diff --git a/extension/src/controllers/video-select-controller.ts b/extension/src/controllers/video-select-controller.ts
@@ -26,11 +26,14 @@ export default class VideoSelectController {
                     <meta charset="utf-8" />
                     <meta name="viewport" content="width=device-width, initial-scale=1" />
                     <title>asbplayer - Video Select</title>
+                    <style>
+                        @import url(${chrome.runtime.getURL('./assets/fonts.css')});
+                    </style>
                 </head>
                 <body>
-                <div id="root" style="width:100%;height:100vh;"></div>
-                <script type="application/json" id="loc">${JSON.stringify(await fetchLocalization(lang))}</script>
-                <script src="${chrome.runtime.getURL('./video-select-ui.js')}"></script>
+                    <div id="root" style="width:100%;height:100vh;"></div>
+                    <script type="application/json" id="loc">${JSON.stringify(await fetchLocalization(lang))}</script>
+                    <script src="${chrome.runtime.getURL('./video-select-ui.js')}"></script>
                 </body>
             </html>`
         );

diff --git a/extension/src/ftue-ui.html b/extension/src/ftue-ui.html
@@ -4,6 +4,9 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>asbplayer - Welcome</title>
+        <style>
+            @import url('assets/fonts.css');
+        </style>
     </head>
     <body style="background: rgba(0, 0, 0, 0)">
         <div id="root"></div>

diff --git a/extension/src/manifest.json b/extension/src/manifest.json
@@ -88,6 +88,15 @@
         {
             "resources": [
                 "assets/image.png",
+                "assets/fonts.css",
+                "assets/Roboto-Bold.woff2",
+                "assets/Roboto-Light.woff2",
+                "assets/Roboto-Medium.woff2",
+                "assets/Roboto-Regular.woff2",
+                "assets/Roboto-BoldItalic.woff2",
+                "assets/Roboto-LightItalic.woff2",
+                "assets/Roboto-MediumItalic.woff2",
+                "assets/Roboto-Italic.woff2",
                 "pages/netflix-page.js",
                 "pages/youtube-page.js",
                 "pages/tver-page.js",

diff --git a/extension/src/mobile-video-overlay-ui.html b/extension/src/mobile-video-overlay-ui.html
@@ -4,6 +4,9 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>asbplayer - Mobile Video Overlay</title>
+        <style>
+            @import url('assets/fonts.css');
+        </style>
     </head>
     <body style="height: 100%">
         <div id="root" style="position: absolute; left: 50%; transform: translate(-50%)"></div>

diff --git a/extension/src/popup-ui.html b/extension/src/popup-ui.html
@@ -4,9 +4,12 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>asbplayer - Popup</title>
+        <style>
+            @import url('assets/fonts.css');
+        </style>
     </head>
-    <body style="background: rgba(0,0,0,0)">
+    <body style="background: rgba(0, 0, 0, 0)">
         <div id="root"></div>
         <script src="popup-ui.js"></script>
     </body>
-</html>
+</html>
diff --git a/extension/src/settings-ui.html b/extension/src/settings-ui.html
@@ -4,6 +4,9 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>asbplayer - Settings</title>
+        <style>
+            @import url('assets/fonts.css');
+        </style>
     </head>
     <body>
         <div id="root"></div>

diff --git a/extension/src/side-panel.html b/extension/src/side-panel.html
@@ -4,6 +4,9 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>asbplayer</title>
+        <style>
+            @import url('assets/fonts.css');
+        </style>
     </head>
     <body style="width: 100%; height: 100%">
         <div id="root" style="width: 100%; height: 100%"></div>

diff --git a/extension/src/ui/anki/index.tsx b/extension/src/ui/anki/index.tsx
@@ -1,4 +1,3 @@
-import '@fontsource/roboto';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import Bridge from '../bridge';

diff --git a/extension/src/ui/ftue/index.tsx b/extension/src/ui/ftue/index.tsx
@@ -1,4 +1,3 @@
-import '@fontsource/roboto';
 import { createRoot } from 'react-dom/client';
 import FtueUi from '../components/FtueUi';
 

diff --git a/extension/src/ui/mobile-video-overlay/index.tsx b/extension/src/ui/mobile-video-overlay/index.tsx
@@ -1,4 +1,3 @@
-import '@fontsource/roboto';
 import { createRoot } from 'react-dom/client';
 import MobileVideoOverlay from '../components/MobileVideoOverlay';
 

diff --git a/extension/src/ui/notification/index.tsx b/extension/src/ui/notification/index.tsx
@@ -1,4 +1,3 @@
-import '@fontsource/roboto';
 import { createRoot } from 'react-dom/client';
 import Bridge from '../bridge';
 import { i18nInit } from '../i18n';

diff --git a/extension/src/ui/popup/index.tsx b/extension/src/ui/popup/index.tsx
@@ -1,5 +1,3 @@
-import '@fontsource/roboto';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { PopupUi } from '../components/PopupUi';
 import { AsbplayerSettings } from '@project/common/settings';

diff --git a/extension/src/ui/side-panel/index.tsx b/extension/src/ui/side-panel/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-import '@fontsource/roboto';
 import { createRoot } from 'react-dom/client';
 import SidePanelUi from '../components/SidePanelUi';
 

diff --git a/extension/src/ui/update/index.tsx b/extension/src/ui/update/index.tsx
@@ -1,4 +1,3 @@
-import '@fontsource/roboto';
 import { createRoot } from 'react-dom/client';
 import UpdateUi from '../components/UpdateUi';
 

diff --git a/extension/src/ui/video-data-sync/index.tsx b/extension/src/ui/video-data-sync/index.tsx
@@ -1,5 +1,3 @@
-import '@fontsource/roboto';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import Bridge from '../bridge';
 import VideoDataSyncUi from '../components/VideoDataSyncUi';

diff --git a/extension/src/ui/video-select/index.tsx b/extension/src/ui/video-select/index.tsx
@@ -1,5 +1,3 @@
-import '@fontsource/roboto';
-import React from 'react';
 import { createRoot } from 'react-dom/client';
 import Bridge from '../bridge';
 import VideoSelectUi from '../components/VideoSelectUi';

diff --git a/yarn.lock b/yarn.lock
@@ -2965,10 +2965,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fontsource/roboto@npm:^4.5.0":
-  version: 4.5.5
-  resolution: "@fontsource/roboto@npm:4.5.5"
-  checksum: ab6675e04392ccd5def878762be67dbbf64f77c49c26030c6a1d03c34ce33045b0eb1199ad1bd3f398f362e5fa1fcbcbe25c18af8dda855ab43df45561eea569
+"@fontsource/roboto@npm:^5.0.13":
+  version: 5.0.13
+  resolution: "@fontsource/roboto@npm:5.0.13"
+  checksum: a3ce1e090ec27ae3962c8c6fa5d53f622cee366ccd57514067e9bd612d79d7eb8440b396236e9e76bd2ea89b18cb08ab6d15dcc5cc198ccc8b92f7df0651a784
   languageName: node
   linkType: hard
 
@@ -3803,7 +3803,7 @@ __metadata:
   resolution: "@project/client@workspace:client"
   dependencies:
     "@craco/craco": ^6.4.3
-    "@fontsource/roboto": ^4.5.0
+    "@fontsource/roboto": ^5.0.13
     "@material-ui/core": ^4.11.3
     "@material-ui/icons": ^4.11.2
     "@material-ui/lab": ^4.0.0-alpha.57
@@ -3863,7 +3863,6 @@ __metadata:
     "@babel/core": 7.14.5
     "@babel/preset-env": ^7.14.5
     "@babel/preset-react": ^7.14.5
-    "@fontsource/roboto": ^4.5.0
     "@material-ui/core": ^4.11.3
     "@material-ui/icons": ^4.11.2
     "@material-ui/lab": ^4.0.0-alpha.57