如何开发一个谷歌浏览器插件工具

原创戎码1生 2024-01-29 10:00 浙江

Chrome 是前端开发者日常使用的浏览器：拥有出色的性能、实用的开发工具和丰富的扩展。
我相信你也安装过很多优秀的插件，比如 adblock,Google 文档等，也有许多优秀的前端开发者参与开发插件，并带来了可观的收入。
在本文中，我将基于 TypeScript 模板一步一步创建 Chrome 扩展程序，告诉你 chrome 插件开发和普通网页开发有什么区别

创建 React 应用程序

首先，我们需要创建一个新的 TypeScript React 项目。打开终端或命令提示符并运行以下命令

1
2

npx create-react-app react-chrome-ext --template typescript
cd react-chrome-ext

让我们删除目前不需要的文件。确保删除后您的文件夹结构如下所示：

App.tsx

function App() {
  return <div className="App">Hello World</div>;
}

export default App;

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = document.createElement("div");
root.className = "container";
document.body.appendChild(root);
const rootDiv = ReactDOM.createRoot(root);
rootDiv.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.css

.App {
  color: white;
  text-align: center;
}

.container {
  width: 15rem;
  height: 15rem;
  background-color: green;
}

Webpack

如何开发一个谷歌浏览器插件工具接下来，我们需要安装必要的依赖项

npm install --save-dev webpack webpack-cli copy-webpack-plugin css-loader html-webpack-plugin ts-node

创建 webpack.config.js 文件，代码如下：

const path = require("path");
const HTMLPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: {
    index: "./src/index.tsx",
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              compilerOptions: { noEmit: false },
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        exclude: /node_modules/,
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new CopyPlugin({
      patterns: [{ from: "manifest.json", to: "../manifest.json" }],
    }),
    ...getHtmlPlugins(["index"]),
  ],
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    path: path.join(__dirname, "dist/js"),
    filename: "[name].js",
  },
};

function getHtmlPlugins(chunks) {
  return chunks.map(
    (chunk) =>
      new HTMLPlugin({
        title: "React extension",
        filename: `${chunk}.html`,
        chunks: [chunk],
      })
  );
}

现在我们已经配置了 webpack，更新您的 package.json 文件,代码如下：

"scripts" :  {
    "build" :  "webpack --config webpack.config.js" ,
    "watch" :  "webpack -w --config webpack.config.js"
  }

这脚本将允许使用命令构建扩展 npm run build，或者使用命令在监视模式下运行 Webpack：npm run watch

manifest.json

用于定义 Chrome 扩展程序的元数据和权限。在项目的根目录中创建一个名为的新文件 manifest.json 并添加以下代码：

{
  "version": "1.0.0",
  "manifest_version": 3,
  "name": "React Chrome 扩展",
  "description": "这是一个使用 React 和 TypeScript 构建的 Chrome 扩展",
  "action": {
    "default_popup": "js/index.html",
    "default_title": "React Chrome 扩展"
  }
}

指定扩展的名称、版本和描述。它还定义了弹出窗口