gulp打包-ChatGPT带你开发小功能

开发一个edge的扩展：当鼠标放在网页的图片上时，出现一个保存按钮，点击按钮，可以保存图片。

gulp_gulpbower_gulp打包

好的，以下是开发Edge扩展的步骤：

1.准备工作

首先，你需要下载并安装Visual Studio Code和Node.js。

2.创建项目

打开Visual Studio Code，选择“文件”>“新建文件夹”，创建一个新的文件夹，并在该文件夹内打开终端。

在终端中输入以下命令：

npm init

按照提示输入相关信息，创建一个新的npm项目。

3.安装必要的依赖

在终端中输入以下命令，安装必要的依赖：

npm install --save-dev gulp gulp-zip gulp-rename
npm install --save webextension-polyfill

其中，gulp是一个自动化构建工具，gulp-zip和gulp-rename是gulp的插件，用于打包和重命名文件。webextension-polyfill是用于实现跨浏览器扩展的Polyfill库。

4.编写代码

在项目根目录下创建一个名为“src”的文件夹，用于存放扩展的源代码。在src文件夹下创建一个名为“manifest.json”的文件，用于描述扩展的属性和功能。

以下是一个基本的manifest.json文件示例：

{
  "manifest_version": 2,
  "name": "Save Image",
  "version": "1.0.0",
  "description": "A simple extension to save images",
  "icons": {
    "48": "icon.png"
  },
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_icon": {
      "48": "icon.png"
    },
    "default_title": "Save Image",
    "default_popup": "popup.html"
  }
}

其中，manifest_version表示manifest文件的版本，name表示扩展的名称，version表示扩展的版本号，description表示扩展的描述，icons表示扩展的图标，permissions表示扩展需要的权限，browser_action表示扩展的浏览器行为。

在src文件夹下创建一个名为“popup.html”的文件，用于显示保存按钮。以下是一个基本的popup.html文件示例：



  
    Save Image

gulp打包_gulpbower_gulp

在src文件夹下创建一个名为“popup.js”的文件，用于实现保存功能。以下是一个基本的popup.js文件示例：

document.addEventListener('DOMContentLoaded', function () {
  var saveBtn = document.getElementById('saveBtn');
  saveBtn.addEventListener('click', function () {
    chrome.tabs.executeScript({
      code: 'var imgUrl = window.getSelection().anchorNode.parentElement.href || window.getSelection().anchorNode.parentElement.src || window.getSelection().anchorNode.src; chrome.runtime.sendMessage({url: imgUrl});'
    });
  });
});

gulpbower_gulp打包_gulp

在popup.js中，我们使用chrome.tabs.executeScript方法执行一个JavaScript脚本，该脚本会获取当前页面中鼠标所在图片的URL，并将其通过chrome.runtime.sendMessage方法发送给扩展的后台脚本。

在src文件夹下创建一个名为“background.js”的文件，用于接收并处理保存请求。以下是一个基本的background.js文件示例：

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.url) {
    chrome.downloads.download({
      url: request.url,
      saveAs: true
    });
  }
});

在background.js中，我们使用chrome.runtime.onMessage.addListener方法监听来自popup.js的消息，并调用chrome.downloads.download方法保存图片到本地。

5.打包扩展

在终端中输入以下命令，使用gulp打包扩展：