一步一步带你打造Chrome插件：初学者指南

前端

2024-01-09 21:24:40

前期准备：工具与知识

1.1 必要的软件和环境

谷歌浏览器 ：您需要安装最新版本的谷歌浏览器。
Node.js ：用于构建和运行插件。
文本编辑器或IDE ：用于编写代码。
Git ：用于版本控制。

1.2 基本知识储备

HTML、CSS和JavaScript ：这些是构建Chrome插件的基本技术。
了解浏览器扩展程序的工作原理 ：这将帮助您理解插件如何与浏览器交互。

2. 创建一个新的Chrome插件

2.1 创建一个新的文件夹

打开终端或命令行工具。
导航到您希望插件所在的目录。
使用以下命令创建一个新的文件夹：

mkdir chrome-extension

2.2 初始化项目

导航到新创建的文件夹。
使用以下命令初始化项目：

npm init -y

这将创建一个名为“package.json”的文件，其中包含有关插件的基本信息。

3. 安装必要的依赖项

3.1 安装构建工具

使用以下命令安装构建工具：

npm install --save-dev webpack webpack-cli

3.2 安装其他依赖项

安装以下依赖项：

npm install --save @babel/core @babel/preset-env @babel/plugin-transform-runtime chrome-extension-webpack-plugin

4. 创建插件的骨架

4.1 创建“manifest.json”文件

在项目根目录中创建一个名为“manifest.json”的文件。
将以下代码复制到文件中：

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "1.0.0",
  "description": "This is my first Chrome extension.",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "permissions": [
    "tabs",
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["https://*/*", "http://*/*"],
      "js": ["content_script.js"]
    }
  ],
  "browser_action": {
    "default_icon": "icons/icon48.png",
    "default_popup": "popup.html"
  }
}

4.2 创建“content_script.js”文件

在项目根目录中创建一个名为“content_script.js”的文件。
将以下代码复制到文件中：

console.log("Hello from the content script!");

4.3 创建“popup.html”文件

在项目根目录中创建一个名为“popup.html”的文件。
将以下代码复制到文件中：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Hello from the popup!</h1>
</body>
</html>

5. 构建和运行插件

5.1 创建“webpack.config.js”文件

在项目根目录中创建一个名为“webpack.config.js”的文件。
将以下代码复制到文件中：

const path = require('path');
const webpack = require('webpack');
const ChromeExtensionWebpackPlugin = require('chrome-extension-webpack-plugin');

module.exports = {
  entry: {
    'content_script': './content_script.js',
    'popup': './popup.html'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new ChromeExtensionWebpackPlugin({
      path: 'dist'
    })
  ]
};