在开发 Chrome 扩展程序时，我们需要使用 Vue.js 进行编程。而 vue-cli-plugin-chrome-extension 是一个使用 Vue.js 进行 Chrome 扩展程序开发的 npm 包。下面将详细介绍如何使用该 npm 包来开发 Chrome 插件。
安装 vue-cli-plugin-chrome-extension
首先，我们需要安装 vue-cli-plugin-chrome-extension。
使用 npm 安装：
npm install vue-cli-plugin-chrome-extension --save-dev
如果你使用的是 yarn，可以使用下面的命令：
yarn add vue-cli-plugin-chrome-extension --dev
配置 vue.config.js
接下来，我们需要编辑 vue.config.js 文件。
在该文件中，我们需要导入 vue-cli-plugin-chrome-extension/config 并使用它创建 VuCLI 插件。并且，我们需要（至少）配置三个属性。
chainWebpack
这个方法是用来修改 webpack 配置的。
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------------- ------ -- -
------
------------------------
-------------------------------
-------
------
--------------------
---------------------------
-------
-------------------------------------------- -
-
-
----- -----------
--- -----
------- ---------------
--
--
---
--
--上述代码将打包一个 background.js 文件，一个 content-script.js 文件和一些静态资源，如图片和其他文本文件。这些文件将被复制到打包后的输出目录中。
pluginOptions
这个属性是用来传递配置给插件的。
-- -------------------- ---- -------
-------------- - -
-------------- -
---------------- -
-------- -
-------------- ------------------------
----------- --------------------
--
--
--
--上述代码告诉插件入口文件在哪里。
devServer
这个方法是用来配置开发服务器的。
module.exports = {
devServer: {
writeToDisk: filepath => {
return /.+\.js$/.test(filepath);
},
},
};上述代码告诉 webpack 将文件写入到磁盘中而不是使用内存中的文件。
现在，我们已经完成了配置。我们可以运行 vue-cli-service build 命令来打包应用程序。该命令会生成相应的文件到 dist 目录。下一步是在 Chrome 中安装应用程序。
在 Chrome 中安装应用程序
在 Chrome 的地址栏输入 chrome://extensions，然后单击“开发者模式”（Developer mode）开关以启用开发人员模式。然后单击“加载已解压的扩展程序”（Load unpacked），然后选择我们刚才打包的输出目录。现在，应用程序已经成功安装并在 Chrome 浏览器中启动。现在，我们可以开始编写代码了。
编写代码
我们将启动代码的编写。
首先，我们需要在 background.js 中编写代码。
chrome.runtime.onInstalled.addListener(() => {
console.log('Extension installed');
});该代码将打印日志信息到控制台。
接下来，我们需要编写 content-script.js 文件。我们的代码将使一个 alert 弹框。
alert('Hello world!');最后，我们在 manifest.json 中注册并配置扩展。这是一个简化的 JSON 对象，通常包含内容脚本、背景页和其他插件元数据。
-- -------------------- ---- -------
-
------- --- -----------
---------- ------
------------------- --
------------------ -
-
---------- ---------------
----- ---------------------
-
--
------------- -
---------- -----------------
-
-我们在 content_script 中配置我们的 content-script.js 文件，在 background 中配置我们的 background.js 文件。
经过这些步骤之后，我们可以运行 vue-cli-service build 命令来重新编译代码。然后，我们需要在 Chrome 中重新加载扩展程序。现在，我们可以看到我们的弹出窗口“Hello, world!” 了。
以上就是如何使用 npm 包 vue-cli-plugin-chrome-extension 的详细教程。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5b51ab1864dac6704d