Scramble 开源项目使用教程

Scramble 开源项目使用教程

scramble Open-Source Grammarly Alternative 项目地址: https://gitcode.com/gh_mirrors/scra/scramble

1. 项目目录结构及介绍

Scramble 是一个开源的 Chrome 扩展，它通过使用 AI 来增强浏览器中的写作。以下是项目的目录结构及其简介：

scramble/
├── dist/                # 存放构建后的文件
│   ├── chrome/          # Chrome 扩展相关文件
│   └── firefox/         # Firefox 扩展相关文件
├── src/                 # 源代码目录
│   ├── libs/            # 存放第三方库文件
│   ├── styles/          # 样式文件
│   └── contentScript/   # 内容脚本文件
├── .gitignore           # 指定 Git 忽略的文件和目录
├── LICENSE              # MIT 许可证文件
├── README.md            # 项目说明文档
├── build.js             # 构建脚本
├── package-lock.json    # npm 包依赖锁定文件
├── package.json         # npm 包配置文件
└── privacy.md           # 隐私政策文件

2. 项目的启动文件介绍

在 Scramble 项目中，主要的启动文件是 manifest.json，它位于 dist/chrome 和 dist/firefox 目录下。这个文件定义了扩展的基本信息，包括名称、版本、描述、权限以及需要加载的脚本等。

以下是 manifest.json 文件的基本结构：

{
  "manifest_version": 2,
  "name": "Scramble",
  "version": "1.0",
  "description": "An open-source Chrome extension to enhance your writing.",
  "permissions": ["contextMenus", "activeTab"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
  ]
}

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 tailwind.config.js。

• package.json 文件定义了项目的依赖、脚本和元数据。以下是一些关键的部分：

{
  "name": "scramble",
  "version": "1.0.0",
  "description": "An open-source Chrome extension to enhance your writing.",
  "main": "index.js",
  "scripts": {
    "install": "npm install",
    "build": "npm run build:chrome && npm run build:firefox"
  },
  "dependencies": {
    "tailwindcss": "^2.0.3"
  },
  "devDependencies": {
    "postcss": "^8.0.5",
    "postcss-cli": "^6.0.0"
  }
}

• tailwind.config.js 文件是 Tailwind CSS 的配置文件，用于定制化 CSS 的生成。以下是基本的配置结构：

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

通过这些配置文件，您可以定制化和构建项目，以满足您的开发需求。

scramble Open-Source Grammarly Alternative 项目地址: https://gitcode.com/gh_mirrors/scra/scramble