关于chrome-extension:基于webpack搭建Chrome扩展开发环境

42次阅读

共计 3350 个字符，预计需要花费 9 分钟才能阅读完成。

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

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

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

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

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 我的项目源码

正文完