【Chrome插件开发】ReRes和request-interceptor源码赏析+复现+插件开发完整解决方案

引言

这个项目主要目的是用前端工程化技术栈复现ReRes和request-interceptor，希望将两者的功能结合起来。request-interceptor是前端开发调试常用工具，提供了多种修改请求的功能，但无法将请求映射到本地的文件。ReRes是JS逆向工程师常用工具，可以用来更改页面请求响应的内容。可以把请求映射到其他的url，也可以映射到本机的文件或者目录。因为manifest version 3无法实现这两个插件的功能，所以这个项目仍然使用manifest version 2。本文假设你了解：

• Chrome插件开发的manifest.json常见字段，尤其是browser_action（popup页面）、options_page（options页面，扩展程序选项）和background（background.js）。

修改请求的代码都是在background.js中实现的。background.js实际上也在一个独立的页面运行。在chrome://extensions/点击插件的“背景页”链接即可对background.js进行调试。

亮点

1. 赏析了若干源码：ReRes、request-interceptor、husky……
2. 探讨了jest配置的若干问题。如：使用“鸭子类型”技巧解决模块不可测试的问题、配置路径别名……
3. 编写构建脚本scripts/build.ts使得构建过程更为灵活。
4. 使用react + vite展示了一套完整的Chrome插件开发的解决方案。包括：开发时预览、单元测试、构建。
5. 对useLocalStorageStatehook源码进行了少量修改，并增加了配套的单元测试用例，以适应Chrome插件开发的需求。

本文52pojie：https://www.52pojie.cn/thread-1757481-1-1.html

本文CSDN：https://blog.csdn.net/hans774882968/article/details/129483966

本文juejin：https://juejin.cn/post/7209625823581601848

作者：hans774882968以及hans774882968以及hans774882968

后续还会更新：仿request-interceptor规则组、批量导入规则、react + vite项目引入OB混淆……

Chrome插件ReRes源码赏析

popup页面和options页面和background.js唯一的联系就是，其他页面需要将数据写入背景页的localStorage：

    var bg = chrome.extension.getBackgroundPage();

    //保存规则数据到localStorage
    function saveData() {
        $scope.rules = groupBy($scope.maps, 'group');
        bg.localStorage.ReResMap = angular.toJson($scope.maps);
    }

background.js注释版源码如下：

var ReResMap = [];
var typeMap = {
    "txt"   : "text/plain",
    "html"  : "text/html",
    "css"   : "text/css",
    "js"    : "text/javascript",
    "json"  : "text/json",
    "xml"   : "text/xml",
    "jpg"   : "image/jpeg",
    "gif"   : "image/gif",
    "png"   : "image/png",
    "webp"  : "image/webp"
}
// 从背景页的localStorage读取ReResMap
function getLocalStorage() {
    ReResMap = window.localStorage.ReResMap ? JSON.parse(window.localStorage.ReResMap) : ReResMap;
}

// xhr请求本地文件的url，进行文本拼接，转为data url
function getLocalFileUrl(url) {
    var arr = url.split('.');
    var type = arr[arr.length-1];
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, false);
    xhr.send(null);
    var content = xhr.responseText || xhr.responseXML;
    if (!content) {
        return false;
    }
    content = encodeURIComponent(
        type === 'js' ?
        content.replace(/[\u0080-\uffff]/g, function($0) {
            var str = $0.charCodeAt(0).toString(16);
            return "\\u" + '00000'.substr(0, 4 - str.length) + str;
        }) : content
    );
    return ("data:" + (typeMap[type] || typeMap.txt) + ";charset=utf-8," + content);
}

// 看MDN即可，https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest
chrome.webRequest.onBeforeRequest.addListener(function (details) {
        // 这个url会在循环中被修改
        var url = details.url;
        for (var i = 0, len = ReResMap.length; i < len; i++) {
            var reg = new RegExp(ReResMap[i].req, 'gi');
            if (ReResMap[i].checked && typeof ReResMap[i].res === 'string' && reg.test(url)) {
                if (!/^file:\/\//.test(ReResMap[i].res)) {
                    // 普通url，只进行正则替换
                    do {
                        url = url.replace(reg, ReResMap[i].res);
                    } while (reg.test(url))
                } else {
                    do {
                        // file协议url，先正则替换，再转为data url
                        url = getLocalFileUrl(url.replace(reg, ReResMap[i].res));
                    } while (reg.test(url))
                }
            }
        }
        return url === details.url ? {} : { redirectUrl: url };
    },
    {urls: [""]},
    ["blocking"]
);

getLocalStorage();
window.addEventListener('storage', getLocalStorage, false);

Chrome插件request-interceptor background.js源码赏析

request-interceptor作者说没有开源，但我们仍然能轻易找到其background.js地址。幸好没有特意进行混淆

1. 安装插件。
2. 以macOS为例，执行命令：open ~/Library/Application\ Support/Google/Chrome/Default/Extensions，打开Chrome插件安装路径。
3. 根据插件ID找到对应的文件夹。

如何获得request-interceptor的background.js所使用的数据结构：阅读源码后知道，只需要在background.js控制台运行以下代码即可：

let dataSet1 = {};
let storageKey1 = '__redirect__chrome__extension__configuration__vk__';
chrome.storage.local.get(storageKey1, config => {
    dataSet1 = {};
    Object.assign(dataSet1, (config || {})[storageKey1] || {});
});

代码比较长就不完整贴出啦。带注释版源码地址，注释中包含对数据结构的讲解～

可以学到什么：

1. 作者设计规则所执行的操作的时候，借鉴了http状态码设计的思想。add-request-header、add-response-header等操作的类型都是“add”，于是可以有下面的代码：

const modifyHeaders = (headers, action, name, value) => {
  if (!headers || !action) {
    return;
  }
  if (action === 'add') {
    headers.set(name, value);
  } else if (action === 'modify') {
    if (headers.has(name)) {
      headers.set(name, value);
    }
  } else if (action === 'delete') {
    headers.delete(name);
  }
};
// 调用
actionType = type.split('-')[0];
modifyHeaders(obj.responseHeaders, actionType, updatedName, updatedValue);

这一技巧可以减少一些重复的if-else。

技术选型

React Hooks + vite + jest。使用下面的命令来创建：

npm init @vitejs/app

如果对这条命令所做的事感兴趣，可以看参考链接4

但这条命令创建出的项目的文件结构是为构建单页应用而服务的，并不符合Chrome插件开发的需要，我们需要进行改造。我们期望的Chrome插件的manifest.json如下：

{
  "manifest_version": 2,
  "name": "hans-reres",
  "version": "0.0.0",
  "description": "hans-reres旨在用前端工程化技术栈复现ReRes。ReRes是JS逆向工程师常用工具，可以用来更改页面请求响应的内容。通过指定规则，您可以把请求映射到其他的url，也可以映射到本机的文件或者目录。ReRes支持单个url映射，也支持目录映射。",
  "browser_action": {
    "default_icon": "assets/icon.png",
    "default_title": "hans-reres-popup",
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "assets/icon.png",
    "48": "assets/icon48.png"
  },
  "options_page": "options.html",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "permissions": [
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "",
    "unlimitedStorage"
  ],
  "homepage_url": "https://github.com/Hans774882968/hans-reres"
}

所以我们需要：

1. manifest.json。
2. background.ts。
3. popup.html和它引用的src/popup/popup.tsx。
4. options.html和它引用的src/options/options.tsx。
5. 一系列供tsx文件和background.ts共同使用的代码。
6. 静态文件，放在src/assets文件夹下。

核心是希望构建流程用到这些文件，生成符合Chrome插件结构的产物，详见下文《构建流程》一节。

配置stylelint

根据参考链接1，首先

npm install stylelint stylelint-config-standard stylelint-order postcss-less -D

然后添加.stylelintrc.cjs和.stylelintignore，最后package.json scripts添加一条命令：

"lint:s": "stylelint \"**/*.{css,scss,less}\" --fix",

即可通过npm run lint:sformat less文件了。

更多stylelint规则介绍见参考链接2

vscode配置保存自动修复

vscode打开设置，再打开settings.json：

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true,
    },
}

