Chrome扩展开发实战：网页图片抓取，打造专属自己的效率插件

news2024/11/27 0:48:52

在这里插入图片描述

🏆作者简介，黑夜开发者，CSDN领军人物，全栈领域优质创作者✌，CSDN博客专家，阿里云社区专家博主，2023年6月csdn上海赛道top4。
🏆数年电商行业从业经验，历任核心研发工程师，项目技术负责人。
🏆本文已收录于专栏：100个JavaScript的小应用。
🎉欢迎 👍点赞✍评论⭐收藏

文章目录

🚀一、背景
🚀二、插件开发流程
- 🔎2.1. 创建扩展程序文件夹
- 🔎2.2 添加清单文件manifest.json
- 🔎2.3 编写HTML文件
- 🔎2.4 编写JavaScript文件
- 🔎2.5 加载扩展程序
🚀三、网页图片抓取实战
- 🔎3.1 background.js
- 🔎3.2 content-script.js
- 🔎3.3 popup.js
- 🔎3.4 manifest.json
- 🔎3.5 效果展示
🚀四、总结

🚀一、背景

Chrome扩展程序是一种可以增强Chrome浏览器功能的插件，它可以通过添加新的界面元素、修改网页内容或与浏览器进行交互等方式来实现功能增强。本文将介绍如何开发一个简单的Chrome扩展程序，该程序能够在面板上显示一个按钮，点击按钮后可以跳转到百度。并且后面再给出一个进阶一点的教程，通过网页通信抓取显示页面所有图片。

在这里插入图片描述

🚀二、插件开发流程

创建扩展程序文件夹
添加清单文件manifest.json
编写HTML文件
编写JavaScript文件
加载扩展程序

🔎2.1. 创建扩展程序文件夹

首先，在本地文件系统上创建一个用于存放扩展程序的文件夹。

🔎2.2 添加清单文件manifest.json

在扩展程序文件夹中创建一个名为manifest.json的文件。清单文件是Chrome扩展程序的核心配置文件，用于描述扩展程序的各个组件和属性。

以下是一个简单的manifest.json示例：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple Chrome extension",
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "permissions": [
    "webNavigation",
    "tabs"
  ]
}

在这个示例中，我们指定了扩展程序的名称、版本、描述和图标等信息，并通过browser_action属性指定了扩展程序默认的弹出页面。

🔎2.3 编写HTML文件

在扩展程序文件夹中创建一个名为popup.html的HTML文件，用于定义面板上要显示的内容。

以下是一个简单的popup.html示例：

<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
  <script src="popup.js"></script>
</head>
<body>
  <button id="baiduButton">跳转到百度</button>
</body>
</html>

在这个示例中，我们创建了一个按钮，按钮的id为baiduButton。

🔎2.4 编写JavaScript文件

在扩展程序文件夹中创建一个名为popup.js的JavaScript文件，用于处理按钮的点击事件。

以下是一个简单的popup.js示例：

document.addEventListener('DOMContentLoaded', function() {
  var baiduButton = document.getElementById('baiduButton');
  baiduButton.addEventListener('click', function() {
    chrome.tabs.create({ url: 'https://www.baidu.com' });
  });
});

在这个示例中，我们使用chrome.tabs.create方法来创建一个新的标签页，并将其URL设置为百度的网址。

🔎2.5 加载扩展程序

最后，打开Chrome浏览器，在地址栏中输入chrome://extensions/，进入扩展程序管理页面。开启开发者模式后，点击“加载已解压的扩展程序”，选择我们创建的扩展程序文件夹。

至此，我们已经完成了Chrome扩展程序的开发。现在，当我们点击面板上的按钮时，就可以跳转到百度了。来看一下下图演示。

在这里插入图片描述

🚀三、网页图片抓取实战

🔎3.1 background.js

创建一个新的文件background.js，并添加以下代码以监听来自popup.js的消息和执行图片收集逻辑

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'collectImages') {
    chrome.tabs.executeScript({
      file: 'content/content-script.js'
    });
  }
});

🔎3.2 content-script.js

创建一个新的文件content.js，用于在页面中注入JavaScript代码来收集图片URL

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
 if (request.action === 'collectImages') {
     var images = Array.from(document.getElementsByTagName('img')).map(function(img) {
         return img.src;
     });

     chrome.runtime.sendMessage({
         action: 'sendImages',
         images: images
     });
 }
});

🔎3.3 popup.js

在popup.js文件中添加以下代码以实现按钮点击事件，获取当前Tab页中的所有图片：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('collectButton').addEventListener('click', function() {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, { action: 'collectImages' }, function(response) {
        
      });
    });
  });
});

chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){
  console.log(response, 'response')
  var imageList = document.getElementById('imageList');
  imageList.innerHTML = '';

  response.images.forEach(function(imageUrl) {
    var listItem = document.createElement('li');

    var image = document.createElement('img');
    image.src = imageUrl;

    listItem.appendChild(image);
    imageList.appendChild(listItem);
  });
});

🔎3.4 manifest.json

在manifest.json文件中添加以下内容以配置扩展

{
  "manifest_version": 2,
  "name": "Image Collector",
  "version": "1.0",
  "description": "Collect all images in the current tab",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "contextMenus",
		"tabs",
		"notifications",
		"webRequest",
		"webRequestBlocking",
		"storage",
		"http://*/*",
		"https://*/*"
  ],
  "icons": {
    "16": "icon.png"
  },
  "background": {
    "scripts": ["background/background.js"]
  },
  "content_scripts": [
    {
			"matches": ["<all_urls>"],
			"js": ["js/jquery-1.11.0.min.js", "content/content-script.js"],
			"run_at": "document_start"
		}
  ]
}

🔎3.5 效果展示

在这里插入图片描述

🚀四、总结

本文介绍了如何开发一个简单的Chrome扩展程序，该程序能够在面板上显示一个按钮，点击按钮后可以跳转到百度。从创建扩展程序文件夹到加载扩展程序，我们一步一步地完成了整个过程。同时也给出了一个较为进阶一点的通信交互图片抓取实战。如果你对Chrome扩展程序的开发有兴趣，可以尝试开发更加复杂和功能丰富的扩展程序，去满足更多的需求和挑战。祝你成功！

图片抓取实战源码在文章顶部，有需要可以去下载。

在这里插入图片描述