网站 数据备份,网站建设后期,白酒类网站模板,装修公司口碑好的公司一、软件介绍#xff08;文末提供下载#xff09; 这是一个基本的 Chrome 扩展样板#xff0c;可帮助您编写模块化和现代的 Javascript 代码#xff0c;轻松加载 CSS#xff0c;并在代码更改时自动重新加载浏览器。
github地址#xff1a;https://github.com/lxieyang/c…一、软件介绍文末提供下载 这是一个基本的 Chrome 扩展样板可帮助您编写模块化和现代的 Javascript 代码轻松加载 CSS并在代码更改时自动重新加载浏览器。
github地址https://github.com/lxieyang/chrome-extension-boilerplate-react
本文信息图片来源于上面GitHub地址
二、软件特征
Chrome Extension Manifest V3React 18Webpack 5Webpack Dev Server 4React Refreshreact-refresh-webpack-plugineslint-config-react-appPrettierTypeScript
三、安装和运行
Check if your Node.js version is 18. 检查您的 Node.js 版本是否为 18。Clone this repository. 克隆此存储库。Change the packages name, description, and repository fields in package.json. 在 中更改包的 name 、 description 和 repository 字段 package.json 。Change the name of your extension on src/manifest.json. 在 上 src/manifest.json 更改扩展的名称。Run npm install to install the dependencies. Run npm install 以安装依赖项。Run npm start 跑 npm startLoad your extension on Chrome following: 在 Chrome 上加载您的扩展 Access chrome://extensions/ 访问 chrome://extensions/Check Developer mode 检查 Developer modeClick on Load unpacked extension Load unpacked extension 点击Select the build folder. 选择 build 文件夹。 Happy hacking. 祝您愉快。
四、结构 1、 所有扩展的代码都必须放在该 src 文件夹中样板已经准备好具有弹出窗口、选项页面、背景页面和新标签页替换浏览器的新标签页。但请随意自定义这些。 2、TypeScript 类型脚本 此样板现在支持 TypeScriptPage Options 是使用 TypeScript 实现的。有关示例用法请参阅 src/pages/Options/ 示例。 3、 Webpack 自动重新加载和 HRM 为了使您的工作流程更加高效此样板使用 webpack 服务器进行开发从 开始 npm start 具有自动重新加载功能每次在编辑器中保存某些文件时该功能都会自动重新加载浏览器。 如果需要您可以在其他端口上运行 dev 模式。只需像这样指定 env var port $ PORT6002 npm run start 4、Content Scripts 内容脚本 尽管此样板使用 webpack 开发服务器但它也准备在每次代码更改时将所有 bundles 文件写入磁盘因此您可以在扩展清单上指向要用作内容脚本的 bundles但您需要从热重载中排除这些入口点为什么为此您需要在使用 chromeExtensionBoilerplate - notHotReload 配置上 webpack.config.js 公开哪些入口点是内容脚本。请看下面的示例。 假设你想使用 myContentScript 入口点作为内容脚本那么 webpack.config.js 你将配置入口点并将其从热重载中排除如下所示
{ … entry: { myContentScript: ./src/js/myContentScript.js }, chromeExtensionBoilerplate: { notHotReload: [myContentScript] } … }
and on your src/manifest.json:
{ content_scripts: [ { matches: [https://www.google.com/*], js: [myContentScript.bundle.js] } ] } 5、Packing 包装 开发扩展后运行命令
$ NODE_ENVproduction npm run build 现在folder 的内容 build 将是准备提交到 Chrome Web Store 的扩展。只需查看官方指南即可了解有关发布的更多信息。 6、秘密 如果您正在开发一个与某些 API 通信的扩展您可能正在使用不同的密钥进行测试和生产。是一种很好的做法您不要提交密钥并公开给有权访问存储库的任何人。对于此任务此样板通过名为 的模块将文件 ./secrets.THE-NODE_ENV.js 导入到您的模块上 secrets 因此您可以执行以下作
./secrets.development.js export default { key: 123 }; ./src/popup.js import secrets from secrets;
ApiCall({ key: secrets.key }); 五、安装包下载 夸克网盘分享
