feat: custom css

Author: sylingd

locale/original/messages.json

@@ -455,5 +455,17 @@
   "whenAutoSelected": {
     "message": "When \"Auto Fetch\" is selected, icons will be retrieved from this source",
     "description": "Description for icon provider setting"
+  },
+  "advanced": {
+    "message": "Advanced",
+    "description": "Advanced settings"
+  },
+  "customCSS": {
+    "message": "Custom CSS",
+    "description": "Custom CSS"
+  },
+  "edit": {
+    "message": "Edit",
+    "description": "Edit"
   }
-}
+}

src/new-tab/index.tsx

@@ -24,7 +24,7 @@ if (rootEl) {
   const root = ReactDOM.createRoot(rootEl);
   root.render(
     <React.StrictMode>
-      <Page />,
+      <Page />
     </React.StrictMode>,
   );
 }

src/new-tab/init.ts

@@ -98,6 +98,15 @@ function handleBackgroundImage() {
   });
 }
 
+function handleCustomCSS() {
+  const styleEl = document.createElement('style');
+  styleEl.id = 'custom-css';
+  document.head.appendChild(styleEl);
+  prefs.getAndWatch('customCSS', css => {
+    styleEl.innerHTML = css;
+  });
+}
+
 function handleOther() {
   prefs.getAndWatch('theme', theme =>
     document.body.setAttribute('data-theme', theme),
@@ -107,4 +116,5 @@ function handleOther() {
 handleStyleVar();
 handleDarkMode();
 handleBackgroundImage();
+handleCustomCSS();
 handleOther();

src/new-tab/setting/content/advanced/index.tsx

@@ -0,0 +1,51 @@
+import { Button, List, TextArea, Typography } from '@douyinfe/semi-ui';
+import { withErrorBoundary } from '@/components/error-boundary';
+import Modal from '@/components/modal';
+import usePref from '@/hooks/use-pref';
+import { t } from '@/share/locale';
+
+const CustomCSS = withErrorBoundary(() => {
+  const [css, setCSS] = usePref('customCSS');
+
+  return (
+    <Button
+      onClick={() => {
+        let input = css;
+        Modal.info({
+          title: t('customCSS'),
+          icon: null,
+          content: (
+            <TextArea
+              defaultValue={input}
+              onChange={v => (input = v)}
+              rows={15}
+            />
+          ),
+          okText: t('save'),
+          onOk: () => setCSS(input),
+        });
+      }}
+    >
+      {t('edit')}
+    </Button>
+  );
+});
+
+export const Advanced = withErrorBoundary(() => {
+  return (
+    <div className="advanced-setting">
+      <List className="setting-list">
+        <List.Item
+          main={
+            <div className="list-item">
+              <Typography.Text className="title">
+                {t('customCSS')}
+              </Typography.Text>
+            </div>
+          }
+          extra={<CustomCSS />}
+        />
+      </List>
+    </div>
+  );
+});

src/new-tab/setting/content/index.tsx

@@ -9,6 +9,7 @@ import { SitesManager } from './site-manager';
 
 import '@douyinfe/semi-ui/lib/es/_base/base.css';
 import './index.less';
+import { Advanced } from './advanced';
 
 interface SettingSideSheetProps {
   visible: boolean;
@@ -41,6 +42,9 @@ const SettingContent: React.FC<SettingSideSheetProps> = ({
         <TabPane itemKey="general-settings" tab={t('generalSettings')}>
           <GeneralSettings />
         </TabPane>
+        <TabPane itemKey="advanced-settings" tab={t('advanced')}>
+          <Advanced />
+        </TabPane>
       </Tabs>
     </SideSheet>
   </SemiLocale>

src/new-tab/setting/index.tsx

@@ -1,4 +1,3 @@
-import type React from 'react';
 import { lazy, Suspense, useEffect, useState } from 'react';
 import { withErrorBoundary } from '@/components/error-boundary';
 import { SiteItemAlias } from '@/share/type-alias';
@@ -26,6 +25,8 @@ const Setting = withErrorBoundary(() => {
         },
       );
     }
+    // add alternative functions
+    (window as any).openSetting = () => setVisible(true);
   }, []);
 
   useEffect(() => {

src/share/constant/index.ts

@@ -42,6 +42,7 @@ export const defaultPrefValue: PrefValue = {
     type: 'builtin',
     key: 'bing',
   },
+  customCSS: '',
   searches: defaultSearchEngines,
   sites: [],
 };

src/share/types.ts

@@ -29,6 +29,7 @@ export interface PrefValue {
     key?: string;
     value?: BackgroundItem;
   };
+  customCSS: string;
   sites: Array<SiteItem>;
   searches: Array<SearchItem>;
 }