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

上一篇 / 下一篇  2022-09-07 10:45:18

查看( 318 ) / 评论( 0 ) / 评分( 0 / 0 )
　　前言
　　基于谷歌浏览器的插件层出不穷, 它可以帮助我们解决单一网站解决不了的很多问题，也有很多前端极客们开发了大量有意思的浏览器插件，所以我也花了大概一天的时间,看完了谷歌浏览器插件开发文档,在这里特地总结一下经验, 并通过一个实际案例来复盘插件开发的流程和注意事项。
　　你将收获
　　·如何快速上手浏览器插件开发。
　　· 浏览器插件开发的核心概念。
　　· 浏览器插件的通信机制。
　　· 浏览器插件的数据存储。
　　· 浏览器插件的应用场景。
　　· 开发一款抓取网站图片资源的浏览器插件。
　　正文
　　在开始正文之前,我们先来看看笔者总结的概览：
　　如果对浏览器插件开发比较熟悉的朋友可以直接看最后一节插件开发实战。
　　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点击插件图标后打开的自定义窗口, 用来处理用户交互。
　　笔者画了一张简图来大致表示一下它们之间的关系：
　　接下来我们来具体了解一下以上几个核心知识点。
　　（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的权限,比如contextMenus(右键菜单), tabs(操作标签), webRequest(使用web请求), storage(允许使用本地存储), "http://*"(可以通过executeScript或者insertCSS访问的网站)。
　　browser_action浏览器右上角图标设置(包括popup页面, 鼠标悬停时的标题, icon等)。
　　content_scripts需要直接注入页面的javascript脚本。
　　web_accessible_resources普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的。
　　chrome_url_overrides覆盖浏览器默认页面(经常用来做浏览器的自定义桌面)。
　　omnibox向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字(多用于自定义搜索拦截)。
　　default_locale默认语言(比如"zh_CN")。
　　（2）background.js
　　background页面主要用来提供一些全局配置, 事件监听, 业务转发等.举几个常用案例：
　　定义右键菜单。
　　// background.jsconst systems = {  a: '趣谈前端',  b: '掘金',  c: '微信'}chrome.runtime.onInstalled.addListener(function() {  // 上下文菜单  for (let key of Object.keys(systems)) {    chrome.contextMenus.create({      id: key,      title: systems[key],      type: 'normal',      contexts: ['selection'],    });  }});// manifest.json{    "permissions": ["contextMenus"]}
　　效果如下：
　　设置只有.com后缀的页面才会激活插件。
　　chrome.runtime.onInstalled.addListener(function() {
　　  // 类似于什么时候激活浏览器插件图标这种感觉
　　  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
　　    chrome.declarativeContent.onPageChanged.addRules([{
　　      conditions: [new chrome.declarativeContent.PageStateMatcher({
　　        pageUrl: {hostSuffix: '.com'},
　　      })
　　      ],
　　      actions: [new chrome.declarativeContent.ShowPageAction()]
　　    }]);
　　  });
　　});
　　如下图所示,当页面地址的后缀不等于.com时,插件icon将不被激活：
　　 和content_script或者popup页面进行消息通信。
　　chrome.runtime.onMessage.addListener(
　　  function(request, sender, sendResponse) {
　　    console.log(sender.tab ?
　　                "from a content script:" + sender.tab.url :
　　                "from the extension");
　　    if (request.greeting == "hello")
　　      sendResponse({farewell: "goodbye"});
　　  });
　　（3）content-scripts
　　内容脚本一般植入会被植入到页面中, 并且可以控制页面中的dom. 我们可以利用它实现屏蔽网页广告, 定制页面皮肤等操作. 在manifest.json中的基本配置如下：
　　{
　　    "content_scripts": [{
　　    "matches": [
　　        "http://*/*",
　　        "https://*/*"
　　    ],
　　    "js": [
　　        "lib/jquery3.4.min.js",
　　        "content_script.js"
　　    ],
　　    "css": ["base.css"]
　　  }],
　　}
　　以上代码中我们定义了content_scripts允许注入的页面范围, 插入页面的js以及css, 这样我们就能轻松改变某一个页面的样式.比如我们可以在页面中注入一个按钮：
　　在后面的浏览器插件案例中笔者会详细介绍content_scripts的用法。
　　（4）popup
　　popup是用户点击插件图标时打开的一个小窗口，当失去焦点后窗口就立即关闭，我们一般用它来处理一些简单的用户交互和插件说明。
　　由于popup窗口也是一个网页,所以我们一般会建立一个popup.html和popup.js用来控制popup的页面展示和交互.我们在manifest.json中配置如下：
　　{
　　    "page_action": {
　　        "default_title": "小夕图片提取插件",
　　        "default_popup": "popup.html"
　　  },
　　}
　　这里要注意一点的是,我们在popup.html中不能直接使用script脚本,需要用引入脚本文件的方式.如下：
　　<!DOCTYPE html>
　　<html>
　　  <head>
　　    <title>在线图片提取工具</title>
　　    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
　　  </head>
　　  <body>
　　    <div class="pop-wrap">
　　    </div>
　　    <script src="lib/jquery3.4.min.js"></script>
　　    <script src="popup.js"></script>
　　  </body>
　　</html>
　　以下是笔者写的一个插件的popup页面：
　　测试实战课程免费送（五选二），点击下方链接填写测试行业调查问卷，提交后即可获得！链接：http://vote.51testing.com/  (助力行业趋势，必须有你！）

收藏 举报

TAG: 软件开发 Python

 

评分：0

我来说两句

Open Toolbar