【亲测免费】 NoCoin 项目使用教程

2026-01-18 09:31:38作者：温玫谨Lighthearted

1. 项目的目录结构及介绍

NoCoin 项目的目录结构如下：

NoCoin/
├── src/
│   ├── css/
│   ├── js/
│   ├── manifest.json
│   ├── options.html
│   ├── popup.html
│   └── icons/
├── .gitignore
├── LICENSE
├── README.md
├── gulpfile.js
└── package.json

目录结构介绍

src/: 包含项目的源代码文件。
- css/: 存放样式文件。
- js/: 存放 JavaScript 脚本文件。
- manifest.json: 扩展的清单文件，包含扩展的基本信息和配置。
- options.html: 扩展的选项页面。
- popup.html: 扩展的弹出页面。
- icons/: 存放扩展图标。
.gitignore: Git 忽略文件列表。
LICENSE: 项目的开源许可证。
README.md: 项目的说明文档。
gulpfile.js: Gulp 构建工具的配置文件。
package.json: 项目的依赖和脚本配置文件。

2. 项目的启动文件介绍

NoCoin 项目的启动文件主要是 manifest.json 和 popup.html。

`manifest.json`

manifest.json 是 Chrome 扩展的清单文件，包含扩展的基本信息和配置。以下是 manifest.json 的部分内容：

{
  "manifest_version": 2,
  "name": "NoCoin",
  "version": "0.2.1",
  "description": "Block coin miners such as Coinhive.",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "storage",
    "<all_urls>"
  ],
  "background": {
    "scripts": ["js/background.js"]
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "options_ui": {
    "page": "options.html",
    "chrome_style": true
  }
}

`popup.html`

popup.html 是扩展的弹出页面，用户点击浏览器工具栏上的扩展图标时会显示该页面。以下是 popup.html 的部分内容：

<!DOCTYPE html>
<html>
<head>
  <title>NoCoin</title>
  <link rel="stylesheet" type="text/css" href="css/popup.css">
</head>
<body>
  <h1>NoCoin</h1>
  <button id="toggle">Toggle</button>
  <script src="js/popup.js"></script>
</body>
</html>

3. 项目的配置文件介绍

NoCoin 项目的主要配置文件是 manifest.json 和 gulpfile.js。

`manifest.json`

如上所述，manifest.json 包含了扩展的基本信息和配置，包括权限、背景脚本、浏览器动作和选项页面等。

`gulpfile.js`

gulpfile.js 是 Gulp 构建工具的配置文件，用于自动化构建过程。以下是 gulpfile.js 的部分内容：

var gulp = require('gulp');
var zip = require('gulp-zip');

gulp.task('zip', function() {
  return gulp.src(['src/**/*'])
    .pipe(zip('NoCoin.zip'))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['zip']);