npm 包 edge-launchpad 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

edge-launchpad 是一个能够快速启动 Edge 扩展开发的 npm 包，它能帮助你快速创建一个基础项目结构，提供本地开发、打包和发布的命令。

这个包包含了许多有用的 Edge API，例如标签创建和管理、注入 CSS 和 JavaScript、通信机制等。

本教程将为你介绍如何使用 edge-launchpad 来快速开始开发 Edge 扩展。

安装

打开命令行工具，输入以下命令安装 edge-launchpad：
```
npm install -g edge-launchpad
```
验证是否成功安装，输入以下命令查看版本号：
```
edge-launchpad -v
```
如果返回版本号，则说明安装成功。

创建一个空项目

在合适的地方创建一个新的文件夹作为项目的根目录。
进入项目根目录，执行以下命令：
```
edge-launchpad create my-project --minimal
```
该命令将创建一个空项目。--minimal 参数将只创建一个包含最小文件和文件夹的项目。该项目将包括 manifest.json、popup.html 和 content.js 三个文件。
执行以下命令，将打开 Edge 浏览器，并加载你的新扩展：
```
edge-launchpad start
```
你将看到一个空白的 popup 窗口，证明你的扩展已经在 Edge 浏览器中加载成功。

创建一个有用的项目

在项目根目录下执行以下命令，将会创建一个包含一些默认配置的项目：
```
edge-launchpad create my-useful-project
```
该项目将包含一个默认的 popup 窗口，一个包含默认机制的 content.js 文件，一个 options.html 选项页和一些有用的 Edge API 。
修改 manifest.json 文件来配置你的扩展。

manifest.json 文件包含了 Edge 扩展的必备信息，例如版本号、图标、权限和哪些文件是需要加载的。在随后的步骤中我们将会进行更多的更改。
执行以下命令，将打开 Edge 浏览器，并加载你的有用项目：
```
edge-launchpad start
```
现在你将会看到你的项目中的 popup 窗口和 options 页。

开始构建你的扩展

在这个步骤，我们将会在我们的项目中添加一些有用的功能。

添加新的菜单项

在 manifest.json 文件中添加以下代码，可以添加一个新的上下文菜单：

-- -------------------- ---- -------
-
    ---
    --------------- -
        ----- ---------------
        -------- --- ---- ------
        ----------- --------
    --
    ---
-

在 content.js 文件中添加以下代码，可以在单击右键时显示该菜单：

chrome.contextMenus.create({
    id: 'my-menu-item',
    title: 'My Menu Item',
    contexts: ['page']
});

在 popup 窗口中添加一个按钮

在 popup.html 文件中，添加以下代码将在 popup 窗口的底部添加一个按钮：
```
<button id="my-button">My Button</button>
```
在 content.js 文件中添加以下代码，将在单击按钮时弹出一个提示框：
```
document.getElementById('my-button').addEventListener('click', () => {
    alert('Button clicked!');
});
```

在扩展启动时打开一个新标签页

在 manifest.json 文件中添加以下代码，将在扩展启动时打开一个新标签页：

-- -------------------- ---- -------
-
    ---
    ------------- -
        ---------- ------------------
        ------------- -----
    --
    ---
    ----------------- -
        ---------------- --- -----------
        --------------- -
            ----- ---------------------
            ----- --------------------
        -
    --
    ---
-

在 background.js 文件中添加以下代码，将在启动扩展时打开一个新标签页：

chrome.browserAction.onClicked.addListener(() => {
    chrome.tabs.create({ url: 'https://bing.com' });
});

加载 CSS 文件

在 popup.html 文件中添加以下代码，将加载名为 style.css 的 CSS 文件：
```
<link rel="stylesheet" href="style.css">
```
加载一个外部的 JavaScript 文件

在 popup.html 文件中添加以下代码，将加载名为 script.js 的 JavaScript 文件：
```
<script src="script.js"></script>
```
展示通信机制

在 popup.html 文件中添加以下代码，将发送消息到 content.js 文件：

<button id="send-message">Send Message</button>

在 content.js 文件中添加以下代码，将接收来自 popup 窗口的消息：

chrome.runtime.onMessage.addListener((request) => {
    alert(request.message);
});

在 popup.js 文件中添加以下代码，将发送消息给 content.js 文件：

document.getElementById('send-message').addEventListener('click', () => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        chrome.tabs.sendMessage(tabs[0].id, { message: 'Hello from popup!' });
    });
});

在 popup 窗口中单击按钮，将会发送消息给 content.js 文件，弹出一个提示框。

打包和发布

执行以下命令将你的项目打包为 .zip 文件：
```
edge-launchpad pack <path-to-project-folder>
```
例如：
```
edge-launchpad pack my-useful-project
```
该命令将在你的项目根目录下创建一个名为 <project-name>-<version>.zip 的文件。
执行以下命令将你的扩展发布到 Edge 应用商店：
```
edge-launchpad publish <path-to-zip-file>
```
例如：
```
edge-launchpad publish my-useful-project-1.0.0.zip
```
你需要事先申请一个 Edge 应用商店账号。你将需要进行身份验证，并上传你的扩展的详细信息和图标，然后等待审核。

结论

edge-launchpad 是一个快速启动 Edge 扩展开发的工具，它可以帮助你快速创建一个基础项目结构，提供了许多有用的 Edge API，可以方便的进行开发、打包和发布。

本教程覆盖了使用 edge-launchpad 创建空项目或有用项目、向空或有用项目添加功能以及打包和发布的所有步骤。

如果你想要更好的掌握 Edge 扩展开发，可以深入学习 Edge API 和其他工具，例如 Microsoft Edge DevTools。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055ff481e8991b448ddc24