2022-12-React+Antd去写chrome插件 #

yarn create react-app my-app

{
  "name": "bear",
  "version": "1.0",
  "description": "React开发chrome插件Demo。",
  // 图标，图省事的话，所有尺寸都用一个图也行
  "icons": {
    "16": "images/icon.png",
    "48": "images/icon.png",
    "128": "images/icon.png"
  },
  // manifest.json的版本，有2和3
  "manifest_version": 2,
  // popup页面配置
  "page_action": {
    // 浏览器插件按钮的图标
    "default_icon": "images/icon.png",
    // 浏览器插件按钮hover显示的文字
    "default_title": "bear",
    // popup页面的路径(根目录为最终build生成的插件包目录)
    "default_popup": "index.html"
  },
  // background script配置
  "background": {
    // background script路径(根目录为最终build生成的插件包目录)
    "scripts": [
      "static/js/background.js"
    ],
    // 官方建议这里为false
    "persistent": false
  },
  // content script配置
  "content_scripts": [
    {
      // 应用于哪些页面地址(可以使用正则，<all_urls>表示匹配所有地址)
      "matches": [
        "<all_urls>"
      ],
      // 注入css，注意不要污染样式
      "css": [
        "static/css/content.css"
      ],
      // 注入的js
      "js": [
        "static/js/content.js"
      ],
      // 代码注入的时间，可选document_start/document_end/document_idle(默认)
      "run_at": "document_end"
    }
  ],
  // 权限申请（需要background发起跨域请求的url也放在这里）
  "permissions": [
    // 标签
    "tabs",
    // 根据定制的网页规则，采取相应的错误(例如只在baidu.com启动组件)
    "declarativeContent",
    // 插件本地存储
    "storage",
    // 通知
    "notifications"
  ],
  // 如果向目标页面插入js，需要在这里声明下才能获得执行的权限
  "web_accessible_resources": ["insert.js"]
}

yarn add @craco/craco

/* craco.config.js */

module.exports = {
  ...
}

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

module.exports = {
  webpack: {
    /**
     * 重写 webpack 任意配置
     *  - 与直接定义 configure 对象方式互斥
     *  - 几乎所有的 webpack 配置均可以在 configure 函数中读取，然后覆盖
     */
    configure: (webpackConfig, { env, paths }) => {
      // 修改entry
      webpackConfig.entry = {
        main: './src/index.js',
        content: './src/content/index.js',
        background: './src/background/index.js',
      };
      return webpackConfig;
    },
  }
}

// 修改output
webpackConfig.output = {
  ...webpackConfig.output,
  ...{
    filename: 'static/js/[name].js',
    chunkFilename: 'static/js/[name].js',
  },
}

yarn add -D mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 覆盖已经内置的 plugin 配置
webpackConfig.plugins.map((plugin) => {
  if (plugin instanceof MiniCssExtractPlugin) {
    Object.assign(plugin.options, {
      filename: 'static/css/[name].css',
      chunkFilename: 'static/css/[name].css',
    })
  }
  return plugin
})

yarn add craco-less

const CracoLessPlugin = require('craco-less');

