文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

如何使用 React、TypeScript、TailwindCSS 和 Vite 创建 Chrome 插件

init -p 在 Vite 中设置 TailwindCSS 在你的 tailwind.config.js 中，配置模板文件的路径： module.exports = { content: ["....": "index.html" }, "permissions": [] } 测试你的扩展 在 Chrome 中加载扩展 现在你已经准备好了一切，是时候在浏览器中进行测试了。...调试技巧 如果某些东西不起作用，请检查控制台中的错误。你可以通过右键点击扩展弹出窗口并选择 检查 来访问控制台。 发布你的扩展 准备提交 在发布之前，确保你的扩展符合 Chrome 网上应用店的政策。...在 Chrome 网上应用店发布 前往 Chrome 网上应用店开发者控制台，创建一个新项目，并上传你的扩展包（项目的 zip 文件）。按照提示完成提交。...参考 How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite

4.6K10

进阶 | 在chrome开发者工具中观察函数调用栈、作用域链与闭包

在chrome的开发者工具中，通过断点调试，我们能够非常方便的一步一步的观察JavaScript的执行过程，直观感知函数调用栈，作用域链，变量对象，闭包，this等关键信息的变化。...二、认识断点调试工具 在尽量新版本的chrome浏览器中（不确定你用的老版本与我的一致），调出chrome浏览器的开发者工具。 界面如图。...由于在使用断点调试过程中，发现chrome浏览器理解的闭包与该例子中所理解的闭包不太一致，因此专门挑出来，供大家参考。我个人更加倾向于chrome中的理解。 1、第一步：设置断点，然后刷新页面。...一步一步执行，当函数执行到上例子中 我们可以看到，在chrome工具的理解中，由于在foo内部声明的baz函数在调用时访问了它的变量a，因此foo成为了闭包。这好像和我们学习到的知识不太一样。...这个例子在demo01的基础上，我在baz函数中传入一个参数，并打印出来。在调用时，我将全局的变量m传入。输出结果变为20。在使用断点调试看看作用域链。