若不生效，尝试重启vscode。

配置postcss、CSS Modules

react + vite项目已经内置postcss，可以从package-lock.json中看出：

    "vite": {
      "requires": {
        "esbuild": "^0.16.14",
        // 省略其他
        "postcss": "^8.4.21",
      },
      "dependencies": {
        "rollup": {
          "requires": {
            "fsevents": "~2.3.2"
          }
        }
      }
    },

postcss-preset-env

装一下postcss-preset-env插件，这个插件支持css变量、一些未来css语法以及自动补全：

npm i postcss-preset-env -D

添加postcss.config.cjs：

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [postcssPresetEnv()]
};

配置postcss-preset-env插件前：

._app_1afpm_1 {
    padding: 20px;
    user-select: none;
}

配置该插件后：

._app_1afpm_1 {
    padding: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

flex-gap-polyfill

这个插件的配置步骤和上面的一样，不赘述。

代码：

.app {
  padding: 20px;
  display: flex;
  gap: 20px;
}

效果：

._app_13518_1 {
    padding: 20px;
    display: flex;
    --fgp-gap: var(--has-fgp, 20px);
    gap: 20px;
    gap: var(--fgp-gap, 0px);
    margin-top: var(--fgp-margin-top, var(--orig-margin-top));
    margin-left: var(--fgp-margin-left, var(--orig-margin-left));
}
._app_13518_1 {
    --has-fgp: ;
    --element-has-fgp: ;
    pointer-events: none;
    pointer-events: var(--has-fgp) none;
    --fgp-gap-row: 20px;
    --fgp-gap-column: 20px;
}
._app_13518_1 {
    --fgp-margin-top: var(--has-fgp) calc(var(--fgp-parent-gap-row, 0px) / (1 + var(--fgp--parent-gap-as-decimal, 0)) - var(--fgp-gap-row) + var(--orig-margin-top, 0px)) !important;
    --fgp-margin-left: var(--has-fgp) calc(var(--fgp-parent-gap-column, 0px) / (1 + var(--fgp--parent-gap-as-decimal, 0)) - var(--fgp-gap-column) + var(--orig-margin-left, 0px)) !important;
}

flex-gap-polyfill踩坑

但要注意flex-gap-polyfill使用上有些坑：

1. 当你有这样的结构：
   ，那么.flex-and-gap会因为使用了负margin，导致它右侧的div错位。解决方案：在.flex-and-gap外面再套一层div，让.flex-and-gap的负margin不产生影响。
2. 打包体积增大。在只使用了3处flex-gap的情况下，css大小3.17kb -> 11.0kb。

CSS Modules VSCode中点击查看样式

react + vite项目使用less + CSS Modules很简单。但使用VSCode时如何在不跳到less文件的前提下方便地查看样式？根据参考链接12，安装VSCode CSS Modules插件后，用小驼峰命名styles.xxContainer即可点击查看样式，但类名也要一起更改为小驼峰命名法。

另外，如果配置了stylelint，还需要修改selector-class-pattern：

{ 'selector-class-pattern': '^[a-z]([A-Z]|[a-z]|[0-9]|-)+$' }

配置husky + commitlint

根据参考链接8

（1）项目级安装commitlint

npm i -D @commitlint/config-conventional @commitlint/cli

（2）添加commitlint.config.cjs（如果package.json配置了"type": "module"就需要.cjs，否则git commit时会报错）

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {}
};

（3）安装husky：npm i -D husky

（4）对于husky版本>=5.0.0，根据官方文档，首先安装git钩子：npx husky install，运行后会生成.husky/_文件夹，下面有.gitignore和husky.sh文件，都是被忽略的。接下来添加几个钩子：

npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-commit "npm run lint:s"
npx husky add .husky/commit-msg 'npx commitlint --edit $1'

会生成.husky/commit-msg和.husky/pre-commit两个文件。不用命令，自己手动编辑也是可行的，分析过程见下文《husky add、install命令解析》。

接下来可以尝试提交了。效果：

⧗   input: README添加husky + commitlint
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

husky add、install命令解析

vscode调试node cli程序

创建.vscode/launch.json：

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node-terminal",
      "request": "launch",
      "command": "npx husky add .husky/pre-commit 'npm run lint:s'",
      "name": "npx husky add",
      "skipFiles": [
        "/**"
      ],
    }
  ]
}

之后可以直接在“运行和调试”选择要执行的命令了。

husky add

命令举例：npx husky add .husky/commit-msg 'npx commitlint --edit $1'

cli的入口node_modules/husky/lib/bin.js：

const [, , cmd, ...args] = process.argv;
const ln = args.length;
const [x, y] = args;
const hook = (fn) => () => !ln || ln > 2 ? help(2) : fn(x, y);
const cmds = {
    install: () => (ln > 1 ? help(2) : h.install(x)),
    uninstall: h.uninstall,
    set: hook(h.set),
    add: hook(h.add),
    ['-v']: () => console.log(require(p.join(__dirname, '../package.json')).version),
};
try {
    cmds[cmd] ? cmds[cmd]() : help(0);
}

x, y分别表示文件名.husky/commit-msg和待添加的命令npx commitlint --edit $1。h就是node_modules/husky/lib/index.js。找到相关函数：

function set(file, cmd) {
    const dir = p.dirname(file);
    if (!fs.existsSync(dir)) {
        throw new Error(`can't create hook, ${dir} directory doesn't exist (try running husky install)`);
    }
    fs.writeFileSync(file, `#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

${cmd}
`, { mode: 0o0755 });
    l(`created ${file}`); // 创建文件后会输出 husky - created .husky/pre-commit
}

function add(file, cmd) {
    if (fs.existsSync(file)) {
        fs.appendFileSync(file, `${cmd}\n`);
        l(`updated ${file}`); // 在已有文件后添加后则会输出 husky - updated .husky/pre-commit
    }
    else {
        set(file, cmd);
    }
}

总而言之，不执行这条命令，直接在.husky/commit-msg之后加命令是等效的。

husky install

此时我们也可以快速了解npx husky install所做的事。

const git = (args) => cp.spawnSync('git', args, { stdio: 'inherit' });
function install(dir = '.husky') {
    if (process.env.HUSKY === '0') {
        l('HUSKY env variable is set to 0, skipping install');
        return;
    }
    /* 执行 git rev-parse 命令，正常情况下无输出
    git(['rev-parse']){
      output: (3) [null, null, null]
      pid: 90205
      signal: null
      status: 0
      stderr: null
      stdout: null
    }
    */
    if (git(['rev-parse']).status !== 0) {
        l(`git command not found, skipping install`);
        return;
    }
    const url = 'https://typicode.github.io/husky/#/?id=custom-directory';
    // npx husky install 的dir参数不能跳出项目根目录
    if (!p.resolve(process.cwd(), dir).startsWith(process.cwd())) {
        throw new Error(`.. not allowed (see ${url})`);
    }
    if (!fs.existsSync('.git')) {
        throw new Error(`.git can't be found (see ${url})`);
    }
    try {
        // 创建“.husky/_”文件夹
        fs.mkdirSync(p.join(dir, '_'), { recursive: true });
        // 创建“.husky/_/.gitignore”文件
        fs.writeFileSync(p.join(dir, '_/.gitignore'), '*');
        // .husky/_/husky.sh 来源于 node_modules
        fs.copyFileSync(p.join(__dirname, '../husky.sh'), p.join(dir, '_/husky.sh'));
        // 执行 git config core.hooksPath .husky 命令
        // 同理取消githooks只需要执行 git config --unset core.hooksPath
        const { error } = git(['config', 'core.hooksPath', dir]);
        if (error) {
            throw error;
        }
    }
    catch (e) {
        l('Git hooks failed to install');
        throw e;
    }
    l('Git hooks installed');
}

配置jest

根据参考链接3：

1、安装jest：

npm install jest @types/jest -D

2、生成jest配置文件：

npx jest --init

生成的jest.config.ts：

import { Config } from '@jest/types';
/*
 * For a detailed explanation regarding each configuration property and type check, visit:
 * https://jestjs.io/docs/configuration
 */

