网站设计 浏览器 第1篇
有多少小伙伴跟我一样喜欢收藏网站，不管以后能不能用到，只要觉得有意思先收藏起来再说；
而我又只喜欢收藏，不喜欢整理，收藏夹吃灰成了一个随手的习惯，但是这里边混杂这一些真的有用的网站，在用到的这些网站的时候找起来是真的麻烦。
有多少人喜欢把浏览器开一堆页面？
反正我是常年开着十几个页面，不会关的那种，也不是乱开，是真的都有用，如果关掉再次找起来不仅麻烦，有很多还会关闭自动清 Token，所以会把 Tab 栏积压的只剩一个小图标，一个网站找半天；
当然如果开多个工作窗口可以解决这个问题，但是面临的新问题就是多工作窗之间切换起来又是令人手忙脚乱。
有没有经常不小心关掉还有用的网页？或者电脑重启后浏览器没有记住上次打开的状态消失了，又要重新找回；
如果在浏览器历史里找回，拿 Edge 为例，他的历史记录不知道是什么规则，经常没有我刚刚关掉的网页，找回相当的麻烦。
这三个致命问题，特别影响浏览器的体验；
你可能不信，就基于这些问题，国外的开发者开发了一个浏览器叫 ARC，界面美观，使用起来也确实不错；
当然这款浏览器能解决的使用痛点并不局限于这三个，但是它也有自己的问题，比如需要一些魔法才可以使用，还有特效过于炫酷导致卡卡的，那么有没有一个简单的方法可以解决这个问题那？
当然有，好在浏览器的扩展 API 给了我们获取这些东西的权限，让我们可以制作一个提升浏览器体验的扩展插件
我们在扩展商店可以找到很多解决类似问题的扩展，但是使用过后感觉都不如意，大多都只解决了单个需求，又搭配了一些没有必要的功能。。。
既然市场上没有那就自己来做一个，简单了解了一下 manifest V3 的 API 之后就开始动手；
最初用原生前端做了一个 demo，后来觉得原生前端扩展起来比较麻烦，不如 vue 就决定切换成 vue；
可是切换的时候遇到了问题，我直接用浏览器方式引入了 vue 发现没有任何效果，查了一些资料没有找到答案，只找到了这么一个回答；
又经过一通查询发现了一个库 crxjs，这让我眼前一亮，这是一个 vite 插件，可以用来实时的打包用 vue 写的浏览器扩展，还可以热更新，简直就是扩展开发神器啊；
我们先跟着crxjs的文档搭建一下环境，这里我们直接使用vite3
安装插件：npm i @crxjs/vite-plugin@beta -D
修改 文件里的代码
在根目录创建一个 文件
里边的代码就根据你的需求写，跟原生扩展开发配置没什么区别
配置就完成了，就是这么简单
然后我们直接 npm run dev
就可以看到打包好的 dist 文件了
把这个 dist 文件拖入浏览器扩展页面就可以看到
以后写完代码直接保存就会自动打包更新这个 dist
跟着 crxjs 搭建好环境之后就是业务部分
这里工程代码太长了就不贴了，所有代码均已开源，可以到 github 看开源代码，欢迎 star 哦！！！
开源地址：
最终，标签星球诞生了，它如同一个浏览器的仪表盘一样，将你最关注的浏览器信息显示在这个页面上，扩展安装之后新建标签页就可以看到；
布局分为四块，最左边是收藏夹的分组，进入后默认选中第一个分组的网站，右下部分是当前选中分组的网站，以导航的形式显示，可以从左侧导航栏进行切换显示
上部分是显示最近浏览过的十个网站，如果不小心手滑关掉了从这里可以即刻恢复；
当然这个功能推出之后也收到了一些小伙伴们的吐槽，玩意我刚浏览完那种小网站，或者摸完鱼，没有覆盖让别人看到那岂不是。。。这里pony下一个版本会想办法解决；
网站设计 浏览器 第2篇
“在浏览器中进行设计”是一个随着响应式web设计的兴起而流行起来的术语，为了将花在像Sketch这样的设计程序上的时间最小化，设计师们被要求将设计阶段转移到浏览器中，并利用CSS进行布局和样式化。这种网站设计方法被证明是更有效的，因为它省去了很多步骤。
HTML和CSS虽然是结构化的，但它们迫使您考虑模式，并对您进行检查。在构建可以轻松复制、复制和填充动态数据同时保持相同结构的HTML组件时，考虑模块化更容易。如果您想创建一个特定的修改，您必须显式地针对该元素，或者添加另一个CSS类。
当您设计标题样式时，除非它们被覆盖，否则它们在整个站点中是一致的，其他元素也是如此。这种类型的思想迫使您标准化，将公共元素分组在一起，尽可能重用已经具有样式的元素，最重要的是，保持所有内容模块化。
通过一个CSS声明，您可以更改按钮上的填充以获得更好的触摸目标，并可以直接在移动电话、平板电脑和桌面上进行测试。这在Photoshop或Sketch中并不容易做到，因为其他元素在布局中彼此不知道，而且每次调整大小时都必须重新组织对象。
想尝试不同的标题配色方案吗？只需几行CSS代码，就可以立即在所有HTML模板、所有设备和屏幕上看到更改。当您有20个静态模型时，这种灵活性是不容易模拟的。当然，您可以在Sketch或Adobe XD中使用“符号”来表示可重用组件，但它们不如CSS那么通用。
在这个阶段，需要做出几个技术决定。需要回答的问题有：
你会使用CSS预处理器吗？
您将为布局使用哪种类型的响应网格？
您想使用的字体是否可供购买？客户是否有高级web字体的预算，或者您是否将恢复使用可用的免费web字体？
您将使用多色或单色图标吗？整个场地的大小会有所不同吗？接下来，您是依赖于自定义绘制的图标，还是依赖于已经存在的图标包？你的图标需要多大的尺寸？
通过调整几行CSS，可以在所有设备和屏幕上立即看到更改。
网站设计 浏览器 第3篇
即使我们在浏览器中进行设计，有几十个模板和组件，我们也可能会忘记在哪里使用某些东西，以及以什么方式使用。将所有组件构建一个样式指南作为一个中央存储库是一个好主意。通过将UI组件和元素组合到web页面中，可以从这个样式指南构建特定的页面模板。
UI组件可以是分页、产品列表、图片库、模式窗口、表单元素等，并用作模板的构建块。在测试构建特定UI组件时，将所有东西都放在一个地方非常方便。
使用CSS，最好将组件样式分离到单独的文件中。例如，分页样式将在_pagination中。scss是_form中的表单元素。所有这些文件将与其他文件（变量、mixin等）一起包含在一个scss文件中。
虽然风格scss可能由几十个“小文件”组成，当几个人在同一个项目中工作时，如果所有内容都被分割成更小的块，那么跟踪更改（无论是否使用源代码控制）就会更容易。在网站设计项目投入生产后，继续维护风格指南是很重要的，因为团队需要跟踪每个网站组件。