序言
Chrome扩大开发是目前比拟火爆的畛域，作为市场占有率第一的浏览器，有海量用户撑持。同时，Chrome扩大能够无缝对接Edge浏览器，不可不谓一举两得。
本文将介绍如何应用webpack构建一个反对Typescript的开发环境，在此基础上，实现一个能够批改网页背景的扩大利用。
Why Typescript ?
Typescipt作为JavaScript的超集，次要帮忙JavaScript具备了以下能力：
- 给JavaScript减少类型零碎，大大降低bug的产生
- 反对最新的ECMAScript个性
- 通过VsCode、WebStorm扩大工具实现类型提醒
应用Typescipt的类型提醒零碎，能够大大提高开发效率，笔者在应用时，有一个很大的感触，就是用了就回不去了，就像用了iPhone当前，再用Android，总感觉没有那么丝滑。
值得注意的是，Chrome浏览器默认仅反对JavaScript语言进行开发，如果应用Typescript开发就须要应用打包工具将开发好的.ts文件打包成浏览器反对的.js文件。
开始烹饪
搭建webpack环境环境
- 初始化我的项目开发目录
mkdir chrome-extension
cd chrome-extension
npm init -y- 装置须要用到的npm包
npm install --save-dev webpack webpack-cli
npm install --save-dev typescript ts-loader
npm install --save-dev copy-webpack-plugin
npm install --save-dev @types/chrome首先装置了webpack及webpack-cli,负责将我的项目打包成指标产物;其次装置了typescript以及帮忙webpack解决.ts文件的ts-loader;copy-webpack-plugin插件用来复制配置文件到打包目录，@types/chrome则是Chrome扩大开发用到的Chrome API的类型反对，这样就能够在开发工具中实现Chrome扩大API类型提醒。
- 减少Typscipt配置文件
在根目录创立一个名为tsconfig.json的文件，该文件次要是配置Typescript的编译。
{
"compilerOptions": {
"strict": true,
"module": "commonjs",
"target": "es6",
"esModuleInterop": true,
"sourceMap": true,
"rootDir": "src",
"outDir": "dist/js",
"noEmitOnError": true,
"typeRoots": [ "node_modules/@types" ]
}
}执行完以上操作后，还需在根目录下创立src、public、webpack三个目录
- 创立webpack配置文件
在webpack目录下新增:webpack.config.js，输出如下配置内容：
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
mode: "production",
entry: {
background: path.resolve(__dirname, "..", "src", "background.ts"),
},
output: {
path: path.join(__dirname, "../dist"),
filename: "[name].js",
},
resolve: {
extensions: [".ts", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
},
],
},
plugins: [
new CopyPlugin({
patterns: [{from: '.', to: '.',context: "public"}]
}),
],
};首先将打包的模式设置为production，而后指定了输出文件以及输入文件，同时，应用ts-loader解决Typescript文件，最初，应用copy-webpack-plugin将public目录中的文件（ public目录寄存着Chrome扩大必须要蕴含的manifest.json配置 ），复制到打包目录。
- 创立
manifest.json文件
manifest文件蕴含Chrome扩大的元数据信息，相似于node我的项目中的package.json文件，开发者能够在manifest文件中指定扩大的名称、版本、权限等一系列信息。
在public目录下，创立名为manifest.json的文件，输出如下内容：
{
"name": "Change Theme Extension",
"description": "This extension is made for demonstration purposes",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"activeTab",
"scripting"
],
"action":{},
"background": {
"service_worker": "background.js"
}
}这段配置文件配置了扩大的名称、介绍信息、版本，manifest_version是用来指定配置文件的版本，目前最新的版本是 3，不倡议应用行将废除的2版本。permissions字段配置了扩大须要的权限，background配置了扩大运行时须要在后盾运行的js文件。
- 实现更换以后浏览网页背景逻辑
在src目录下，减少background.ts，并将以下代码插入进去
let active = false;
function changeTheme(color: string): void {
document.body.style.backgroundColor = color;
}
chrome.action.onClicked.addListener((tab) => {
active = !active;
const color = active ? 'black' : 'white';
chrome.scripting.executeScript({
target: {tabId: tab.id ? tab.id : -1},
func: changeTheme,
args: [color]
}).then();
});在这段代码中，首先是一个更改网页背景色的changeTheme办法，而后监听用户点击图标事件事件：在用户点击浏览器图标时，将网页背景色在彩色和红色中切换。
- 目录构造
至此，所有的环境搭建及性能实现都曾经结束。
回顾一下：
首先实现了构建配置，实现webpack反对.ts文件构建，及复制配置文件到产物目录性能。接着创立了Chrome扩大的外围配置文件manifest.json，最初又在background.ts文件中实现了更换以后浏览网页背景逻辑。
- 执行构建
npm run build 此时，在dist目录就能看到构建好的chrome扩大代码及配置文件。
部署 & 测试
- 开启
开发者模式
关上Chrome浏览器，地址栏中输出chrome://extensions/,点击右上角的开发者模式按钮，将其开启。
接着点击加载已解压的扩大程序，抉择刚刚构建好的dist目录
此时，浏览器扩大曾经胜利加载
点击扩大图标，胜利的将搜狗更改为暗黑模式
序幕
本文次要介绍了如何用webpack搭建Chrome扩大的步骤，并实现了一个批改网页背景的小Demo。
对于webpack配置局部，开发者能够依据本身需要进行扩大，比方减少开发环境配置，减少less文件打包反对，也能够将本人的宝藏webpack插件退出进来。对于Chrome扩大局部，不得不说浏览器给扩大凋谢了很多能力，开发者能够将脚本注入到浏览的网页，能够批量治理用户关上的标签页，能够治理用户浏览网页的右键菜单等等……
总之，目前浏览器扩大开发是一个比拟好的方向，心愿这篇文章可能帮忙到想要做扩大的敌人。
附：github我的项目源码
发表回复