修改vs插件示例

本文介绍了如何修改VSCode Browser Preview插件,将其从使用puppeteer-core改为puppeteer,并安装相关依赖和Chrome浏览器。主要步骤包括注释掉检查Chrome路径的代码、修改引入模块、使用vsce打包插件、安装puppeteer和依赖库,以及下载并配置Chrome(添加--no-sandbox参数)以解决在Linux环境下的运行问题。

作者:zhuge···预计阅读 6 分钟·767 阅读·0 评论
修改vs插件示例

插件网站:https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview 仓库:https://github.com/auchenberg/vscode-browser-preview.git

修改 ext-src/browser.ts

  //if (!chromePath) {
  //     this.telemetry.sendEvent('error', {
  //       type: 'chromeNotFound'
  //     });

  //     throw new Error(
  //       `No Chrome installation found, or no Chrome executable set in the settings - used path ${chromePath}`
  //     );
  //  }
  // const puppeteer = require('puppeteer-core'); // 删除
  const puppeteer = require('puppeteer'); // 改为
npm i vsce -g
npm install react-scripts
vsce package

安装 puppeteer

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install puppeteer

npm i bufferutil@^4.0.1 -g
npm i encoding@^0.1.0 -g
npm i utf-8-validate@^5.0.2 -g
chrome /root/node_modules/_puppeteer@17.1.1@puppeteer/.local-chromium/linux-1036745

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 -y

yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y

安装 chrome

wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
yum install ./google-chrome-stable_current_x86_64.rpm
vim /usr/bin/google-chrome
将
exec -a "$0" "$HERE/chrome" "$@"
改为
exec -a "$0" "$HERE/chrome" "$@" --user-data-dir --no-sandbox

#添加--no-sandbox后即可启动浏览器
/usr/bin/google-chrome --no-sandbox

相关文章

评论

加载中...