const config: Config.InitialOptions = {
  // Automatically clear mock calls, instances, contexts and results before every test
  clearMocks: true,
  // A preset that is used as a base for Jest's configuration
  preset: 'ts-jest',
  restoreMocks: true,
  testEnvironment: 'jsdom'
};

export default config;

注意：

1. 即使指定测试环境是jsdom，我们发起向本地文件的XHR请求时仍会报跨域错误，所以发起XHR请求的模块必须mock。
2. 对于use-local-storage-state包的测试文件test/useLocalStorageStateBrowser.test.tsx（我将use-local-storage-state包的代码复制到自己的项目里，进行了更改，以满足Chrome插件开发的需求），必须指定测试环境是jsdom。
3. 指定测试环境是jsdom时需要npm install jest-environment-jsdom -D。

3、配置babel：

npm install babel-jest @babel/core @babel/preset-env @babel/preset-typescript -D

4、创建babel.config.cjs

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' }}],
    '@babel/preset-typescript'
  ]
};

5、如果你在第2步创建的jest配置文件是ts，则还需要装ts-node，否则会报错：Jest: 'ts-node' is required for the TypeScript configuration files.。抛出这个错误的代码可以自己顺着stack trace往上找一下~

npm install ts-jest ts-node -D

总的来说，只需要：（1）安装若干devDependencies的npm包。（2）创建babel.config.cjs和jest.config.ts。

jest不支持es模块的npm包（如：lodash-es）如何解决？

根据参考链接17，这是因为lodash-es是一个es module且没有被jest转换。

（1）安装相关依赖：

npm install -D babel-jest @babel/core @babel/preset-env babel-plugin-transform-es2015-modules-commonjs

（2）jest.config.ts配置：

import { Config } from '@jest/types';
/*
 * For a detailed explanation regarding each configuration property and type check, visit:
 * https://jestjs.io/docs/configuration
 */

const config: Config.InitialOptions = {
  preset: 'ts-jest', // 这个和以前一样，保持不变
  // 对于js文件用babel-jest转换，ts、tsx还是用ts-jest转换
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.js$': 'babel-jest'
  },
  // 为了效率，默认是忽略node_modules里的文件的，因此要声明不忽略 lodash-es
  transformIgnorePatterns: [
    '/node_modules/(?!lodash-es)'
  ]
}

（3）含泪把之前的babel.config.ts改为babel.config.cjs，配置babel插件babel-plugin-transform-es2015-modules-commonjs：

module.exports = {
  plugins: ['transform-es2015-modules-commonjs'], // 刚刚安装的
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' }}],
    '@babel/preset-typescript'
  ]
};

为什么要改成.cjs？相同的内容，只不过后缀名为.js不行嘛？亲测不行，报错You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.。这是因为vite脚手架创建的项目package.json有一句万恶的声明："type": "module"。

构建流程

《技术选型》一节提到，我们需要打包出manifest.json；popup.html及其配套CSS、JS；options.html及其配套CSS、JS；background.js；静态资源。这就是一个典型Chrome插件的构成。我们需要设计一个构建流程，生成上述产物。下面列举我遇到的几个基本问题和解决方案：

1. 静态资源：直接用rollup-plugin-copy复制到manifest.json定义的位置即可。
2. manifest.json需要修改某些字段：vite没有loader的概念，所以需要想其他办法。可以尝试构造一个专门import 'xx.json'导入json文件的入口ts文件，然后匹配xx.json进行处理，但这种写法获得的文件内容，是json文本转化为js对象的结果，不是很简洁。最终我的做法是：在writeBundle阶段，先读入manifest.json，再进行修改，最后写入目标位置，类似于rollup-plugin-copy。代码实现传送门
3. background.ts和popup.html / options.html依赖的tsx文件希望共享某些代码，但不希望background.js打包结果出现import语句，因为这会导致插件无法工作：我们发现background.ts的可靠性可以靠单测来保证，于是只需要保证popup.html / options.html的本地预览功能可用。所以解决方案异常简单，构建2次即可。构建命令修改为tsc && vite build && vite build --config vite-bg.config.ts。

至此，Chrome插件开发与普通的⌨️前端开发没有任何区别。

shell脚本：输出构建耗时

令人震惊的是，vite缺乏一个输出构建耗时的可靠插件（0 star的插件还是有的）！这个小需求可以自己写vite插件来解决，也可以用一个更简单的方式来解决：写一个shell脚本。

我们在配置jest时安装了ts-node，因此这里可以直接写ts脚本。scripts/build.ts传送门：

import spawn from 'cross-spawn';
import chalk from 'chalk';

function main () {
  const startTime = new Date().valueOf();
  const cmds = [
    'npx tsc',
    'npx vite build',
    'npx vite build --config vite-bg.config.ts'
  ];
  const buildCmd = cmds.join(' && ');
  console.log(chalk.greenBright('Build command:', buildCmd));
  const spawnReturn = spawn.sync(buildCmd, [], { stdio: 'inherit', shell: true });
  if (spawnReturn.error) {
    console.error(chalk.redBright('Build failed with error'), spawnReturn.error);
    return;
  }
  const duration = ((new Date().valueOf() - startTime) / 1000).toFixed(2);
  console.log(chalk.greenBright(`✨  Done in ${duration}s.`));
}

main();

1. cross-spawn可以理解成一个跨平台版的child_process.spawn，避免自己处理跨平台适配。spawn.sync就是child_process.spawnSync。参考链接5
2. chalk用来输出彩色文本。
3. 添加shell: true可解决MAC上运行报错Error: spawnSync ENOENT导致无法构建的问题，参考链接7

根据参考链接6，构建命令要相应地修改为：

node --loader ts-node/esm ./scripts/build.ts

命令并不能直接使用ts-node scripts/build.ts，因为会报错TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"。

相关依赖：

npm install chalk cross-spawn @types/cross-spawn ts-node -D

ES6 import json：–experimental-json-modules 选项

vite.config.ts可以直接import pkg from './package.json';但我们用ts-node运行的脚本不能。为了解决这个问题，可以尝试：

1. import assertion。import pkg from '../package.json' assert { type: 'json' };。但只能运行于高版本的node。
2. --experimental-json-modules选项。把构建命令改为：node --loader ts-node/esm --experimental-json-modules scripts/build.ts即可。这样低版本node也支持了～

项目配置路径别名

根据参考链接15，配置路径别名一般分为：cli支持、IDE支持两部分，逐个击破即可。

vite配置路径别名

cli支持：vite.config.ts配置resolve.alias。

defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
});

IDE支持：tsconfig.json配置compilerOptions.paths。

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*"
      ],
    }
  }
}

jest配置路径别名

cli支持：jest.config.ts

const config: Config.InitialOptions = {
  moduleNameMapper: {
    '^@/(.*)$': '/src/$1'
  },
};

IDE支持：依旧是配置tsconfig.json的compilerOptions.paths。但有一个问题：VSCode只认tsconfig.json，不认自己指定的tsconfig.test.json。最后还是让ts-jest直接读tsconfig.json配置了，又不是不能用

引入i18n

根据参考链接9，我们可以用react-i18next快速为react项目引入i18n。

（1）安装依赖

npm i i18next react-i18next i18next-browser-languagedetector

• react-i18next是一个i18next插件，用来降低 react 的使用成本。
• i18next-browser-languagedetector是一个i18next插件，它会自动检测浏览器的语言。

（2）我们建一个文件夹src/i18n存放i18n相关的代码。i18n需要考虑的一个核心问题是：资源文件的加载、使用策略。为了简单，我们直接使用.ts文件。创建src/i18n/i18n-init.ts如下。

1. i18n.use注册i18next插件。
2. 这里封装了一个$gt函数，期望能直接调用$gt而不需要在组件里多写一句const { t } = useTranslation()。但麻烦的是，t函数必须直接在组件中引用，甚至不能在组件内定义的函数里调用，否则它会直接抛出错误让我们整个应用崩溃……幸好本插件规模很小，这个问题可以容忍。

import i18n from 'i18next';
import { initReactI18next, useTranslation } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import en from './en';
import zh from './zh';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    },
    resources: {
      en: {
        translation: en
      },
      zh: {
        translation: zh
      }
    }
  });

