BewlyBewly项目新页面适配开发指南

前言

BewlyBewly是一款基于浏览器扩展的项目，它需要针对不同网页进行样式适配。本文将详细介绍如何为BewlyBewly项目快速适配新页面的完整流程和技术要点。

准备工作

在开始适配新页面之前，开发者需要完成以下准备工作：

1. 按照项目贡献文档配置好开发环境
2. 熟悉基本的CSS/SCSS语法
3. 了解浏览器扩展的基本工作原理
4. 安装必要的开发工具（如Node.js、pnpm等）

适配流程详解

1. 确定目标页面

首先需要明确要适配的目标页面URL。例如，我们以B站登录页为例，其URL为passport.bilibili.com/login。

2. 修改manifest配置

打开manifest.ts文件，在content_scripts的matches数组中添加新页面的匹配规则。规则需要使用通配符形式：

'*://passport.bilibili.com/*'

3. 添加页面支持检测

在src/contentScripts/index.ts文件中，找到isSupportedPages函数，添加新页面的URL正则匹配：

// 登录页
|| /^https?:\/\/passport\.bilibili\.com\/login.*$/.test(currentUrl)

4. 创建样式文件

在src/styles/adaptedStyles/pages目录下创建新的SCSS文件，命名采用驼峰式，如loginPage.scss。

5. 注册样式文件

在src/styles/adaptedStyles/index.ts文件的setupStyles函数中添加样式文件引用：

// 登录页
else if (/https?:\/\/passport\.bilibili\.com\/login*/.test(currentUrl)) {
  await import('./pages/loginPage.scss')
  document.documentElement.classList.add('loginPage')
}

样式编写规范

基本结构

样式文件应采用以下基本结构：

.bewly-design.loginPage {
  // 固定修改区域
  .top-header {
    display: none;
  }
  
  // 主题颜色适配部分
  :not(foobar) {
    a, b, c {
      color: var(--bew-theme-color);
    }
  }
  
  // 深色模式特有修改
  &.dark {
    d, e, f {
      background: var(--bew-bg);
    }
  }
}

颜色使用规范

1. 必须使用variables.scss中定义的CSS变量
2. 禁止直接写死颜色值
3. 主要颜色变量包括：
   • --bew-theme-color：主题色
   • --bew-bg：背景色
   • --bew-text-1：主要文本色

区域注释

使用#region和#endregion包裹代码块，便于在编辑器中折叠：

// #region 深色模式适配
&.dark {
  // 样式规则
}
// #endregion

开发建议

1. 在完成第3步后，建议先运行pnpm dev进行测试，可以节省不必要的样式编写
2. 样式应尽量保持简洁，只做必要的颜色适配
3. 避免过度"美化"，保持与原页面的一致性
4. 注意处理顶部栏的显示问题，通常需要隐藏原页面顶部栏

调试与测试

1. 使用浏览器的开发者工具检查元素和样式
2. 分别在浅色和深色模式下测试适配效果
3. 检查不同分辨率下的显示效果
4. 确保没有破坏原页面的功能

注意事项

1. 适配新页面前建议先在issue中讨论，避免维护成本过高
2. 不要随意修改页面布局结构
3. 注意B站CSS可能会变更，适配时要考虑兼容性
4. 保持代码风格一致，遵循项目现有规范

结语

通过本文介绍的方法，开发者可以高效地为BewlyBewly项目适配新页面。记住保持代码简洁、遵循规范，并在适配前充分讨论需求，这样才能为项目做出高质量的贡献。