30分钟开发一款抓取网站图片资源的浏览器插件

前言

由于业务需求, 笔者要为公司开发几款实用的浏览器插件,所以大致花了一天的时间,看完了谷歌浏览器插件开发文档,在这里特地总结一下经验, 并通过一个实际案例来复盘插件开发的流程和注意事项.

你将收获

如何快速上手浏览器插件开发
浏览器插件开发的核心概念
浏览器插件的通信机制
浏览器插件的数据存储
浏览器插件的应用场景
开发一款抓取网站图片资源的浏览器插件

正文

在开始正文之前,我们先来看看笔者总结的概览:

如果对浏览器插件开发比较熟悉的朋友可以直接看最后一节插件开发实战。

1.入门

首先我们看看的浏览器插件的定义:

浏览器插件是基于Web技术（例如HTML，JavaScript和CSS）构建的可以定制浏览体验的小型软件程序。它们使用户可以根据个人需要或偏好来定制Chrome功能和行为。

要想开发一款浏览器插件,我们只需要有一个manifest.json文件即可, 为了快速上手浏览器插件开发,我们需要把浏览器开发者工具打开, 具体步骤如下:

在谷歌浏览器中输入chrome://extensions/
将开发者模式启动
导入自己的浏览器插件包

通过以上三个步骤我们就可以开启浏览器插件开发之旅了.浏览器插件一般放在浏览器地址栏右侧,我们可以在manifest.json文件配置插件的icon,并配置一定的规则,就能看到我们的浏览器插件图标了,如下图:

下面我们来具体讲解一下浏览器插件开发的核心概念.

2.核心知识点

浏览器插件一般涉及以下几个核心文件:

manifest.json 用来配置所有和插件相关的配置(必须放在根目录)
background.js 后台脚本(后台页面),生命周期和浏览器一致,一般放置全局代码
content-scripts 插件向页面注入脚本的一种形式,我们可以通过content-scripts向页面注入js和css资源,并可控制允许注入的范围
popup 点击插件图标后打开的自定义窗口, 用来处理用户交互

笔者画了一张简图来大致表示一下它们之间的关系:

接下来我们来具体了解一下以上几个核心知识点.

2.1 manifest.json

谷歌官网给我们提供了一份简单的配置,如下:

{"name": "My Extension","version": "2.1","description": "Gets information from Google.","icons": {"128": "icon_16.png","128": "icon_32.png","128": "icon_48.png","128": "icon_128.png"},"background": {"persistent": false,"scripts": ["background_script.js"]},"permissions": ["https://*.google.com/", "activeTab"],"browser_action": {"default_icon": "icon_16.png","default_popup": "popup.html"}
 }

各字段含义介绍如下:

name 浏览器插件名称, 将会在插件列表中显示
description 浏览器插件简介, 方便告诉开发者插件的功能和作用, 将会在插件列表中显示
version 浏览器插件版本
icon 浏览器插件图标

30分钟开发一款抓取网站图片资源的浏览器插件相关推荐

开发一款抓取Android系统Log的APP(logcat, kernel, Memory, cpu)
近期项目需要一款抓取系统log的实用工具,具体的内容包括kernel中的log, cpu中的log, memory 中的log, 以及system中的log,在Android4.1之后认为应用读取 ...
如何在线把网站html生成xml文件_快速抓取网站信息工具
网络信息抓取如今广泛运用于社会生活的各个领域.在接触网络信息抓取之前,大多数人会觉得这需要编程基础,也因此对信息抓取望而却步,但是随着技术的发展,诞生出了许多工具,借助这些工具我们编程小白也可以获取大 ...
利用wget 抓取网站网页包括css背景图片
利用wget 抓取网站网页包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
查询数据抓取网站数据_有了数据，我就学会了如何在几个小时内抓取网站，您也可以...
查询数据抓取网站数据 I had a shameful secret. It is one that affects a surprising number of people in the da ...
阻止搜索引擎抓取网站的工具_使用PHP将抓取的网站转变为搜索引擎
阻止搜索引擎抓取网站的工具 In the previous part of this tutorial, we used Diffbot to set up a crawljob which woul ...
python爬虫抓取网站技巧总结
不知道为啥要说是黑幕了??哈哈哈-..以后再理解吧 python爬虫抓取网站的一些总结技巧学用python也有3个多月了,用得最多的还是各类爬虫脚本:写过抓代理本机验证的脚本,写过在discuz论坛 ...
10分钟开发一款“一键二次元化“AI小程序
10分钟开发一款"一键二次元化"AI小程序 1. 创建人像卡通化应用登录云开发平台.通过以下链接 https://workbench.aliyun.com/applicatio ...
抓取网站数据入库详解，附图文
抓取网站数据入库详解,附图文一. 分析需求 1.1 需求分析刚好有这样一个需求,去抓取下方网站的页面全部数据,并存入MySQL数据库. 这个页面为: 爬取页面年月日选择出生于几点,性别: 男或 ...
Python爬虫小偏方：如何用robots.txt快速抓取网站？
作者 | 王平,一个IT老码农,写Python十年有余,喜欢分享通过爬虫技术挣钱和Python开发经验. 来源 | 猿人学Python 在我抓取网站遇到瓶颈,想剑走偏锋去解决时,常常会先去看下该网站的 ...

30分钟开发一款抓取网站图片资源的浏览器插件

前言

你将收获

正文

1.入门

2.核心知识点

30分钟开发一款抓取网站图片资源的浏览器插件相关推荐

最新文章

热门文章