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

前言

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

你将收获

• 如何快速上手浏览器插件开发

• 浏览器插件开发的核心概念

• 浏览器插件的通信机制

• 浏览器插件的数据存储

• 浏览器插件的应用场景

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

正文

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

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

1.入门

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

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

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

1. 在谷歌浏览器中输入chrome://extensions/

2. 将开发者模式启动

   

3. 导入自己的浏览器插件包

通过以上三个步骤我们就可以开启浏览器插件开发之旅了.浏览器插件一般放在浏览器地址栏右侧,我们可以在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 浏览器插件图标

  

• background 背景页的脚本路径,一般为插件目录的相对地址

• permissions 允许使用的浏览器API的