module.exports = {
  webpack: {},
  // craco 提供的插件
  plugins: [
    {
      // 配置 less
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              // 自定义主题（如果有需要，单独文件定义更好一些）
              '@primary-color': '#1DA57A',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ]
}

import "./index.less";

export default function Popup() {
  return (
    <div className="container" style={{ background: 'lightblue' }}>popup</div>
  )
}

import styles from "./index.less";

export default function Popup() {
  return (
    <div className={styles.container} style={{ background: 'lightblue' }}>popup</div>
  )
}

const { loaderByName } = require('@craco/craco');
const lessModuleRegex = /\.less$/;

// craco 提供的插件
plugins: [
  {
    plugin: CracoLessPlugin,
    options: {
      // less loader option
      lessLoaderOptions: {
        lessOptions: {
          /*
              如果项目中有使用TDesign或AntDesign组件库需要自定义主题，可以在modifyVars中添加对应less变量
          */
          modifyVars: {
            "@primary-color": '#2378ff'
          },
          javascriptEnabled: true,
        },
      },
      modifyLessRule(lessRule) {
        lessRule.exclude = lessModuleRegex;
        return lessRule;
      },
      modifyLessModuleRule(lessModuleRule) {
        // configure the file suffix
        lessModuleRule.test = lessModuleRegex;

        // configure the generated local ident name
        const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'));
        cssLoader.options.modules = {
          /* 
              注意这里的命名规则：
              - CRA脚手架创建的项目是可以直接使用css modules的，css文件的命名规则默认是[local]_[hash:base64:5]
              - 这里使用css modules的命名规则
          */

          localIdentName: '[local]_[hash:base64:5]',
        };

        return lessModuleRule;
      },
    },
  },
],

import styles from "./index.less";

export default function Popup() {
  return (
    <div className={styles.container}>popup</div>
  )
}

import styles from "./index.less";

export default function Popup() {
  return (
    <div className={styles.container}>popup</div>
  )
}

.container{
  color: red;
}

import "./index.less";

export default function Content() {
  return (
    <div>Content</div>
  )
}

div {
  background: lightblue;
}

webpackConfig.plugins.map((plugin) => {
  if(plugin instanceof HtmlWebpackPlugin){
    Object.assign(plugin.userOptions, {
      chunks: ['main'],
    })
  }
  return plugin
})

/*global chrome*/
chrome.runtime.onInstalled.addListener(function () {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
    chrome.declarativeContent.onPageChanged.addRules([{
      // 运行插件运行的页面URL规则
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({ pageUrl: {} }),
      ],
      actions: [new window.chrome.declarativeContent.ShowPageAction()]
    }])
  })
})

yarn add antd
// 实现antd的按需加载
yarn add -D babel-plugin-import

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": "css"
      }
    ]
  ]
}

import { Button, Tag } from "antd";
import styles from "./index.less";
import 'antd/dist/antd.css';

export default function Popup() {
  return (
    <div className={styles.container}>
      <Button type="primary">popup</Button>
      <Tag color="magenta">magenta</Tag>
      <Tag color="red">red</Tag>
      <Tag color="volcano">volcano</Tag>
      <Tag color="orange">orange</Tag>
      <Tag color="gold">gold</Tag>
      <Tag color="lime">lime</Tag>
      <Tag color="green">green</Tag>
      <Tag color="cyan">cyan</Tag>
      <Tag color="blue">blue</Tag>
      <Tag color="geekblue">geekblue</Tag>
      <Tag color="purple">purple</Tag>
    </div>
  );
}

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import styles from './index.less'

function Content() {
  return (
    <div className={styles.content}>
      <div
        className={styles.entry}
      ></div>
    </div>
  )
}

const app = document.createElement('div')
app.id = 'bear-container'
document.body.appendChild(app)

ReactDOM.render(<Content />, app)

try {
  let insertScript = document.createElement('script')
  insertScript.setAttribute('type', 'text/javascript')
  insertScript.src = window.chrome.extension.getURL('insert.js')
  document.body.appendChild(insertScript)
} catch (err) { }

.content {
  .entry {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: url("images/icon.png");
    background-size: 100% 100%;
    cursor: pointer;
  }
}

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import styles from './index.less'
import TableDrawer from "./components/table-drawer";
import "antd/dist/antd.css";

function Content() {
  const [mainModalVisiable, setMainModalVisiable] = useState(false)

  return (
    <div className={styles.content}>
      <div
        className={styles.entry}
        onClick={() => {
          setMainModalVisiable(true)
        }}
      ></div>
      <TableDrawer open={mainModalVisiable} onClose={() => setMainModalVisiable(false)} />
    </div>
  )
}

const app = document.createElement('div')
app.id = 'bear-container'
document.body.appendChild(app)

ReactDOM.render(<Content />, app)

import React from "react";
import { Drawer, Table, Tag, Space } from "antd";

export default function TableDrawer({ open, onClose }) {
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "Tags",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";

            if (tag === "loser") {
              color = "volcano";
            }

            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];
  const data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"],
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      tags: ["cool", "teacher"],
    },
  ];
  return (
    <Drawer
      title="数据列表"
      placement="right"
      onClose={onClose}
      open={open}
      width={800}
      // getContainer={() => document.querySelector("#bear-container")}
    >
      <Table columns={columns} dataSource={data} />
    </Drawer>
  );
}

yarn add -D cross-env

"build": "cross-env GENERATE_SOURCEMAP=false && craco build"