序言

Chrome扩大开发是目前比拟火爆的畛域，作为市场占有率第一的浏览器，有海量用户撑持。同时，Chrome扩大能够无缝对接Edge浏览器，不可不谓一举两得。
本文将介绍如何应用webpack构建一个反对Typescript的开发环境，在此基础上，实现一个能够批改网页背景的扩大利用。

Why Typescript ?

Typescipt作为JavaScript的超集，次要帮忙JavaScript具备了以下能力：

  1. 给JavaScript减少类型零碎，大大降低bug的产生
  2. 反对最新的ECMAScript个性
  3. 通过VsCode、WebStorm扩大工具实现类型提醒

应用Typescipt的类型提醒零碎，能够大大提高开发效率，笔者在应用时，有一个很大的感触，就是用了就回不去了，就像用了iPhone当前，再用Android，总感觉没有那么丝滑。
值得注意的是，Chrome浏览器默认仅反对JavaScript语言进行开发，如果应用Typescript开发就须要应用打包工具将开发好的.ts文件打包成浏览器反对的.js文件。

开始烹饪

搭建webpack环境环境

  • 初始化我的项目开发目录
mkdir chrome-extensioncd chrome-extensionnpm init -y
  • 装置须要用到的npm包
npm install --save-dev webpack webpack-clinpm install --save-dev typescript ts-loadernpm install --save-dev copy-webpack-pluginnpm 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我的项目源码