Chrome操作指南——入门篇（五）Snippets

2023-10-17 01:18:25

Chrome操作指南——入门篇（五）Snippets

引言

在浩瀚的网络海洋中，我们常常需要获取网页上的图片地址。传统方法要么借助工具，要么通过复杂途径。然而，鲜为人知的是，JavaScript和浏览器携手，就能轻松实现这一需求。本指南将带你领略Snippets的魅力，助你从浏览器中轻松提取图片地址。

Snippets简介

Snippets是Chrome浏览器中的一项功能，允许用户创建和保存代码片段，以便在需要时快速访问和重用。借助Snippets，我们可以轻松地将图片地址提取代码片段添加到浏览器中，随时随地获取图片地址。

创建Snippets

要创建Snippets，请按照以下步骤操作：

打开Chrome浏览器，在地址栏中输入“chrome://settings/snippets”。
点击“新建代码段”按钮。
在“名称”字段中输入一个性名称，例如“提取图片地址”。
在“代码段”字段中输入以下代码：

function extractImageUrls() {
  const images = document.querySelectorAll('img');
  const urls = [];
  for (const image of images) {
    urls.push(image.src);
  }
  console.log(urls);
}

此代码将获取页面上所有图片的src属性，并将它们作为数组打印到控制台。

点击“保存”按钮。

使用Snippets

创建Snippets后，即可随时使用它来提取图片地址。要使用Snippets，请按照以下步骤操作：

打开要提取图片地址的网页。
右键单击网页，然后选择“更多工具” > “开发者工具”。
在“Snippets”选项卡中，找到并点击之前创建的“提取图片地址”Snippets。
控制台将显示页面上所有图片的地址列表。

高级用法

除了基本功能外，Snippets还提供了一些高级用法：

参数传递：Snippets可以接受参数，允许我们在运行时自定义代码行为。例如，我们可以创建一个Snippets来提取特定元素中的图片地址：

function extractImageUrlsFromElement(elementId) {
  const element = document.getElementById(elementId);
  const images = element.querySelectorAll('img');
  const urls = [];
  for (const image of images) {
    urls.push(image.src);
  }
  console.log(urls);
}