写给即将入职字节跳动的同学——如何自定义邮箱

一般大公司的邮箱用户名就是内网所有系统的统一账号，有的公司可以在入职前自定义邮箱账号，可以咨询 HR 了解。但也有的只能按统一规则，比如吉大校园网账号😂😂。字节跳动的内网邮箱账号可以部分自定义——看起来一般的规则是姓名全拼，如果有重名则加上后缀（貌似不重名不能自定义后缀，有待确认），即张三的内网账号是 [email protected], 若有重名则可自定义后缀（不清楚不重名是不是也可以），如 [email protected]. 但是如果你不想使用姓名全拼作为前缀呢，有办法更改吗？比如我一直使用的 ID 都是 youthlin.chen 就不是姓名全拼。

入职前收到的 Welcome 邮件中有欢迎入职页面，需要填写个人信息，自定义邮箱后缀就是在这个网页操作的，但是问了下 HR, 邮箱前缀是不能更改的。

好吧，只能自己尝试一下了，反正信息都是 HTTP 接口获取和提交的，看看能不能直接通过接口来改吧～先借助 Cmd+Opt+I 理一下思路，发现邮箱是两部分组成，不能修改的部分是接口返回的 pinyin 字段，然后后缀部分会在提交时使用输入框的值。

先把网络设为断开，点击提交按钮，看看表单往哪里提交了，提交的字段都是什么值。发现邮箱相关字段就是 pinyin 和 suffix. 稍微看了下之前的 xhr 请求，发现 pinyin 字段是调接口直接获取的，如果我直接改掉页面上显示的拼音是无效的，因为 JS 框架把字段值存起来了，一边在页面上显示，一边在提交表单时把变量值提交。所以需要做的应该是拦截接口的返回，让框架得到我改过的值。

既然后缀已经可以编辑了，就不用管了，所以想着可以拦截一下 xhr 的返回，让 JS 得到的 pinyin 是我想要的前缀部分。

使用油猴脚本写一下：

// ==UserScript==
// @name         入职拼音
// @namespace    https://youthlin.com/
// @supportURL   https://youthlin.com/
// @version      0.1
// @description  xhr replace
// @author       Youth．霖
// @match        *://*.bytedance.com/*
// @run-at       document-start
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_openInTab
// @grant        GM_xmlhttpRequest
// @grant        GM_setClipboard
// @grant        GM_registerMenuCommand
// @grant        unsafeWindow
// ==/UserScript==
(function () {
    'use strict';
    welcome();

    function welcome() {
        if (!location.href.includes("welcome.bytedance.com")) {
            return;
        }
        console.log('welcome page');
        unsafeWindow.originFetch = unsafeWindow.fetch;
        // 代理 fetch 函数
        unsafeWindow.fetch = new Proxy(unsafeWindow.originFetch, {
            apply(target, thisArg, argArray) {
                console.log('fetch arg:', argArray);
                let result = target.apply(thisArg, argArray);
                console.log('fetch result promise:', result); // fetch 的原始结果
                if (argArray.length === 2 && argArray[0] === '/api/p_employee/p_employee_info/') {
                    // 如果是获取员工信息的接口，把姓名拼音字段篡改一下
                    return new Promise(((resolve, reject) => {
                        result.then(response => {
                            console.log("fetch promise result:", response);
                            response.json()
                                .then(json => {
                                    console.log("fetch result json:", json);
                                    json.data.pinyin = 'youthlin'; // 从 Response 读取 JSON, 修改字段，再重新包装为 Response
                                    let newResponse = new Response(new Blob(
                                        [JSON.stringify(json)],
                                        {type: 'application/json'}
                                    ));
                                    resolve(newResponse);
                                })
                        })
                            .catch(e => reject(e));
                    }));
                }
                return result;
            }
        });
    }

})();

再断网提交一下看看值对不对，发现已经是自定义的了～（不过后来发现可以表单可以多次提交，不断网也🉑️）

最后，字节跳动【社招/实习】内推链接： https://job.toutiao.com/s/J6aTKeU
【校招】内推码: RYBCPNA 投递链接: https://job.toutiao.com/s/J6mNfwx

• fetch https://zh.javascript.info/fetch
• blob https://zh.javascript.info/blob
• promise https://zh.javascript.info/promise-basics
• proxy https://zh.javascript.info/proxy
• 如何编写一个油猴脚本

---