export const $gt = (key: string | string[]) => {
  const { t } = useTranslation();
  return t(key);
};

export const langOptions = [
  { value: 'en', label: 'English' },
  { value: 'zh', label: '中文' }
];

export default i18n;

（3）语言切换功能。useTranslation()也会返回一个i18n对象，我们调用i18n.changeLanguage即可切换语言。

/*
export const langOptions = [
  { value: 'en', label: 'English' },
  { value: 'zh', label: '中文' }
];
*/
const changeLang = (langValue: string) => {
  i18n.changeLanguage(langValue);
};


动态切换暗黑主题
根据参考链接10，antd5提供了动态切换主题的能力，只需要使用ConfigProvider：
import theme from 'antd/es/theme';
import ConfigProvider from 'antd/es/config-provider';

    


使用预设算法是成本最低的方式，当然功能也最局限。为简单起见，我们就采用这种方式。
首先需要一个bool来控制当前是暗色主题还是灰色主题：
const [preferDarkTheme, setPreferDarkTheme] = useLocalStorageState('preferDarkTheme', {
  defaultValue: true
});

导航栏的开关只需要调用setPreferDarkTheme即可切换主题。
另外，项目有一些组件没有用antd，不在预设算法的覆盖范围内，比如导航栏。不优美但肯定最简单的解决方案就是：我们在根组件定义各个主题的类名prefix：
enum ClassNamePrefix {
  DARK = 'custom-theme-dark',
  DEFAULT = 'custom-theme-default'
}
const curClassNamePrefix = preferDarkTheme ? ClassNamePrefix.DARK : ClassNamePrefix.DEFAULT;

然后通过Context传给子组件：



子组件直接消费即可：


插件核心功能：数据结构设计
我们希望这个插件支持：

重定向到某URL，包括file://这种指向本地文件的（来自ReRes）。
对于GET请求，可以进行URLSearchParams的增删改。
对请求头进行增删改。
对响应头进行增删改。
拦截请求。
……

拟定这些需求是参考了Chrome插件request-interceptor的background.js的核心代码，如下：
const applyRuleActions = (rule, details, obj) => {
    if (!rule.actions || !rule.enabled) {
        return;
    }

    // const count = countMap.get(rule.id) ?? 0;
    // countMap.set(rule.id, count + 1);

    const matches = getMatches(rule, details);

    (rule.actions || []).forEach((action) => {
        if (!action.details) {
            action.details = {};
        }

        const {type, details: {name, value}} = action;
        const updatedName = patternMatchingReplace(name, matches);
        const updatedValue = patternMatchingReplace(value, matches);

        let actionType;

        switch (type) {
            case 'block-request':
                obj.cancel = true; break;
            case 'add-request-header':
            case 'modify-request-header':
            case 'delete-request-header':
                actionType = type.split('-')[0];
                modifyHeaders(obj.requestHeaders, actionType, updatedName, updatedValue);
                obj.requestHeadersModified = true;
                break;
            case 'add-response-header':
            case 'modify-response-header':
            case 'delete-response-header':
                actionType = type.split('-')[0];
                modifyHeaders(obj.responseHeaders, actionType, updatedName, updatedValue);
                obj.responseHeadersModified = true;
                break;
            case 'add-query-param':
            case 'modify-query-param':
            case 'delete-query-param':
                actionType = type.split('-')[0];
                modifyQueryParams(obj.queryParams, actionType, updatedName, updatedValue);
                obj.queryParamsModified = true;
                break;
            case 'redirect-to':
                // Preflight requests can not be redirected
                if (details.method.toLowerCase() !== 'options') {
                    obj.redirectUrl = updatedValue;
                }

                break;
            case 'throttle':
                obj.redirectUrl = `https://deelay.me/${updatedValue}/${details.url}`; break;
        }

    });
};

对需求进行简单分析后，我认为background.ts的一条规则这样描述看上去还算合理，完整代码：
// 为节省篇幅，只展示了一部分
export enum RewriteType {
  SET_UA = 'Set UA',
  REDIRECT = 'Redirect',
  ADD_QUERY_PARAM = 'Add Query Param'
}
// localStorage中的核心数据结构：{ hansReResMap: RequestMappingRule[] }
export interface RequestMappingRule {
  req: string
  action: Action
  checked: boolean
}

export interface Action {
  type: RewriteType
}

export interface RedirectAction extends Action {
  res: string
}

export interface SetUAAction extends Action {
  newUA: string
}

export interface AddQueryParamAction extends Action {
  name: string
  value: string
}

export interface ModifyQueryParamAction extends Action {
  name: string
  value: string
}

export interface DeleteQueryParamAction extends Action {
  name: string
}
// 在此仅展示对 URLSearchParams 的操作
export type QueryParamAction = AddQueryParamAction | ModifyQueryParamAction | DeleteQueryParamAction;

export function isAddQueryParamAction (o: Action): o is AddQueryParamAction {
  return o.type === RewriteType.ADD_QUERY_PARAM;
}

export type ReqHeaderAction = AddReqHeaderAction | ModifyReqHeaderAction | DeleteReqHeaderAction;

export function isReqHeaderAction (o: Action): o is ReqHeaderAction {
  return isAddReqHeaderAction(o) ||
    isModifyReqHeaderAction(o) ||
    isDeleteReqHeaderAction(o);
}

