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

    在这里插入图片描述

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

    文章目录

    🚀一、背景

    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"
  ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

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

    🔎2.3 编写HTML文件

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这个示例中，我们创建了一个按钮，按钮的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' });
  });
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这个示例中，我们使用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'
    });
  }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    🔎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
     });
 }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    🔎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);
  });
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    🔎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": [""],
			"js": ["js/jquery-1.11.0.min.js", "content/content-script.js"],
			"run_at": "document_start"
		}
  ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    🔎3.5 效果展示

    在这里插入图片描述

    🚀四、总结

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

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

    在这里插入图片描述

    今天的内容就到这里，我们下次见。

  • 相关阅读:
    域渗透基础_域渗透实战下gpo策略利用
    关于js_节流的介绍和简单的使用
    网络工程师的爬虫技术之路：跨界电商与游戏领域的探索
    基于 EmotiVoice 的批量 TXT 文本转语音工具
    【Java 进阶篇】JDBC工具类详解
    正整数的阶乘
    adb shell 查看和修改电池信息
    java毕业生设计学生会管理系统2021计算机源码+系统+mysql+调试部署+lw
    白帽SEO是什么？白帽SEO手法有哪些？
    商城模板_商城模板网站html5_微信小程序商城模板
  • 原文地址：https://blog.csdn.net/qq_21891743/article/details/132723095