看完王子建的造人式写歌的视频，久久不能平复，觉得十分的有趣，那咱们programmer是不是也可以进行造人式开发呀~[奸笑]

注：本文主要涉及到前端开发的相关内容，运用到的技术栈主要为Vue3+ts+webpack。（技术栈没有要求，只要打包出的dist文件格式一样就行）

精子

优质的精子对于孕育一个优秀的孩子十分重要，对于我们来说，这个精子就是框架，所以选择一个优质的精子，咳咳...优质的框架十分有必要，目前市面上比较火热的前端框架有React，Angular，Vue等，我选择了Vue来进行这次的培育。

Vue

卵子

卵子有各式各样的，但都不尽相同，相当于各个厂商的app环境，这里我选择Google浏览器的卵子，咳咳...app环境进行结合开发。

chrome浏览器

受精卵

有了精子，也有了卵子，接下来就是让他们结合了。

我们在框架文件(精子)中写入manifest.json这个特殊的文件(顶体酶)，来让谷歌浏览器(卵子)识别框架文件(精子)，并配合提供后续框架文件工作所需的各种资源，权限等。

{    "manifest_version": 2,    "author": "author",    "name": "demo",    "description": "工具",    "version": "1.0.0",    "browser_action": {        "default_title": "demo",        "default_icon": "assets/icon48.png",        "default_popup": "popup.html"    },    "background": {        "scripts": [            "js/background.js",            "js/menu.js"        ]    },    "icons": {        "16": "assets/icon16.png",        "48": "assets/icon48.png",        "128": "assets/icon128.png"    },    "devtools_page": "devtools.html",    "permissions": [        "tabs",        "webRequest",        "webRequestBlocking",        "proxy",        "storage",        "activeTab",        "contextMenus",        "http://*/*",        "https://*/*"    ],    "content_scripts": [        {            "matches": [                "http://*/*",                "https://*/*"            ],            "css": [                "css/popup.css"            ],            "js": [                "js/chunk-vendors.js",                "js/main.js"            ],            "run_at": "document_start"        }    ],    "web_accessible_resources": [        "js/main.js"    ],    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"}

受精卵结合完成了，那接下来我们就需要让这颗受精卵朝着我们想要的方向发展，成长了。

考虑到它的发展方向十分的丰富，我这边就例举其中几个发育内容吧，更多的内容有机会再介绍或者自己去搜索发现吧，毕竟那是你自己的孩子呀~[机智]

首先我们需要先给孩子搭一个骨架，这样孩子就有了一个雏形，并且该有的器官都预留了位置。

文件整体结构

其次我们的孩子需要有一张漂亮的脸蛋，那我们就要开始捏脸了[耶]。是的，没有预设，我们需要一笔一划的绘制出孩子的样貌。这里的绘制其实就是制作网页的页面，借助Vue我们很快就勾勒出了孩子的脸型，得到了以下这样的文件格式(脸面相关的放在popup文件夹内)。

popup文件内容

现在让我们看看孩子长成什么样的了吧，受精卵有了人形，离出生又近了一步，是不是很激动呢？[害羞]

popup弹出层展示

至于脸上的眼睛，鼻子，耳朵（监听网页上的信息并展示出来之类的功能）什么的我这边就不画了，无脸男也挺不错的呢~（偷个懒[耶]）

孩子的头发育好了，那接下来发育一下四肢吧。

四肢主要是用来干活的，那我们想要孩子将来在这个社会(浏览器)中做什么工作就在main.ts文件里写好，这样它就会完全按照我们的想法去一步一步完成。(这个main.ts文件可以理解为在浏览器控制台运行)

main.ts文件

这里我让它为我处理一些网站，例如：cs*n的屏蔽复制功能，毕竟我不喜欢登录，这样每次都需要手动F12处理取消屏蔽就很麻烦，直接让它帮我进入页面就处理好不是美滋滋[奸笑]。一些页面广告什么的也都按我的个人喜好让它屏蔽掉了，这样在浏览各种网站的时候都很舒服了~

当然只会干活可不行，还得听话。

我们可以设置一些指令，在发出一些设置好的指令后，它就会按照预设的处理方式进行一系列的操作。

例如：我在右键菜单（图中menu.ts文件）中加入翻译功能，在我选中一些文字的时候可以让它帮我跳转到xx翻译网站帮我翻译这些内容。

background文件夹

选中文字右键翻译

那图中另外一个文件background.ts是干嘛的呢？

问得好，这个文件其实相当于一个媒介，主要用于传递孩子与社会之间的信息，也就是插件与浏览器中网页信息相互传递的中间站。就像我们找工作一般很少直接去公司问：“你招不招人？”。一般都会借助一些招聘软件进行交流，交流好了再操作。

出生

目前孩子该有的也基本都发育出来了，接下来我们就需要把这些肢体按照正常的模样位置进行拼接摆放，毕竟谁也不想生出一个缺胳膊少腿的孩子嘛(出bug)[偷笑]。

借助webpack接生工具，咳咳...打包工具打包出以下的dist文件夹。随着打包完成的提示，我们的孩子呱呱坠地啦，这个dist文件夹就是我们的孩子啊~[呲牙]

整体文件结构

工作

既然孩子出生了，那我们就让它开始工作吧。（一出生就工作，感觉好残忍[泣不成声]）

孩子的入职流程：

打开浏览器扩展程序点击加载已解压的扩展程序选择dist文件夹，确认完成，开始愉快的工作之旅吧，孩子~

看看咱孩子的工牌，不错吧~[机智]

谷歌插件

Q&A

Q：为什么只放出manifest.json文件代码？

A：插件的核心只有这个文件，其他的只需要借助webpack打包出需要的文件格式就好了。

Q：为什么图中的devTools文件夹没提到？

A：这个文件夹的内容主要是对控制台内容(F12里面内容)的处理，这里暂时就先不讲了，主要包括web请求监听(network)，增加控制台页面内容(panel)等。

Q：谷歌插件已经出V3版本了，为什么还用V2来讲？

A：主要还是网上V2版本的学习资料多，对于初学者，先学习V2版本比较容易入门，理解了相关的api执行方式，再学习V3也就比较容易了。

Q：开发过程中如何进行实时预览？

A：借助打包工具的热打包功能，在保存之后会生成新的dist文件夹，直接加载这个dist文件夹为插件，这样每次保存代码都会更新dist文件夹内容，也就同步更新插件内容了~（记得去掉打包的文件hash哦，不然入口文件名每次都会变的呢）

本文中涉及的类比如有不当之处，敬请谅解~