feat: pake can use external scripts

2023-06-08 16:48:19 +08:00
parent 8ce401735f
commit 9acca818fd
11 changed files with 99 additions and 21 deletions
--- a/bin/builders/common.ts
+++ b/bin/builders/common.ts
@@ -7,6 +7,7 @@ import {TauriConfig} from 'tauri/src/types';

 import { npmDirectory } from '@/utils/dir.js';
 import logger from '@/options/logger.js';
+import combineFiles from '@/helpers/combine.js';

 type DangerousRemoteDomainIpAccess = {
  domain: string;
@@ -64,6 +65,7 @@ export async function mergeTauriConfig(
    iterCopyFile,
    identifier,
    name,
+    inject,
  } = options;

  const tauriConfWindowOptions = {
@@ -298,6 +300,27 @@ export async function mergeTauriConfig(
  // 设置安全调用 window.__TAURI__ 的安全域名为设置的应用域名
  setSecurityConfigWithUrl(tauriConf, url);

+  // 内部注入文件
+  const internalInjectScripts = [
+    path.join(npmDirectory, 'bin/inject/component.js'),
+    path.join(npmDirectory, 'bin/inject/event.js'),
+    path.join(npmDirectory, 'bin/inject/style.js'),
+  ];
+
+  let injectFiles = [...internalInjectScripts];
+  // 注入外部 js css
+  if (inject?.length > 0) {
+    if (!inject.every(item => item.endsWith('.css') || item.endsWith('.js'))) {
+      logger.error("The injected file must be in either CSS or JS format.");
+      return;
+    }
+    const files = inject.map(relativePath => path.join(process.cwd(), relativePath));
+    injectFiles = injectFiles.concat(...files);
+    tauriConf.pake.inject = files;
+  }
+  combineFiles(injectFiles);
+
+
  // 保存配置文件
  let configPath = "";
  switch (process.platform) {
--- a/bin/cli.ts
+++ b/bin/cli.ts
@@ -41,6 +41,7 @@ program
    DEFAULT_PAKE_OPTIONS.targets
  )
  .option('--debug', 'debug', DEFAULT_PAKE_OPTIONS.transparent)
+  .option('--inject [injects...]', 'inject .js or .css for this app', DEFAULT_PAKE_OPTIONS.inject)
  .action(async (url: string, options: PakeCliOptions) => {
    checkUpdateTips();

--- a/bin/defaults.ts
+++ b/bin/defaults.ts
@@ -15,6 +15,7 @@ export const DEFAULT_PAKE_OPTIONS: PakeCliOptions = {
  iterCopyFile: false,
  systemTrayIcon: '',
  debug: false,
+  inject: [],
 };

 export const DEFAULT_APP_NAME = 'Pake';
--- a/bin/helpers/combine.ts
+++ b/bin/helpers/combine.ts
@@ -0,0 +1,17 @@
+import path from 'path';
+import fs from 'fs';
+import { npmDirectory } from '@/utils/dir.js';
+
+export default async function combineFiles(files: string[]) {
+  const output = path.join(npmDirectory, `src-tauri/src/inject/_INJECT_.js`);
+
+  const contents = files.map(file => {
+    const fileContent = fs.readFileSync(file);
+    if (file.endsWith('.css')) {
+      return "window.addEventListener('DOMContentLoaded', (_event) => { const css = `" + fileContent + "`; const style = document.createElement('style'); style.innerHTML = css; document.head.appendChild(style); });";
+    }
+    return fileContent;
+  });
+  fs.writeFileSync(output, contents.join('\n'));
+  return files;
+}
--- a/bin/inject/component.js
+++ b/bin/inject/component.js
@@ -0,0 +1,149 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Create a modal
+  const modalHtml = `
+  <div id="pakeUrlModal" class="pake-modal">
+    <div class="pake-modal-container">
+      <div class="pake-modal-content">
+        <label for="pakeUrlInput">Enter URL to navigate anywhere</label>
+        <input type="text" id="pakeUrlInput" />
+        <button id="pakeUrlSubmit">Submit</button>
+        <button id="pakeUrlClose">Close</button>
+      </div>
+    </div>
+  </div>
+  `;
+
+  const modalStyle = `
+  .pake-modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+
+  .pake-modal-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .pake-modal-content {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    width: 80%;
+    max-width: 400px;
+    font-size:14px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+  }
+
+  .pake-modal-content label {
+    display: block;
+    color: #11182B;
+    margin-bottom: 12px;
+    font-weight: bold;
+  }
+
+  .pake-modal-content input[type="text"] {
+    width: 90%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+    margin-bottom: 12px;
+    outline: none;
+  }
+
+  .pake-modal-content button {
+    background: #11182B;
+    color: #FFF;
+    padding: 6px 14px;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 4px;
+    font-size:14px;
+    border: 1px solid #11182B;
+  }
+
+  #pakeUrlClose{
+    background: #fff;
+    color: #11182B;
+  }
+
+  #pakeUrlInput {
+    min-width: 320px;
+    text-align: left;
+    min-height: 30px;
+  }
+  `;
+
+  const modalDiv = document.createElement('div');
+  modalDiv.innerHTML = modalHtml;
+  document.body.appendChild(modalDiv);
+
+  const modalStyleElement = document.createElement('style');
+  modalStyleElement.innerText = modalStyle;
+  document.head.appendChild(modalStyleElement);
+
+  const urlModal = document.getElementById('pakeUrlModal');
+  const urlInput = document.getElementById('pakeUrlInput');
+  const urlSubmit = document.getElementById('pakeUrlSubmit');
+  const urlClose = document.getElementById('pakeUrlClose');
+
+  urlSubmit.onclick = function () {
+    const url = urlInput.value;
+    if (url) {
+      window.location.href = url;
+    }
+  };
+
+  urlClose.onclick = function () {
+    urlModal.style.display = 'none';
+  };
+
+  urlInput.addEventListener('keydown', function (event) {
+    if (event.key === 'Enter') {
+      const url = urlInput.value;
+      if (url) {
+        window.location.href = url;
+      }
+    }
+  });
+
+  document.addEventListener('keydown', function (event) {
+    if (event.key === 'Escape' && urlModal.style.display === 'block') {
+      urlModal.style.display = 'none';
+    }
+  });
+
+  window.showUrlModal = function () {
+    urlModal.style.display = 'block';
+    urlInput.focus();
+  };
+
+  // Toast
+  function pakeToast(msg) {
+    const m = document.createElement('div');
+    m.innerHTML = msg;
+    m.style.cssText =
+      'max-width:60%;min-width: 80px;padding:0 12px;height: 32px;color: rgb(255, 255, 255);line-height: 32px;text-align: center;border-radius: 8px;position: fixed; bottom:24px;right: 28px;z-index: 999999;background: rgba(0, 0, 0,.8);font-size: 13px;';
+    document.body.appendChild(m);
+    setTimeout(function () {
+      const d = 0.5;
+      m.style.transition =
+        'transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
+      m.style.opacity = '0';
+      setTimeout(function () {
+        document.body.removeChild(m);
+      }, d * 1000);
+    }, 3000);
+  }
+
+  window.pakeToast = pakeToast;
+});
--- a/bin/inject/event.js
+++ b/bin/inject/event.js
@@ -0,0 +1,291 @@
+const shortcuts = {
+  ArrowUp: () => scrollTo(0, 0),
+  ArrowDown: () => scrollTo(0, document.body.scrollHeight),
+  // Don't use command + ArrowLeft or command + ArrowRight
+  // When editing text in page, it causes unintended page navigation.
+  // ArrowLeft: () => window.history.back(),
+  // ArrowRight: () => window.history.forward(),
+  '[': () => window.history.back(),
+  ']': () => window.history.forward(),
+  r: () => window.location.reload(),
+  '-': () => zoomOut(),
+  '=': () => zoomIn(),
+  '+': () => zoomIn(),
+  0: () => setZoom('100%'),
+};
+
+function setZoom(zoom) {
+  const html = document.getElementsByTagName('html')[0];
+  html.style.zoom = zoom;
+  window.localStorage.setItem('htmlZoom', zoom);
+}
+
+function zoomCommon(zoomChange) {
+  const currentZoom = window.localStorage.getItem('htmlZoom') || '100%';
+  setZoom(zoomChange(currentZoom));
+}
+
+function zoomIn() {
+  zoomCommon((currentZoom) => `${Math.min(parseInt(currentZoom) + 10, 200)}%`);
+}
+
+function zoomOut() {
+  zoomCommon((currentZoom) => `${Math.max(parseInt(currentZoom) - 10, 30)}%`);
+}
+
+function handleShortcut(event) {
+  if (shortcuts[event.key]) {
+    event.preventDefault();
+    shortcuts[event.key]();
+  }
+}
+
+//这里参考 ChatGPT 的代码
+const uid = () => window.crypto.getRandomValues(new Uint32Array(1))[0];
+
+function transformCallback(callback = () => {}, once = false) {
+  const identifier = uid();
+  const prop = `_${identifier}`;
+  Object.defineProperty(window, prop, {
+    value: (result) => {
+      if (once) {
+        Reflect.deleteProperty(window, prop);
+      }
+      return callback(result);
+    },
+    writable: false,
+    configurable: true,
+  });
+  return identifier;
+}
+
+async function invoke(cmd, args) {
+  return new Promise((resolve, reject) => {
+    if (!window.__TAURI_POST_MESSAGE__)
+      reject('__TAURI_POST_MESSAGE__ does not exist~');
+    const callback = transformCallback((e) => {
+      resolve(e);
+      Reflect.deleteProperty(window, `_${error}`);
+    }, true);
+    const error = transformCallback((e) => {
+      reject(e);
+      Reflect.deleteProperty(window, `_${callback}`);
+    }, true);
+    window.__TAURI_POST_MESSAGE__({
+      cmd,
+      callback,
+      error,
+      ...args,
+    });
+  });
+}
+
+// Judgment of file download.
+function isDownloadLink(url) {
+    const fileExtensions = [
+        '3gp', '7z', 'ai', 'apk', 'avi', 'bmp', 'csv', 'dmg', 'doc', 'docx', 'fla', 'flv', 'gif', 'gz', 'gzip',
+        'ico', 'iso', 'indd', 'jar', 'jpeg', 'jpg', 'm3u8', 'mov', 'mp3', 'mp4', 'mpa', 'mpg',
+        'mpeg', 'msi', 'odt', 'ogg', 'ogv', 'pdf', 'png', 'ppt', 'pptx', 'psd', 'rar', 'raw', 'rss', 'svg',
+        'swf', 'tar', 'tif', 'tiff', 'ts', 'txt', 'wav', 'webm', 'webp', 'wma', 'wmv', 'xls', 'xlsx', 'xml', 'zip'
+    ];
+    const downloadLinkPattern = new RegExp(`\\.(${fileExtensions.join('|')})$`, 'i');
+    return downloadLinkPattern.test(url);
+}
+
+// No need to go to the download link.
+function externalDownLoadLink() {
+  return ['quickref.me'].indexOf(location.hostname) > -1;
+}
+
+// Directly jumping out without hostname address.
+function externalTargetLink() {
+  return ['zbook.lol'].indexOf(location.hostname) > -1;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const tauri = window.__TAURI__;
+  const appWindow = tauri.window.appWindow;
+
+  const topDom = document.createElement('div');
+  topDom.id = 'pack-top-dom';
+  document.body.appendChild(topDom);
+  const domEl = document.getElementById('pack-top-dom');
+
+  domEl.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+    if (e.buttons === 1 && e.detail !== 2) {
+      appWindow.startDragging();
+    }
+  });
+
+  domEl.addEventListener('touchstart', () => {
+    appWindow.startDragging();
+  });
+
+  domEl.addEventListener('dblclick', () => {
+    appWindow.isFullscreen().then((fullscreen) => {
+      appWindow.setFullscreen(!fullscreen);
+    });
+  });
+
+  document.addEventListener('keyup', (event) => {
+    if (/windows|linux/i.test(navigator.userAgent) && event.ctrlKey) {
+      handleShortcut(event);
+    }
+    if (/macintosh|mac os x/i.test(navigator.userAgent) && event.metaKey) {
+      handleShortcut(event);
+    }
+  });
+
+  const detectAnchorElementClick = (e) => {
+    const anchorElement = e.target.closest('a');
+    if (anchorElement && anchorElement.href) {
+      const target = anchorElement.target;
+      anchorElement.target = '_self';
+      const hrefUrl = new URL(anchorElement.href);
+      const absoluteUrl = hrefUrl.href;
+
+      // Handling external link redirection.
+      if (
+        window.location.host !== hrefUrl.host &&
+        (target === '_blank' || target === '_new' || externalTargetLink())
+      ) {
+        e.preventDefault && e.preventDefault();
+        tauri.shell.open(absoluteUrl);
+        return;
+      }
+
+      let filename = anchorElement.download || getFilenameFromUrl(absoluteUrl);
+      // Process download links for Rust to handle.
+      // If the download attribute is set, the download attribute is used as the file name.
+      if (
+        (anchorElement.download ||
+          e.metaKey ||
+          e.ctrlKey ||
+          isDownloadLink(absoluteUrl)) &&
+        !externalDownLoadLink()
+      ) {
+        e.preventDefault();
+        invoke('download_file', {
+          params: {
+            url: absoluteUrl,
+            filename,
+          },
+        });
+      }
+    }
+  };
+
+  // Prevent some special websites from executing in advance, before the click event is triggered.
+  document.addEventListener('click', detectAnchorElementClick, true);
+
+  collectUrlToBlobs();
+  detectDownloadByCreateAnchor();
+
+  // Rewrite the window.open function.
+  const originalWindowOpen = window.open;
+  window.open = function (url, name, specs) {
+    // Apple login and google login
+    if (name === 'AppleAuthentication') {
+      //do nothing
+    } else if (specs.includes('height=') || specs.includes('width=')) {
+      location.href = url;
+    } else {
+      const baseUrl = window.location.origin + window.location.pathname;
+      const hrefUrl = new URL(url, baseUrl);
+      tauri.shell.open(hrefUrl.href);
+    }
+    // Call the original window.open function to maintain its normal functionality.
+    return originalWindowOpen.call(window, url, name, specs);
+  };
+
+  // Set the default zoom, There are problems with Loop without using try-catch.
+  try {
+    setDefaultZoom();
+  } catch (e) {
+    console.log(e);
+  }
+});
+
+function setDefaultZoom() {
+  const htmlZoom = window.localStorage.getItem('htmlZoom');
+  if (htmlZoom) {
+    setZoom(htmlZoom);
+  }
+}
+
+function getFilenameFromUrl(url) {
+  const urlPath = new URL(url).pathname;
+  const filename = urlPath.substring(urlPath.lastIndexOf('/') + 1);
+  return filename;
+}
+
+function removeUrlParameters(url) {
+  const parsedUrl = new URL(url);
+  parsedUrl.search = '';
+  return parsedUrl.toString();
+}
+
+// Toggle video playback when the window is hidden.
+function toggleVideoPlayback(pause) {
+  const videos = document.getElementsByTagName('video');
+  for (const video of videos) {
+    if (pause) {
+      video.pause();
+    } else {
+      video.play();
+    }
+  }
+}
+
+// Collect blob urls to blob by overriding window.URL.createObjectURL
+function collectUrlToBlobs() {
+  const backupCreateObjectURL = window.URL.createObjectURL;
+  window.blobToUrlCaches = new Map();
+  window.URL.createObjectURL = (blob) => {
+    const url = backupCreateObjectURL.call(window.URL, blob);
+    window.blobToUrlCaches.set(url, blob);
+    return url;
+  };
+}
+
+function convertBlobUrlToBinary(blobUrl) {
+  return new Promise((resolve) => {
+    const blob = window.blobToUrlCaches.get(blobUrl);
+    const reader = new FileReader();
+
+    reader.readAsArrayBuffer(blob);
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+  });
+}
+
+// detect blob download by createElement("a")
+function detectDownloadByCreateAnchor() {
+  const createEle = document.createElement;
+  const tauri = window.__TAURI__;
+  document.createElement = (el) => {
+    if (el !== "a") return createEle.call(document, el);
+    const anchorEle = createEle.call(document, el);
+    const anchorClick = anchorEle.click;
+
+    Object.defineProperties(anchorEle, {
+      click: {
+        get: () => {
+          if (anchorEle.href && anchorEle.href.includes('blob:')) {
+            const url = anchorEle.href;
+            convertBlobUrlToBinary(url).then((binary) => {
+              tauri.fs.writeBinaryFile(anchorEle.download || getFilenameFromUrl(url), binary, {
+                dir: tauri.fs.BaseDirectory.Download,
+              });
+            });
+          }
+          return anchorClick.bind(anchorEle);
+        }
+      }
+    })
+
+    return anchorEle;
+  }
+}
--- a/bin/inject/style.js
+++ b/bin/inject/style.js
@@ -0,0 +1,358 @@
+window.addEventListener('DOMContentLoaded', (_event) => {
+  const css = `
+    #page #footer-wrapper,
+    .drawing-board .toolbar .toolbar-action,
+    .c-swiper-container,
+    .download_entry,
+    .lang, .copyright,
+    .wwads-cn, .adsbygoogle,
+    #Bottom > div.content > div.inner,
+    #Rightbar .sep20:nth-of-type(5),
+    #Rightbar > div.box:nth-child(4),
+    #Main > div.box:nth-child(8) > div
+    #Wrapper > div.sep20,
+    #Main > div.box:nth-child(8),
+    #masthead-ad,
+    #app > header > div > div.menu,
+    #root > div > div.fixed.top-0.left-0.w-64.h-screen.p-10.pb-0.flex.flex-col.justify-between > div > div.space-y-4 > a:nth-child(3),
+    #app > div.layout > div.main-container > div.side-bar > div,
+    #app > div.layout > div.main-container > div.side-bar > li.divider,
+    #Rightbar > div:nth-child(6) > div.sidebar_compliance,
+    #__next > div.PageWithSidebarLayout_centeringDiv___L9br > aside > div > div > a.ChatPageFollowTwitterLink_followLink__Gl2tt,
+    #__next > div.PageWithSidebarLayout_centeringDiv___L9br > aside > div > div > a.Button_buttonBase__0QP_m.Button_primary__pIDjn.ChatPageDownloadLinks_downloadButton__amBRh,
+    #__next > div.PageWithSidebarLayout_centeringDiv___L9br > aside > div > div > section a[href*="/contact"] {
+      display: none !important;
+    }
+
+    #app > header .right .avatar.logged-in{
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    #app > header .right .avatar.logged-in:hover{
+      opacity: 1;
+    }
+
+    #layout > ytmusic-nav-bar{
+      padding: 6px 16px 0 72px;
+    }
+
+    html::-webkit-scrollbar {
+      display: none !important;
+    }
+
+    #__next header.HeaderBar_header__jn5ju{
+      padding-top: 16px;
+    }
+
+    #__next .ChatPageSidebar_menuFooter__E1KTY,#__next > div.PageWithSidebarLayout_centeringDiv___L9br > div > aside > div > menu > section:nth-child(6) {
+      display: none;
+    }
+
+    #page .main_header, .cb-layout-basic--navbar,
+    #app .splitpanes.splitpanes--horizontal.no-splitter header,
+    .fui-FluentProvider .fui-Button[data-testid="HomeButton"],
+    #__next > div.PageWithSidebarLayout_centeringDiv___L9br > aside .ChatPageSidebar_logo__9PIXq {
+      padding-top: 20px;
+    }
+
+    #__next .PageWithSidebarLayout_mainSection__i1yOg {
+      width: 100%;
+      max-width: 1000px;
+    }
+
+    #__next > div.PageWithSidebarLayout_centeringDiv___L9br > aside{
+      min-width: 260px;
+    }
+
+    #__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.absolute.left-2.top-2.z-10.hidden.md\\:inline-block{
+      margin-top:20px;
+      margin-left: 10px;
+    }
+
+    .chakra-ui-light #app .chakra-heading,
+    .chakra-ui-dark #app .chakra-heading,
+    .chakra-ui-light #app .chakra-stack,
+    .chakra-ui-dark #app .chakra-stack,
+    .app-main .sidebar-mouse-in-out,
+    .chakra-modal__content-container .chakra-modal__header > div > div,
+    #__next > div.PageWithSidebarLayout_centeringDiv___L9br > section > header {
+      padding-top: 10px;
+    }
+
+    #__next .overflow-hidden>.hidden.bg-gray-900 span.rounded-md.bg-yellow-200 {
+      display: none;
+    }
+
+    #__next .overflow-hidden>.overflow-x-hidden .scrollbar-trigger > nav {
+      padding-top: 30px;
+    }
+
+    #__next .absolute .px-3.pt-2.pb-3.text-center {
+      visibility: hidden;
+      padding-bottom: 4px;
+    }
+
+    #__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.flex-shrink-0.bg-gray-900.md\\:flex.md\\:w-\\[260px\\].md\\:flex-col > div > div > nav {
+      width: 100%;
+    }
+
+    #tabs-sidebar--tabpanel-0 > div.tw-flex.tw-items-center.tw-mb-\\[12px\\].tw-mt-\\[14px\\].tw-px-4 {
+      padding-top: 15px;
+    }
+
+    #tabs-sidebar--tabpanel-1 > div > div.tw-p-\\[16px\\].tw-flex.tw-flex-col.tw-gap-1\\.5{
+      padding-top: 30px;
+    }
+
+    #tabs-sidebar--tabpanel-2 > div > h2 {
+      padding-top: 20px;
+      height: 70px;
+    }
+
+    .lark > .dashboard-sidebar, .lark > .dashboard-sidebar > .sidebar-user-info , .lark > .dashboard-sidebar .index-module_wrapper_F-Wbq{
+      padding-top:15px;
+    }
+
+    .lark > .main-wrapper [data-testid="aside"] {
+      top: 15px;
+    }
+
+    .panel.give_me .nav_view {
+      top: 164px !important;
+    }
+
+    .columns .column #header,
+    .main > div > div.panel.give_me > div.header {
+      padding-top: 30px;
+    }
+
+    ytd-masthead>#container.style-scope.ytd-masthead {
+      padding-top: 12px;
+    }
+
+    #background.ytd-masthead {
+      height: 68px;
+    }
+
+    .wrap.h1body-exist.max-container > div.menu-tocs > div.menu-btn{
+      top: 28px;
+    }
+
+    #Wrapper{
+      background-color: #F8F8F8 !important;
+      background-image:none !important;
+    }
+
+    #Top {
+      border-bottom: none;
+    }
+
+    .container-with-note #home, .container-with-note #switcher{
+      top: 30px;
+    }
+
+    .geist-page nav.dashboard_nav__PRmJv,
+    #app > div.layout > div.header-container.showSearchBoxOrHeaderFixed > header > a {
+      padding-top:10px;
+    }
+
+    .geist-page .submenu button{
+      margin-top:24px;
+    }
+
+
+    #react-root [data-testid="placementTracking"] article,
+    #react-root a[href*="quick_promote_web"],
+    #react-root [data-testid="AppTabBar_Explore_Link"],
+    #react-root a[href*="/lists"][role="link"][aria-label],
+    #react-root a[href*="/i/communitynotes"][role="link"][aria-label],
+    #react-root a[href*="/i/verified-orgs-signup"][role="link"][aria-label] {
+      display: none !important;
+    }
+
+    #react-root [data-testid="DMDrawer"] {
+      visibility: hidden !important;
+    }
+
+    #react-root [data-testid="primaryColumn"] > div > div {
+      position: relative !important;
+    }
+
+    #react-root [data-testid="sidebarColumn"] {
+      visibility: hidden !important;
+      width: 0 !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      z-index: 1 !important;
+    }
+
+    @media only screen and (min-width: 1000px) {
+      #react-root main[role="main"] {
+        align-items: center !important;
+        overflow-x: clip !important;
+      }
+
+      #react-root [data-testid="primaryColumn"] {
+        width: 700px !important;
+        max-width: 700px !important;
+        margin: 0 auto !important;
+      }
+      #react-root [data-testid="primaryColumn"] > div > div:last-child,
+      #react-root [data-testid="primaryColumn"] > div > div:last-child div {
+        max-width: unset !important;
+      }
+
+      #react-root div[aria-label][role="group"][id^="id__"] {
+        margin-right: 81px !important;
+      }
+
+      #react-root header[role="banner"] {
+        position: fixed !important;
+        left: 0 !important;
+      }
+
+      #react-root header[role="banner"] > div > div > div {
+        justify-content: center !important;
+        padding-top: 0;
+        overflow-x: hidden;
+      }
+
+      #react-root form[role="search"] > div:nth-child(1) > div {
+        background-color: transparent !important;
+      }
+
+      #react-root h1[role="heading"] {
+        padding-top: 4px !important;
+      }
+
+      #react-root header[role="banner"]
+        nav[role="navigation"]
+        *
+        div[dir="auto"]:not([aria-label])
+        > span,
+      #react-root [data-testid="SideNav_AccountSwitcher_Button"] > div:not(:first-child) {
+        display: inline-block !important;
+        opacity: 0 !important;
+        transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
+      }
+      #react-root header[role="banner"]
+        nav[role="navigation"]:hover
+        *
+        div[dir="auto"]:not([aria-label])
+        > span,
+      #react-root [data-testid="SideNav_AccountSwitcher_Button"]:hover > div:not(:first-child) {
+        opacity: 1 !important;
+      }
+      #react-root header[role="banner"] nav[role="navigation"]:hover > * > div {
+        backdrop-filter: blur(12px) !important;
+      }
+      #react-root header[role="banner"] nav[role="navigation"] > a {
+        position: relative;
+      }
+
+      #react-root header[role="banner"] nav[role="navigation"] > a::before {
+        content: "";
+        position: absolute;
+        top: 0px;
+        right: -40px;
+        bottom: 0px;
+        left: 0px;
+      }
+      #react-root [data-testid="SideNav_AccountSwitcher_Button"] {
+        bottom: 18px !important;
+        left: 1px !important;
+      }
+
+      #react-root [data-testid="SideNav_NewTweet_Button"], #react-root [aria-label="Twitter Blue"]{
+        display: none;
+      }
+    }
+
+    @media only screen and (min-width: 1265px) {
+      #react-root [data-testid="sidebarColumn"] form[role="search"] {
+        visibility: visible !important;
+        position: fixed !important;
+        top: 12px !important;
+        right: 16px !important;
+      }
+
+      #react-root [data-testid="sidebarColumn"] input[placeholder="Search Twitter"] {
+        width: 150px;
+      }
+
+      #react-root [data-testid="sidebarColumn"] form[role="search"]:focus-within {
+        width: 374px !important;
+        backdrop-filter: blur(12px) !important;
+      }
+
+      #react-root [data-testid="sidebarColumn"] input[placeholder="Search Twitter"]:focus {
+        width: 328px !important;
+      }
+
+      #react-root div[style*="left: -12px"] {
+        left: unset !important;
+      }
+
+      #react-root div[style="left: -8px; width: 306px;"] {
+        left: unset !important;
+        width: 374px !important;
+      }
+
+      #react-root .searchFilters {
+        visibility: visible !important;
+        position: fixed;
+        top: 12px;
+        right: 16px;
+        width: 240px;
+      }
+      #react-root .searchFilters > div > div:first-child {
+        display: none;
+      }
+    }
+
+    @media (min-width:1024px){
+      #__next .text-base.lg\\:max-w-xl, #__next form.stretch.lg\\:max-w-2xl {
+        max-width: 44rem;
+      }
+    }
+
+    @media (min-width:1280px){
+      #__next .text-base.xl\\:max-w-3xl, #__next form.stretch.xl\\:max-w-3xl {
+        max-width: 48rem;
+      }
+    }
+
+    @media (max-width:767px){
+      #__next .overflow-hidden.w-full .max-w-full>.sticky.top-0 {
+        padding-top: 20px;
+      }
+    }
+
+    #__next .prose ol li p {
+      margin: 0;
+      display: inline;
+    }
+
+    #pack-top-dom:active {
+      cursor: grabbing;
+      cursor: -webkit-grabbing;
+    }
+
+    #pack-top-dom{
+      position:fixed;
+      background:transparent;
+      top:0;
+      width: 100%;
+      height: 20px;
+      cursor: grab;
+      -webkit-app-region: drag;
+      user-select: none;
+      -webkit-user-select: none;
+      z-index: 90000;
+    }
+  `;
+  const styleElement = document.createElement('style');
+  styleElement.innerHTML = css;
+  document.head.appendChild(styleElement);
+});
--- a/bin/types.ts
+++ b/bin/types.ts
@@ -43,6 +43,9 @@ export interface PakeCliOptions {

  /** 调试模式，会输出更多日志 */
  debug: boolean;
+
+  /** 需要注入页面的外部脚本 */
+  inject: string[];
 }

 export interface PakeAppOptions extends PakeCliOptions {