3.5K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    使用Vue开发Chrome插件

    B 站获取视频信息,评论的功能（原本是打算做自动回复的），顺便巩固下 chrome 开发（快一年没碰脚本类相关技术了），顺便写套模板供自己后续编写 Chrome 插件做铺垫。...不过官方提供了如何使用 TailwindCSS，这里就演示一下 在 Vue 3 和 Vite 安装 Tailwind CSS - Tailwind CSS 中文文档 推荐安装低版本，最新版有兼容性问题...npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 创建 postcss.config.js...} getInfo() } 重新加载插件，然后输出查看结果 加载完毕 bilibili.js:19 老番茄 1606.0万 顶级画质 总播放数2368406 这些数据肯定单纯的输出肯定是没什么作用的...用过 Vue 的都知道写网页很方便，写 Chrome 插件未尝不是编写一个网页，当时的我在接触了 Vue 后就萌发了使用 vue 来编写 Chrome 的想法，当然肯定不止我一个这么想过，所以我在 github

    4.3K20

    快速掌握 Tailwind：最流行的原子化 CSS 框架

    npx tailwindcss init 安装 tailwindcss 依赖，创建 tailwindcss 配置文件。...css 没有模块作用域，所以可能你在这里加了一个样式，结果别的地方样式错乱了。 而用原子 class 就没这种问题，因为样式是只是作用在某个 html 标签的。...而且 tailwindcss 就前面提到的那么几个语法，没啥学习成本，很容易看懂才对。...难以调试 在 chrome devtools 里可以直接看到有啥样式，而且样式之间基本没有交叉，很容易调试： 相反，我倒是觉得之前那种写法容易多个 class 的样式相互覆盖，还要确定优先级和顺序，那个更难调试才对...它的优点有很多，我个人最喜欢的就是不用起 class 的名字了，而且避免了同样的样式在多个 class 里定义多次导致代码重复，并且局部作用于某个标签，避免了全局污染。

    2.1K30

    上手体验TailwindCSS

    写作背景： 在热火朝天的前端框架演进的进程中，大多数的人都把目光关注到了 JavaScript / TypeScript 的身上，TailwindCSS作为最有争议但也是最受欢迎的一个 CSS 框架的产品我们也来看一下它到底好不好用...postcss@latest autoprefixer@latest 生成 tailwind 和 postcss 配置文件： npx tailwindcss init -p tailwindcss 3.../base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; 全局样式文件在main.ts中导入： import...{ cssnano: {} } : {}) }, } 浏览器支持状况： 在Chrome、Firefox、Edge 和 Safari 的最新稳定版本适配良好，但由于部分API不支持IE全部版本，所以强烈不建议在...确实会有一些别扭，但是当我们在开发一些无法使用 UI 库的项目是就不得不面临编写大量 css 文件，还得考虑响应式布局，黑暗模式等等，但是这些对于 TailwindCSS 来说将是简单的，TailwindCSS

    3.2K20

    页面布局（下）：引入 Tailwind CSS 框架构建博客应用 UI 界面

    基于 Laravel Mix 引入 Tailwind 在 Laravel 项目中，我们可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架，开始之前，先安装 laravel-mix-tailwind...'public/css') .tailwind(); 由于 laravel-mix-tailwind 依赖 tailwind.js，所以还需要通过如下命令初始化 Tailwind： npx tailwindcss...Bootstrap，引入 Tailwind： ... // Bootstrap //@import '~bootstrap/scss/bootstrap'; // Tailwind @import "~tailwindcss.../base"; @import "~tailwindcss/components"; @import "~tailwindcss/utilities"; 最后运行如下命令重新编译前端资源： npm run...，就可以看到如下布局视图了，左侧是菜单导航，右侧是主体内容： 你如果喜欢自己倒腾和设计的话，可以结合 Chrome 开发者工具纯手工逐步调试和编写 Tailwind CSS 样式代码，不过如果你只是想快速完成功能

    4K20

    iPhone页面的常用调试方法

    在iPhone中调试，大体上与上文 安卓中的移动页面调试 类似，区别主要是iOS系统中的一些限制，导致某些工具无法使用。 本文基于此，简要介绍在iPhone中如何调试页面。...不过功能相对Chrome DevTools来说，相对简单了些，对于简单的页面可直接使用 对于高版本的iOS系统（如iPhone 7），进行远程调试的Mac主机的系统版本也有限制，并非任何Mac和iPhone...或者之间在chrome中输入 chrome://inspect 也可看到相应信息 ?...为最新版，或者直接下载对应的包，放到XCode的包目录中 安装成功后一直停留在启动画面 可能是XCode开启了调试断点功能，取消即可 安装之后原有微信应用打不开了，如果使用不恰当的ipa包，会有意外的副作用...或者，直接使用我们的windows系统，开启 ios_webkit_debug_proxy 后，在Chrome中调试即可 ? ?

    4.2K10

    tailwindcss：弟弟们都往后稍稍

    css module为css加入「局部作用域」，实现了「css模块化」。 less和sass等css预处理语言，将「css扩展为一种编程语言」，增加变量，Mixin，函数等特性。...tailwindcss 最近使用tailwindcss，感觉上手体验很不错，虽然刚开始需要一直查文档，但我仍然觉得未来可期。...tailwindcss有很多的优点，工具类优先，响应式设计，组件友好，高度自定义等。...在CSS处理媒体查询需要很多代码，tailwindcss中「使用断点语法实现媒体查询功能」，根据常用的设备分辨率，默认设置了5个断点。...tailwindcss中的h4代表的是height: 1rem，也就是说h1代表的是0.25rem。 font-size在刚开始是0.125rem增长，后边是0.75rem，在后边差更多。 ?

    2K40

    一步到位：三行CSS代码轻松实现全网站暗黑模式

    许多热门网站和应用程序现在都提供了黑暗模式选项 —— 如 TailwindCSS： 如果您是开发者，您很可能已经知道如何在开发者工具中切换暗黑模式： 如果你想要为操作系统（以及所有支持暗黑模式的应用程序...是的，它会起作用 — 但是纯黑白有点无聊 我们可以在CSS中使用 color-mix 来增加趣味性 将 CanvasText （黑色或白色）混入 Canvas （白色或黑色）以获得 background-color...如果您访问像 TailwindCSS 这样的网站，您会注意到当您从 color-scheme-toggler 中选择“dark”时，会在 html -节点上添加一个 dark -类。...这是通过 JavaScript 完成的： 创建颜色方案切换器 如果你用过 TailwindCSS ，你会注意到当你从 color-scheme-toggler 中选择“dark”时，会在 html -节点上添加一个...hsl(228, 5%, 15%); --text-color: hsl(228, 5%, 80%); } } 注意： @container style() -queries 目前仅在 Chrome

    2.7K30

    2025 年底，前端开发怎么看 TailwindCSS 这种原子化 CSS，我有点想法

    开发者只能使用这些预设值，无法随意定义任意数值，但可以在设计之初，通过TailwindCSS的主题系统完成自定义的规范。原子化CSS的缺点，但...真的是缺点么？...在抛出上述观点的时候，我们是不是忽略了一个问题，现代前端框架Vue、React的组件化设计思想。在合理的组件化前提下，我们真的还需要那么语义化的class命名吗？我看未必。...Tailwind的每一个类名（如text-center、bg-gray-100、rounded-lg）都是一个独立、明确、无副作用的样式指令，天然契合LLM的token化处理逻辑。...写在最后本文不是在鼓吹原子化CSS，更不是在鼓吹TailwindCSS。只是我个人在项目开发时，对原子化CSS这一类工具的思考。技术没有银弹，工具也没有绝对优劣。关键在于：你是否理解它的设计哲学？...欢迎各位在评论区积极探讨，聊聊原子化CSS在未来开发的可能性。

    44411

    前端必须知道的开发调试知识 - 笔记

    、Whistle、vConsole 等 多技巧：Console、BreakPoint、SourceMap、代理等 # Chrome 的 DevTools 我录过一期 Chrome 调试方法的视频，有兴趣也可以看看...Watch 右侧点击＋可以添加对变量的监控，查看该变量的值 展开 Scope 可以查看作用域列表 (包含闭包) 展开 Call Stack 可以查看当前 JavaScript 代码的调用栈 前端代码天生具有...与 Mac 相连 iPhone 开启 Web 检查器（设置→Safari -> 高级 -→> 开启 Web 检查器) iPhone 使用 Safari 浏览器打开要调试的页面 Mac...打开 Safari 浏览器调试 (菜单栏→> 开发 - iPhone 设备名 -→选择调试页面) 在弹出的 Safari Developer Tools 中调试 Tips：没有 iPhone...并允许调试 电脑打开 Chrome 浏览器，在地址栏输入： chrome://inspect/#devices 并勾选 Discover USB devices 选项 手机允许远程调试，并访问调试页面

    1.8K20

    scss这样写，你学会了吗？

    scss[1]在平常业务中肯定会使用，对于切图css写的实在是有点太多，但是在你写css的同时，你可以让css写得和别人有点不一样，那还是比较有意思的。...} ); }; export default Index; 我们看下scss如何编写 用scss定义了width,height变量 global作用域下定义一个....tag-common的类 在.tag-common类中既使用了tailwindcss也使用了scss的变量【会不生效，所以sass与tailwindcss不能混用】 在.tag-wrap中使用了@extend...scss中尽量复用，但是不建议有意把scss写得过于复杂，比如使用@for,@each，在某些时候是可以使用的，但是不建议为了使用而使用 让scss写得更有意思，可以在项目中抽离出重复的样式做scss的...]scss： https://sass-lang.com/documentation/syntax/ [2]code example： https://github.com/maicFir/base-chrome-plugin

    73320

    3款你必须知道的爬虫工具

    本篇博主将和大家分享几个非常有用的爬虫小工具，这些小工具在实际的爬虫的开发中会大大减少你的时间成本，并同时提高你的工作效率，真的是非常使用的工具。...在开发者工具中，我们会看到 格式数据的可视化效果很差，就是一段冗长的字符串，难以直接看出关键信息。...201509290":{"data":[{"_pos_":1,"entityType":"13","acm":"201509290.1003.1.1286473","title":"【抢券减400】Apple/苹果iPhone...它的作用是可以随意更换浏览器的User-Agent。 比如，你用Chrome浏览器浏览网页，浏览器默认身份是Chrome，但是你可以通过这个工具更换成其它任何身份。...使用说明： 使用Chrome浏览器安装插件，点开图标，选择你需要的身份即可。 ? 实例： （默认Chrome浏览器是这样的） ? ? （变换为IOS-iphone6） ? ?

    81110

    自动化-Appium-​第一个Demo-Web（Python版）

    `instruments -s devices`得到的可使用的设备名称之一 # 在Android上，这个关键字目前不起作用 desired_caps['deviceName'] = 'honor' #...`instruments -s devices`得到的可使用的设备名称之一 # 在Android上，这个关键字目前不起作用 desired_caps['deviceName'] = 'honor' #...的真机里，打开要操作的Chrome浏览器，本章示例为已经在真机安装完成的Chrome浏览器，之后打开百度首页，此时在PC的Chrome浏览器中可以看到百度首页的访问链接，如图所示，真机里的Chrome浏览器版本号为...`instruments -s devices`得到的可使用的设备名称之一 # 在Android上，这个关键字目前不起作用 desired_caps['deviceName'] = 'iPhone 8'...`instruments -s devices`得到的可使用的设备名称之一 # 在Android上，这个关键字目前不起作用 desired_caps['deviceName'] = 'test' #

    4.3K10

    从文档开发框架到package.json，带你走一轮React组件库构建与发布

    React组件库时踩的所有坑进行一个总结，并尝试输出一份能让读者在十分钟内完成react组件库构建与发布的实践指南。...所以我对比tailwindcss和windicss后选择了tailwindcss 一方面，经过调研，常规认知中tailwindcss的卡顿特性，随着“JIT”模式的推出，已经消失得一干二净。...值得注意的是，由于tailwindcss3依赖于postcss8，而umi目前为止还是在使用postcss7，所以我们必须安装兼容postcss7版本的tailwindcss yarn add tailwindcss...@npm:@tailwindcss/postcss7-compat 3.2 构建打包 在进行下一步之前，请先执行 yarn install 完成依赖安装 3.2.1 文件迁移 把docs/index.md...3.3.1 创建组织 创建组织是免费的，尽管创建就是了 3.3.2 配置token 写在根目录的.npmrc，记得不要跟着git仓库上传了 3.3.3 发布命令变化 如果想免费发布一个带有作用域的npm

    4.7K20

    TailwindCSS—一个用于实现快速UI开发的实用工具集CSS框架。

    今天给大家介绍个好东西————TailwindCSS ！一. 引言css对于页面的美化作用不言而喻，但是在进行前端布局页面的时候，往往对页面样式的命名不胜其烦。...三、Tailwind CSS特点功能类优先（utility-first）在一组受约束的原始功能类的基础上构建复杂的组件。...文件下新增一个script"build": "postcss css/tailwind.css -o public/output.css"6.在终端中输入npm run build，项目中就会产生一个含有...output.css的public文件夹7.最后，在浏览器中运行index.html即可五.vscode 补全插件vscode 安装补全插件,书写也更加便捷六、在线编辑器.还可以在 Tailwind Playground.../中文文档地址：https://www.tailwindcss.cn/八、指北君有话说以上就是TailwindCSS简单使用方法，实际体验起来，可以让编码更优雅，编码速度也会大大加快！

    3.9K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券