前文提到，request-interceptor源码设计描述操作的常量(add|modify|delete)-response-header时，借鉴了http状态码的思想，第一个词表示操作类型。但我不打算这么写，而是采用类型安全但比较啰嗦的写法。
popup、options页面需要用到的，各类型Action提供的默认值如下：
export const actionDefaultResultValueMap = {
  [RewriteType.REDIRECT]: { res: 'https://baidu.com' },
  [RewriteType.SET_UA]: { newUA: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 FingerBrowser/1.5' },
  [RewriteType.BLOCK_REQUEST]: {},
  [RewriteType.ADD_QUERY_PARAM]: { name: 'role', value: 'acmer' },
  [RewriteType.MODIFY_QUERY_PARAM]: { name: 'rate', value: '2400' },
  [RewriteType.DELETE_QUERY_PARAM]: { name: 'param_to_delete' },
  [RewriteType.ADD_REQ_HEADER]: { name: 'X-Role', value: 'ctfer' },
  [RewriteType.MODIFY_REQ_HEADER]: { name: 'X-Rate', value: '2400' },
  [RewriteType.DELETE_REQ_HEADER]: { name: 'Request-Header' },
  [RewriteType.ADD_RESP_HEADER]: { name: 'Y-Role', value: 'acmer' },
  [RewriteType.MODIFY_RESP_HEADER]: { name: 'Y-Rate', value: '2400' },
  [RewriteType.DELETE_RESP_HEADER]: { name: 'Response-Header' }
};

RequestMappingRule的数据结构设计符合直觉，但这个设计对象里有对象，引入了一个问题：如果想直接使用antd的Form组件，Form.useForm()里的action属性（是Action接口）应该是无法直接映射到表单的字段。如何解决呢？借鉴适配器模式，我引入了以下数据结构（有更好的做法请佬们教教！）：
export interface FlatRequestMappingRule {
  req: string
  checked: boolean
  action: RewriteType
  res: string
  newUA: string
  name: string
  value: string
}

然后在Form组件onFinish事件里将FlatRequestMappingRule翻译为RequestMappingRule，这样就能顺利写入localStorage啦。同理，从localStorage加载RequestMappingRule后，也要翻译为FlatRequestMappingRule才能顺利输入Form组件，渲染Edit对话框。两者相互转化的函数如下：
export function transformIntoRequestMappingRule (o: FlatRequestMappingRule): RequestMappingRule {
  const action: Action = (() => {
    if (o.action === RewriteType.REDIRECT) return { type: o.action, res: o.res };
    if (o.action === RewriteType.SET_UA) return { type: o.action, newUA: o.newUA };
    return { type: o.action, name: o.name, value: o.value };
  })();
  return {
    req: o.req,
    checked: o.checked,
    action
  };
}

export function transformIntoFlatRequestMappingRule (o: RequestMappingRule): FlatRequestMappingRule {
  const ret: FlatRequestMappingRule = {
    req: o.req,
    checked: o.checked,
    action: o.action.type,
    res: '',
    newUA: '',
    name: '',
    value: ''
  };
  return { ...ret, ...o.action };
}

缺点：

对于新增的Action类型，不鼓励新增字段名，因为改动会更大，一般都是直接使用已有的name, value属性。这恰好和request-interceptor的源码一致。

插件核心功能：正式实现
赏析ReRes和request-interceptor两个插件的源码，并结合typescript进行数据结构设计后，我们就可以开始实现本插件的核心功能了。代码传送门
模仿ReRes写一个加载数据结构的函数：
function getMapFromLocalStorage (): RequestMappingRule[] {
  const hansReResMap = window.localStorage.getItem(hansReResMapName);
  return hansReResMap ? JSON.parse(hansReResMap) : [];
}

值得注意的是，ReRes源码使用了
window.addEventListener('storage', getLocalStorage, false);

在popup, options页面更新localStorage后更新数据结构，于是可以直接将ReResMap作为全局变量，理论上可以提高性能。但我这边尝试使用这行代码发现并没有及时更新，因此没有使用全局变量，而是退而求其次，在每个listener执行时都重新调用getMapFromLocalStorage加载。
因为测试是保证background.ts可靠性的唯一手段，所以为了可测性，我把大部分代码都移动到src/utils.ts了。期间遇到了一个typescript中才有的问题：chrome在测试环境中不存在，因此在不mock的情况下，只有将代码移动到其他文件，才能测试。但有些类型依赖chrome变量，如：import HttpHeader = chrome.webRequest.HttpHeader;。因为HttpHeader字段少，所以可以使用“鸭子类型”的技巧来解决这个问题：
export interface MockHttpHeader {
  name: string;
  value?: string | undefined;
  binaryValue?: ArrayBuffer | undefined;
}

PS：鸭子类型的介绍，来自《JavaScript设计模式与开发实践》Chap1。

JavaScript 是动态语言，无需进行类型检测，可以调用对象的任意方法。这一切都建立在鸭子类型上，即：如果它走起路来像鸭子，叫起来像鸭子，那它就是鸭子。


鸭子模型指导我们关注对象的行为，而不是对象本身，也就是关注 Has-A，而不是 Is-A。利用鸭子模式就可以实现动态类型语言一个原则"面向接口编程而不是面向实现编程"。

之后HttpHeader类型的变量都可以用MockHttpHeader代替，而两者是兼容的，所以ts不会报类型错误。
onBeforeRequest的入口，我模仿了request-interceptor的写法，优先级cancel > redirect > queryParamsModified。唯一不同点是，request-interceptor为了简化代码，实现为一个对returnObject的副作用；而我实现的processRequest是一个纯函数：
const onBeforeRequestListener = (details: WebRequestBodyDetails) => {
  const hansReResMap = getMapFromLocalStorage();
  const actionDescription = processRequest(details.url, hansReResMap);

  const { redirectUrl = '', cancel, queryParamsModified } = actionDescription;
  // 约定优先级：cancel > redirect > queryParamsModified
  if (cancel) {
    return { cancel: true };
  }
  if (redirectUrl) {
    try {
      // Unchecked runtime.lastError: redirectUrl 'baidu.com/' is not a valid URL.
      // 针对Chrome的这种报错，我们只会尝试给出一个友好点的报错提示，不会擅自阻止报错的产生
      new URL(redirectUrl);
    } catch (e) {
      console.error(`Please make sure that redirectURL '${redirectUrl}' is a valid url when using hans-reres. For example, 'baidu.com' is not a valid url.`);
    }
    return redirectUrl === details.url ? {} : { redirectUrl };
  }
  if (queryParamsModified) {
    const { urlObject } = actionDescription;
    urlObject.search = actionDescription.queryParams.toString();
    return { redirectUrl: urlObject.toString() };
  }
  return {};
};

chrome.webRequest.onBeforeRequest.addListener(
  onBeforeRequestListener,
  { urls: [''] },
  ['blocking']
);

获取到actionDescription后，就按照优先级来决定操作。这里引入了一个限制：读取一系列规则后，对一个请求只有一个操作。request-interceptor引入这个限制是为了简化代码，但这个限制也是合理的。因为用户希望重定向URL时，一般不会希望在重定向后再对新URL的URLSearchParams进行增删改。
重定向时保持URLSearchParams的功能
考虑一个场景：前端开发过程中，希望把GET请求转发到YAPI，来方便地使用Mock数据。但是在request-interceptor中配置重定向规则后，发现会丢失查询字符串。而我在实现重定向规则时，是模仿ReRes，对请求URL进行replace，所以看起来可以保留查询字符串。但面对响应URL有查询字符串的情况，新URL的查询字符串会不符合预期。所以我们在此引入一个小功能：对于重定向规则，在popup, options页面可以勾选是否需要保持查询字符串。若某条重定向规则指出需要保持，则把新URL的查询字符串覆盖为原始URL（未读取规则前的URL）的查询字符串。
首先给RedirectAction加个选项：
export interface RedirectAction extends Action {
  res: string
  keepQueryParams: boolean
}

最后只需要在每次循环获取redirectUrl后，对其进行一个后置处理。
export function overrideQueryParams (urlObject: URL, redirectUrl: string, action: RedirectAction) {
  if (!action.keepQueryParams) return redirectUrl;
  try {
    const redirectUrlObject = new URL(redirectUrl);
    redirectUrlObject.search = urlObject.search;
    redirectUrl = redirectUrlObject.toString();
  } catch (e) {
    console.error('overrideQueryParams() error', e);
  }
  return redirectUrl;
}

Mock Response功能
我的插件的Mock Response功能可以说是前端开发的利器——从此Mock接口返回数据没有任何门槛。这一节就讲述这个功能的实现思路。我们已经从ReRes源码学到：为了实现将请求重定向到本机（即file协议URL），需要先发XHR请求获取本机文件内容，再将其拼接为data协议的URL。于是我们可以在ReRes和我的插件的重定向功能中，直接指定重定向URL为data协议URL，来实现Mock Response功能。但这样不太方便，所以在此我引入一个新的操作类型MockResponseAction：
export interface MockResponseAction extends Action {
  dataType: ResponseType // necessary，background.js 用不到但编辑对话框要用到
  value: string
}

接下来在表单中加一个下拉框，可以选择编程语言。对于选中的编程语言，展示的组件为对应语言的编辑器（可以附加一个“格式化”按钮）。代码传送门
这一块在交互方面的想象空间不小，比如：每种语言提供一个功能强大的编辑器。可惜这里（IDE）空白处太小，写不下
另外，为了可测试性，应该把负责格式化操作的代码和与UI有关的代码隔离开。格式化相关代码
请求头、响应头的处理
listener的代码结构和上述processRequest类似：（1）一个纯函数。（2）返回值包括：要使用到的数据和一系列是否需要进行某操作的bool变量。定义如下：
export type HeadersMap = Map<string, string>;

export interface ProcessHeadersReturn {
  headersModified: boolean
  requestHeadersMap: HeadersMap
  responseHeadersMap: HeadersMap
}

实现难度较低，不再赘述。相关代码传送门：background.ts、utils.ts
details.requestHeaders和details.responseHeaders的类型是chrome.webRequest.HttpHeader[] | undefined，这个数据结构对修改操作不友好。request-interceptor为了降低修改操作的时间复杂度，引入了转化为Map的前置操作和重新转为数组的后置操作。咱们用TS模仿实现时，需要再次使用“鸭子类型”的技巧，相关代码如下：
export interface MockHttpHeader {
  name: string;
  value?: string | undefined;
  binaryValue?: ArrayBuffer | undefined;
}

export type HeadersMap = Map<string, string>;

export function mapToHttpHeaderArray (mp: HeadersMap): MockHttpHeader[] {
  return [...mp.entries()].map(([name, value]) => ({ name, value }));
}
// getHeadersMap 直接在 listener 中调用
export function getHeadersMap (headers: MockHttpHeader[]) {
  return new Map(headers.map(header => [header.name, header.value || '']));
}

读取POST请求体内容
遗憾的是，根据参考链接14，Chrome永远不会支持POST请求体的修改。但我们依旧可以读取请求体，所以仍然可以定这么一个需求：若请求体的JSON某字段包含特定的name，则拦截请求。
查看MDN可知，请求体类型定义如下：
export interface UploadData {
    /** Optional. An ArrayBuffer with a copy of the data. */
    bytes?: ArrayBuffer | undefined;
    /** Optional. A string with the file's path and name. */
    file?: string | undefined;
}

export interface WebRequestBody {
    /** Optional. Errors when obtaining request body data. */
    error?: string | undefined;
    /**
     * Optional.
     * If the request method is POST and the body is a sequence of key-value pairs encoded in UTF8, encoded as either multipart/form-data, or application/x-www-form-urlencoded, this dictionary is present and for each key contains the list of all values for that key. If the data is of another media type, or if it is malformed, the dictionary is not present. An example value of this dictionary is {'key': ['value1', 'value2']}.
     */
    formData?: { [key: string]: string[] } | undefined;
    /**
     * Optional.
     * If the request method is PUT or POST, and the body is not already parsed in formData, then the unparsed request body elements are contained in this array.
     */
    raw?: UploadData[] | undefined;
}

这给我们读取请求体的JSON制造了不少困难。我们有必要写一个方法，负责从ArrayBuffer中读取到请求体的JSON对象。实现如下：
// 调用
const postBodyList = parsePostBody(details.requestBody?.raw);

export function parsePostBody (rawData: MockUploadData[] | undefined): plainObject[] {
  if (!rawData) return [];
  return rawData.filter((item) => {
    let strData = '';
    try {
      strData = new TextDecoder().decode(item.bytes);
    } catch (e) {
      return false;
    }
    if (!isValidJson(strData)) return false;
    const obj = JSON.parse(strData);
    if (!isPlainObject(obj)) return false;
    return true;
  }).map((item) => JSON.parse(new TextDecoder().decode(item.bytes)));
}

这里为了避免引入chrome导致无法测试，再次使用了“鸭子类型”的技巧：
export type plainObject = Record<string, unknown>;

export interface MockUploadData {
  bytes?: ArrayBuffer | undefined;
  file?: string | undefined;
}

有读取JSON对象的能力后，其他部分的实现都很简单，看相关代码实现即可：background.ts、utils.ts。
另外，为了读取请求体数据，需要添加requestBody权限：
chrome.webRequest.onBeforeRequest.addListener(
  onBeforeRequestListener,
  { urls: [''] },
  ['blocking', 'requestBody']
);

lodash按需导入：tree-shaking
一般我们只使用lodash的少数函数，但构建时会将所有模块打包进来。可以按需导入嘛？根据参考链接18和参考链接19，可以使用lodash-es。vite项目基本上正常import，比如：import { isPlainObject } from 'lodash-es';，就可以获得tree-shaking的能力了。我遇到的问题见上文《jest不支持es模块的npm包（如：lodash-es）如何解决？》
jest如何测试使用了TextEncoder和TextDecoder的模块？
如果用到了TextEncoder和TextDecoder，那么jest运行会报错。目前我使用的是一个workaround（参考链接16）：
（1）jest.config.ts
const config: Config.InitialOptions = {
  setupFilesAfterEnv: ['/test/setupTests.ts'],
  // npm install jest-environment-jsdom -D
  testEnvironment: 'jsdom'
}

（2）test/setupTests.ts
// npm i @testing-library/jest-dom -D
import '@testing-library/jest-dom';
import { TextDecoder, TextEncoder } from 'util';

global.TextEncoder = TextEncoder;
// 不转为any会报类型不匹配的错误
global.TextDecoder = TextDecoder as any;

后记
配置难度（一生之敌）排名：1、jestyyds。2、eslint暂时的神。
参考资料

https://juejin.cn/post/7185920750765735973
stylelint规则文档：https://ask.dcloud.net.cn/article/36067
https://juejin.cn/post/7078330175145902110
npm init @vitejs/app到底干了什么：https://juejin.cn/post/6948202986573135908
https://www.cnblogs.com/cangqinglang/p/14761536.html
使用ts-node运行ts脚本及踩过的坑：https://juejin.cn/post/6939538768911138823
https://stackoverflow.com/questions/27688804/how-do-i-debug-error-spawn-enoent-on-node-js
使用commitlint规范commit格式：https://juejin.cn/post/6990307028162281508
https://juejin.cn/post/7139855730105942030
antd5定制主题官方文档：https://ant-design.gitee.io/docs/react/customize-theme-cn
onBeforeRequest MDN：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest
https://juejin.cn/post/7097312790511091719
jest jsdom环境TextEncoder和TextDecoder未定义：https://stackoverflow.com/questions/68468203/why-am-i-getting-textencoder-is-not-defined-in-jest
https://bugs.chromium.org/p/chromium/issues/detail?id=91191
vite配置路径别名：https://juejin.cn/post/7051507089574723620
jest如何测试使用了TextEncoder和TextDecoder的模块：https://github.com/inrupt/solid-client-authn-js/issues/1676
解决jest处理es模块：https://www.cnblogs.com/xueyoucd/p/10495922.html
lodash按需引入：https://www.cnblogs.com/fancyLee/p/10932050.html
https://blog.battlefy.com/tree-shaking-lodash-with-vite
















 















你可能感兴趣的:(web&CTF,chrome,前端,typescript)



chrome扩展，“manifest_version“: 3, chrome 扩展图标点击事件
徐同保
chrome前端
在Chrome扩展中，从ManifestV3开始，后台脚本（backgroundscripts）被服务工作线程（serviceworkers）所取代。这改变了扩展图标点击事件（通常称为浏览器操作或者页面操作）的处理方式。在ManifestV3中，您需要使用chrome.action.onClicked监听器来处理扩展图标的点击事件。下面是一个如何设置扩展图标点击事件处理器的示例：在manifest

大前端-postcss安装使用指南
黑夜照亮前行的路
postcss
PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把

谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程
pigerr杨
Pythonpythonchromedrivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装

虚拟 DOM 的优缺点有哪些
咕噜签名分发
前端javascript开发语言
虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优

3、JavaWeb-Ajax/Axios-前端工程化-Element
所谓远行Misnearch
#JavaWeb前端ajaxelementuijava前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名

java实体中返回前端的double类型四舍五入（格式化）
婲落ヽ紅顏誶
java
根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f

Django forms组件
在飞行-米龙
Djangodjangopython后端
【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict

Web前端Html的表单
任家伟
前端html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单

Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）
王佳斌
+Thinkphpmysql前端数据库
前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。

Ubuntu下安装Chrome浏览器(简单,使用)
Starry-sky(jing)
[linux操作系统笔记]chrome深度学习linux
下载安装GoogleChrome浏览器deb包极速下载:下载链接32位wgethttps://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb64位wgethttps://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb安装sudodpk

react native 总结
一切顺势而行
reactnativereact.jsjavascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su

程序员开发技术整理
laizhixue
学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工

【前端学习——js篇】7.函数缓存
笔下无竹墨下有鱼
前端学习前端学习javascript
具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的

Websocket服务监听收发消息
beiback
Java服务器问题websocket网络协议网络
目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致

Netty服务器结合WebSocke协议监听和接收数据
beiback
服务器问题Java服务器运维netty
目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa

基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java
计算机程序老哥
作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个

javascript实现SM2加密解密
人生在勤，不索何获
javascript前端jquery
前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu

Github 2024-03-26 开源项目日报 Top10
老孙正经胡说
github开源Github趋势分析开源项目PythonGolang
根据GithubTrendings的统计，今日(2024-03-26统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目3TypeScript项目3JupyterNotebook项目2C++项目1GDScript项目1Lua项目1Solidity项目1OpenInterpreter:本地代码运行和自然语言界面创建周期：254天开发语言：Python协议

前端埋点解决方案
zhu_zhu_xia
前端
一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func

11 React 组件通信 父传子
a457636876
Reactreact.jsjavascript前端
在React中实现组件通信是非常常见的需求，其中包括父子组件通信。以下是几种常见的父子组件通信的例子，以及需要注意的知识：Props传递：这是最基本的父子组件通信方式。父组件通过props将数据传递给子组件。//ParentComponent.jsimportReactfrom'react';importChildComponentfrom'./ChildComponent';functionPa

如何提出令人爱回答的好问题？
兮若耶
我们经常会遇到这样的问题，如我适合做什么？这个名词怎么解释？大部分人面对这样的问题时，要么答非所问，要么无从下手。现在的很多事物都是速成的，只是好的问题并没有那么容易被提出来。而提不好的问题，可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时，能听到很多的比喻和新观点，而这些是在书上和网上找不到的。这些新的有用的东西，都在前端被实践着，暂时来不及把知识系统

谈谈对前端性能监控的理解和实践
Layla_c
webjavepython前端
一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节，它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控，开发者和运维团队能够及时发现并解决性能瓶颈，从而提升用户体验和系统稳定性。理解前端性能监控，首先要明确其重要性。在移动互联网时代，用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿，用户可能会选择离开，这对企业

mineadmin使用docker启动方式
qq_38812523
dockerphp容器
找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho

为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？
智伴科技
git
版本控制工具（如Git）在前端开发项目中扮演着重要的角色，主要有以下几方面的作用：1.**版本管理**：版本控制工具可以帮助开发团队管理项目的不同版本，记录每次代码变动的历史记录，方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**：多人开发同一个项目时，版本控制工具可以协助团队成员协同工作，避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共

低代码与前端开发架构：重塑软件开发的未来
快乐非自愿
低代码架构前端
随着技术的不断进步和数字化转型的深入，软件开发领域正经历着一场革命性的变革。在这场变革中，低代码开发平台和前端开发架构扮演着越来越重要的角色。本文将探讨低代码与前端开发架构之间的关系，并分析它们如何共同推动软件开发的创新与发展。低代码开发平台的崛起低代码开发平台（Low-CodeDevelopmentPlatform,LCDP）是一种新型的软件开发方式，它允许开发者通过图形化界面、预构建的模块和模

[commonjs--resolver] Missing “./jsx-runtime.js“ specifier in “react“ package
清羽_ls
前端&&沉淀javascriptreact.js前端
修复vite构建时错误vite打包,第三方包引用的react版本不一致问题修复(不是最优解)//vite.config.jsimport{defineConfig}from'vite';importreactfrom'@vitejs/plugin-react';importpathfrom'path';exportdefaultdefineConfig({plugins:[react(),//如果

开发chrome扩展（ 禁止指定域名使用插件）
徐同保
chrome前端
mainfest.json:{"manifest_version":3,"name":"ChatGPT学习","version":"0.0.2","description":"ChatGPT,GPT-4,Claude3,Midjourney,StableDiffusion,AI,人工智能,AI","icons":{"16":"./images/logo.png","48":"./images/lo

Github 2024-03-25 开源项目日报Top10
老孙正经胡说
github开源Github趋势分析开源项目PythonGolang
根据GithubTrendings的统计，今日(2024-03-25统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Python项目4JupyterNotebook项目2TypeScript项目2GDScript项目1Lua项目1Go项目1Dart项目1OpenInterpreter:本地代码运行和自然语言界面创建周期：254天开发语言：Python协议类型：GN

接口测试之测试原则、测试用例、测试流程......
程序员老鹰
测试工具功能测试测试用例测试覆盖率系统安全
一、接口的介绍软件测试中，常说的接口有两种：图形用户接口（GUI，人与程序的接口）、应用程序编程接口（API）。接口（API）是系统与系统之间，模块与模块之间或者服务与服务之间相互调用的入口。它的本质：其实就是一种约定，在开发前期，我们约定接口会接收什么数据；在处理完成后，它又会返回什么数据。开发岗位分为前端和后端，他们相互配合完成工作，会协商接口的定义方法。一般后端定义接口，前端调用接口。前后端

React—— props校验（非typescript校验类型）
水煮庄周鱼鱼
Reactreact.jstypescriptjavascript
非typescript环境下，当我们在封装组件的时候，接受props时传入的内容，需要做类型检测，那我们可以用props校验进行类型的检查。props校验允许在创建组件的时候，就约定props的格式、类型等实现步骤：导入prop-types包使用组件名.propTypes={}来给组件的props添加校验规则校验规则通过PropTypes对象来指定如果props想设置默认值，可以通过default

对股票分析时要注意哪些主要因素？
会飞的奇葩猪
股票 分析 云掌股吧

　　众所周知，对散户投资者来说，股票技术分析是应战股市的核心武器，想学好股票的技术分析一定要知道哪些是重点学习的，其实非常简单，我们只要记住三个要素：成交量、价格趋势、振荡指标。
    一、成交量
　　大盘的成交量状态。成交量大说明市场的获利机会较多，成交量小说明市场的获利机会较少。当沪市的成交量超过150亿时是强市市场状态，运用技术找综合买点较准；

【Scala十八】视图界定与上下文界定
bit1129
scala
Context Bound，上下文界定，是Scala为隐式参数引入的一种语法糖，使得隐式转换的编码更加简洁。
 
隐式参数
首先引入一个泛型函数max，用于取a和b的最大值
def max[T](a: T, b: T) = {
if (a > b) a else b
}
 因为T是未知类型，只有运行时才会代入真正的类型，因此调用a > 

C语言的分支——Object-C程序设计阅读有感
darkblue086
applec框架cocoa
自从1972年贝尔实验室Dennis Ritchie开发了C语言，C语言已经有了很多版本和实现，从Borland到microsoft还是GNU、Apple都提供了不同时代的多种选择，我们知道C语言是基于Thompson开发的B语言的，Object-C是以SmallTalk-80为基础的。和C++不同的是，Object C并不是C的超集，因为有很多特性与C是不同的。
Object-C程序设计这本书

去除浏览器对表单值的记忆
周凡杨
html记忆autocompleteform浏览
 
                                 &n

java的树形通讯录
g21121
java
最近用到企业通讯录，虽然以前也开发过，但是用的是jsf，拼成的树形，及其笨重和难维护。后来就想到直接生成json格式字符串，页面上也好展现。
// 首先取出每个部门的联系人
for (int i = 0; i < depList.size(); i++) {
List<Contacts> list = getContactList(depList.get(i

Nginx安装部署
510888780
nginxlinux
Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源

java servelet异步处理请求
墙头上一根草
ｊａｖａ异步返回ｓｅｒｖｌｅｔ
servlet3.0以后支持异步处理请求，具体是使用AsyncContext ，包装httpservletRequest以及httpservletResponse具有异步的功能，
  
 
  final AsyncContext ac = request.startAsync(request, response);
  ac.s

我的spring学习笔记8-Spring中Bean的实例化
aijuans
Spring 3
在Spring中要实例化一个Bean有几种方法：
1、最常用的（普通方法）
<bean id="myBean" class="www.6e6.org.MyBean" />
使用这样方法，按Spring就会使用Bean的默认构造方法，也就是把没有参数的构造方法来建立Bean实例。
（有构造方法的下个文细说）
2、还

为Mysql创建最优的索引
annan211
mysql索引

索引对于良好的性能非常关键，尤其是当数据规模越来越大的时候，索引的对性能的影响越发重要。
索引经常会被误解甚至忽略，而且经常被糟糕的设计。
索引优化应该是对查询性能优化最有效的手段了，索引能够轻易将查询性能提高几个数量级，最优的索引会比
较好的索引性能要好2个数量级。
1 索引的类型
(1) B-Tree
不出意外，这里提到的索引都是指 B-

日期函数
百合不是茶
oraclesql日期函数查询
 
ORACLE日期时间函数大全
TO_DATE格式(以时间:2007-11-02 13:45:25为例)
Year:
yy two digits 两位年 显示值:07
yyy three digits 三位年 显示值:007


线程优先级
bijian1013
javathread多线程java多线程
多线程运行时需要定义线程运行的先后顺序。
线程优先级是用数字表示，数字越大线程优先级越高，取值在1到10，默认优先级为5。
实例：
package com.bijian.study;
/**
* 因为在代码段当中把线程B的优先级设置高于线程A,所以运行结果先执行线程B的run()方法后再执行线程A的run()方法
* 但在实际中，JAVA的优先级不准，强烈不建议用此方法来控制执

适配器模式和代理模式的区别
bijian1013
java设计模式
一.简介        适配器模式：适配器模式（英语：adapter pattern）有时候也称包装样式或者包装。将一个类的接口转接成用户所期待的。一个适配使得因接口不兼容而不能在一起工作的类工作在一起，做法是将类别自己的接口包裹在一个已存在的类中。      &nbs

【持久化框架MyBatis3三】MyBatis3 SQL映射配置文件
bit1129
Mybatis3
 SQL映射配置文件一方面类似于Hibernate的映射配置文件，通过定义实体与关系表的列之间的对应关系。另一方面使用<select>,<insert>,<delete>，<update>元素定义增删改查的SQL语句，
这些元素包含三方面内容
1. 要执行的SQL语句
2. SQL语句的入参，比如查询条件
3. SQL语句的返回结果

oracle大数据表复制备份个人经验
bitcarter
oracle大表备份大表数据复制
前提：
   数据库仓库A（就拿oracle11g为例）中有两个用户user1和user2,现在有user1中有表ldm_table1,且表ldm_table1有数据5千万以上，ldm_table1中的数据是从其他库B（数据源）中抽取过来的，前期业务理解不够或者需求有变，数据有变动需要重新从B中抽取数据到A库表ldm_table1中。
    

HTTP加速器varnish安装小记
ronin47
http varnish 加速
上午共享的那个varnish安装手册，个人看了下，有点不知所云，好吧~看来还是先安装玩玩！
苦逼公司服务器没法连外网，不能用什么wget或yum命令直接下载安装，每每看到别人博客贴出的在线安装代码时，总有一股羡慕嫉妒“恨”冒了出来。。。好吧，既然没法上外网，那只能麻烦点通过下载源码来编译安装了！
Varnish 3.0.4下载地址： http://repo.varnish-cache.org/

java-73-输入一个字符串，输出该字符串中对称的子字符串的最大长度
bylijinnan
java

public class LongestSymmtricalLength {
/*
* Q75题目：输入一个字符串，输出该字符串中对称的子字符串的最大长度。
* 比如输入字符串“google”，由于该字符串里最长的对称子字符串是“goog”，因此输出4。
*/
public static void main(String[] args) {
Str

学习编程的一点感想
Cb123456
编程感想Gis
       写点感想，总结一些，也顺便激励一些自己.现在就是复习阶段，也做做项目.
 
   本专业是GIS专业，当初觉得本专业太水，靠这个会活不下去的，所以就报了培训班。学习的时候，进入状态很慢，而且当初进去的时候，已经上到Java高级阶段了，所以.....，呵呵，之后有点感觉了，不过，还是不好好写代码，还眼高手低的，有

[能源与安全]美国与中国
comsci
能源

     现在有一个局面：地球上的石油只剩下N桶，这些油只够让中国和美国这两个国家中的一个顺利过渡到宇宙时代，但是如果这两个国家为争夺这些石油而发生战争，其结果是两个国家都无法平稳过渡到宇宙时代。。。。而且在战争中，剩下的石油也会被快速消耗在战争中，结果是两败俱伤。。。
      在这个大

SEMI-JOIN执行计划突然变成HASH JOIN了 的原因分析
cwqcwqmax9
oracle
甲说：
A B两个表总数据量都很大，在百万以上。
idx1  idx2字段表示是索引字段
A B 两表上都有
col1字段表示普通字段
select xxx from A
where A.idx1 between mmm and nnn
     and exists (select 1 from B where B.idx2 =

SpringMVC-ajax返回值乱码解决方案
dashuaifu
AjaxspringMVCresponse中文乱码
 
SpringMVC-ajax返回值乱码解决方案
 
一：（自己总结，测试过可行）
ajax返回如果含有中文汉字，则使用：（如下例：）
@RequestMapping(value="/xxx.do")       public @ResponseBody void getPunishReasonB

Linux系统中查看日志的常用命令
dcj3sjt126com
OS
因为在日常的工作中，出问题的时候查看日志是每个管理员的习惯，作为初学者，为了以后的需要，我今天将下面这些查看命令共享给各位
cat
tail -f
日 志 文 件 说 明
/var/log/message 系统启动后的信息和错误日志，是Red Hat Linux中最常用的日志之一
/var/log/secure 与安全相关的日志信息
/var/log/maillog 与邮件相关的日志信

[应用结构]应用
dcj3sjt126com
PHPyii2
应用主体
应用主体是管理 Yii 应用系统整体结构和生命周期的对象。 每个Yii应用系统只能包含一个应用主体，应用主体在 入口脚本中创建并能通过表达式 \Yii::$app 全局范围内访问。
补充: 当我们说"一个应用"，它可能是一个应用主体对象，也可能是一个应用系统，是根据上下文来决定[译：中文为避免歧义，Application翻译为应

assertThat用法
eksliang
JUnitassertThat
junit4.0  assertThat用法
一般匹配符1、assertThat( testedNumber, allOf( greaterThan(8), lessThan(16) ) );
注释： allOf匹配符表明如果接下来的所有条件必须都成立测试才通过，相当于“与”（&&）
2、assertThat( testedNumber, anyOf( g

android点滴2
gundumw100
应用服务器android网络应用OSHTC
如何让Drawable绕着中心旋转？
Animation a = new RotateAnimation(0.0f, 360.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
a.setRepeatCount(-1);
a.setDuration(1000);
如何控制Andro

超简洁的CSS下拉菜单
ini
htmlWeb工作html5css
效果体验：http://hovertree.com/texiao/css/3.htmHTML文件：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁的HTML+CSS下拉菜单-HoverTree</title>

kafka consumer防止数据丢失
kane_xie
kafkaoffset commit
kafka最初是被LinkedIn设计用来处理log的分布式消息系统，因此它的着眼点不在数据的安全性（log偶尔丢几条无所谓），换句话说kafka并不能完全保证数据不丢失。
 
尽管kafka官网声称能够保证at-least-once，但如果consumer进程数小于partition_num，这个结论不一定成立。
 
考虑这样一个case，partiton_num=2

@Repository、@Service、@Controller 和 @Component
mhtbbx
DAOspringbeanprototype
@Repository、@Service、@Controller 和 @Component 将类标识为Bean
Spring 自 2.0 版本开始，陆续引入了一些注解用于简化 Spring 的开发。@Repository注解便属于最先引入的一批，它用于将数据访问层 (DAO 层 ) 的类标识为 Spring Bean。具体只需将该注解标注在 DAO类上即可。同时，为了让 Spring 能够扫描类

java 多线程高并发读写控制 误区
qifeifei
java thread
先看一下下面的错误代码，对写加了synchronized控制，保证了写的安全，但是问题在哪里呢？
public class testTh7 {
private String data;
public String read(){
System.out.println(Thread.currentThread().getName() + "read data " 

mongodb replica set(副本集)设置步骤
tcrct
javamongodb
网上已经有一大堆的设置步骤的了，根据我遇到的问题，整理一下，如下：
首先先去下载一个mongodb最新版，目前最新版应该是2.6
cd /usr/local/bin
wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.0.tgz
tar -zxvf mongodb-linux-x86_64-2.6.0.t

rust学习笔记
wudixiaotie
学习笔记
1.rust里绑定变量是let，默认绑定了的变量是不可更改的，所以如果想让变量可变就要加上mut。
let x = 1; let mut y = 2;
2.match 相当于erlang中的case，但是case的每一项后都是分号，但是rust的match却是逗号。
3.match 的每一项最后都要加逗号，但是最后一项不加也不会报错，所有结尾加逗号的用法都是类似。
4.每个语句结尾都要加分








按字母分类：
ABCDEFGHIJKLMNOPQRSTUVWXYZ其他






首页 -
关于我们 -
站内搜索 -
Sitemap -
侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.