在本文中，我们将介绍如何使用 Vue 框架和 Chrome 扩展 API 创建一个简单的谷歌扩展，用于获取网页上的音乐下载地址。
前置条件
在开始开发前，请确保你已经安装了最新版本的 Chrome 浏览器，并且对 Vue 和 JavaScript 有一定的了解。
开始编写代码
首先，我们需要创建一个基本的 Vue 应用程序。这可以通过使用 Vue CLI 工具轻松完成：
# 安装 Vue CLI npm install -g @vue/cli # 创建一个新的 Vue 应用程序 vue create music-downloader
接下来，我们需要添加 Chrome 扩展所需的文件结构。为此，请创建以下文件和文件夹：
music-downloader/
├── manifest.json
├── popup.html
├── popup.js
└── src/
├── App.vue
└── main.js现在，让我们来编辑这些文件并添加必要的代码。
manifest.json
manifest.json 文件是谷歌扩展的元数据文件，其中包含扩展的名称、描述、图标和权限等信息。在这里，我们需要指定扩展会使用哪些权限，以便获取音乐下载地址等相关信息。以下是一个示例 manifest.json 文件：
-- -------------------- ---- -------
-
------- ------ ------------
---------- ------
-------------- -- ------ --------- -- -------- ----- ---- -----------
------------------- --
-------- -
----- -------------------
----- -------------------
----- -------------------
------ -------------------
--
-------------- ------------- ---------- ------------- ---------------
----------------- -
--------------- --------------------
---------------- ------------
-
-在这个示例中，我们请求了 activeTab、storage 和 http / https 权限。同时，我们还指定扩展将使用 popup.html 作为默认弹出窗口，并使用 icon128.png 作为默认的浏览器操作图标。
popup.html
popup.html 文件包含扩展的弹出窗口 HTML 代码。在这里，我们可以添加任何我们想要显示给用户的内容。以下是一个简单的 popup.html 文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ------------------
----- ---------------- --------------------------------------------------------------
------- -------------------------------------------------
------- ---------------------------------------------------------
------- ---------------------------------------------------------
------- ------------------------
-------
------
---- ---------
--------- ------------- ---------------------------------
---------- -------------- ------------------------------------------
--------- --------------------- ------------------------------
------
-------
-------在这个示例中，我们使用 Element UI 库来创建输入框和按钮，并使用 Vue 绑定数据。当用户点击“获取下载地址”按钮时，它将触发 getDownloadUrl 方法，并在下载地址文本框中显示结果。
popup.js
popup.js 文件是扩展的弹出窗口 JavaScript 代码。在这里，我们需要实现所有与 Chrome 扩展 API 的交互，并向用户提供所需的功能。以下是一个简单的 popup.js 文件：
const app = new Vue({
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/5028) ，转载请注明来源
[https://www.javascriptcn.com/post/5028](https://www.javascriptcn.com/post/5028)