chrome插件网页抓取(谷歌浏览器插件开发的核心概念.2.核心知识点.2.1)

　　chrome插件网页抓取(谷歌浏览器插件开发的核心概念.2.核心知识点.2.1)

　　前言

　　由于业务需要，笔者想为公司开发几个实用的浏览器插件，所以花了大约一天的时间阅读了谷歌浏览器插件开发文档，这里专门总结一下经验，并通过一个实战案例评论插件的开发过程及注意事项。

　　你会收获文字

　　正文开始之前，先来看看作者总结的概述：

　　

　　熟悉浏览器插件开发的可以直接看最后一节插件开发实战。

　　1.开始使用

　　首先我们看一下浏览器插件的定义：

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

　　要开发浏览器插件，我们只需要一个 manifest.json 文件。为了快速上手浏览器插件开发，我们需要打开浏览器开发者工具。具体步骤如下：

　　在谷歌浏览器中输入 chrome://extensions/ 开启开发者模式

　　

　　导入自己的浏览器插件包

　　通过以上三步，我们就可以开始浏览器插件的开发之旅了。浏览器插件一般放在浏览器地址栏的右侧。我们可以在 manifest.json 文件中配置插件的图标，并配置一些规则。 , 可以看到我们的浏览器插件图标，如下图：

　　

　　详细讲解浏览器插件开发的核心概念。

　　2.核心知识点

　　浏览器插件一般涉及以下核心文件：

　　作者画了一张图，粗略的展示了它们之间的关系：

　　

　　接下来，我们来详细了解几个核心知识点。

　　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"

}

}

　　各字段含义介绍如下：

　　

　　文末会给出完整的配置文件地址，供大家学习参考。

　　2.2 background.js

　　后台页面主要用于提供一些全局配置、事件监控、业务转发等。举几个常见的案例：

　　定义右键菜单

　　// background.js

const 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时，插件图标不会被激活：

　　

　　与 content_script 或弹出页面的消息通信

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

});

　　2.3 个内容脚本

　　内容脚本一般是植入到页面中，可以控制页面中的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的用法。

　　2.4 弹窗

　　popup 是当用户点击插件图标时打开的一个小窗口。当失去焦点时，窗口立即关闭。我们一般用它来处理一些简单的用户交互和插件指令。

　　由于弹窗也是一个网页，所以我们一般会创建一个popup.html和popup.js来控制弹窗的显示和交互。我们在 manifest.json 中配置以下内容：

　　{

"page_action": {

"default_title": "小夕图片提取插件",

"default_popup": "popup.html"

},

}

　　这里需要注意的一点是，我们不能直接在popup.html中使用脚本脚本，我们需要使用导入脚本文件的方法。如下：

　　

在线图片提取工具

　　以下是作者写的一个插件的弹窗：

　　

　　3.沟通机制

　　对于一个比较复杂的浏览器插件，我们不仅可以操作dom或者提供基础功能，还需要从第三方或者我们自己的服务器抓取有用的页面数据。这次我们需要用到它。这是插件的通信机制。

　　由于content_script脚本存在于当前页面且受同源策略影响，我们无法将抓取到的数据传输到第三方平台或我们自己的服务器，因此我们需要一个基于浏览器的通信API。这是谷歌浏览器。插件的通信过程：

　　

　　3.1 Popup 和后台相互通信

　　从官方文档中我们知道popup是如何直接访问后台页面的，所以popup可以直接与之通信：

　　// background.js

var getData = (data) => { console.log('拿到数据:' + data) }

// popup.js

let bgObj = chrome.extension.getBackgroundPage();

bgObj.getData(); // 访问bg的函数

　　3.2 弹出或后台页面和 content_script 通信

　　这里我们使用chrome的tabs API，如下：

　　// popup.js

// 发送消息给content_script

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {

console.log(response);

});

});

// 接收消息

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

});

　　content_script 接收和发送消息：

　　// 接收消息

chrome.runtime.onMessage.addListener(

function(message, sender, sendResponse) {

if (message == "activeBtn"){

// ...

sendResponse({farewell: "激活成功"});

}

});

// 主动发送消息

chrome.runtime.sendMessage({greeting: "hello"}, function(response) {

console.log(response, document.body);

// document.body.style.backgroundColor="orange"

});

　　谷歌官网也明确写了消息的长连接：

　　

　　我们可以使用以下方法进行长连接：

　　// content_script.js

var port = chrome.runtime.connect({name: "徐小夕"});

port.postMessage({Ling: "你好"});

port.onMessage.addListener(function(msg) {

if (msg.question == "你是做什么滴?")

port.postMessage({answer: "搬砖"});

else if (msg.question == "搬砖有钱吗?")

port.postMessage({answer: "木有"});

});

// popup.js

chrome.runtime.onConnect.addListener(function(port) {

port.onMessage.addListener(function(msg) {

if (msg.Ling == "你好")

port.postMessage({question: "你是做什么滴?"});

else if (msg.answer == "搬砖")

port.postMessage({question: "搬砖有钱吗?"});

else if (msg.answer == "木有")

port.postMessage({question: "太难了."});

});

});

　　4.数据存储

　　chrome.storage 用于为插件全局存储数据。我们在任意一个页面（popup或者content_script或者background）下存储数据，在上面三个页面我们都可以获取到。具体用法如下：

　　获取数据

chrome.storage.sync.get('imgArr', function(data) {

console.log(data)

});

// 保存数据

chrome.storage.sync.set({'imgArr': imgArr}, function() {

console.log('保存成功');

});

// 另一种方式

chrome.storage.local.set({key: value}, function() {

console.log('Value is set to ' + value);

});

　　5.应用场景

　　谷歌浏览器的插件应用场景很多，如文章开头的思维导图所写。以下是笔者总结的一些应用场景。有兴趣的可以尝试实现一下：

　　有很多实用的开发工具，大家可以玩玩。接下来，我们通过实现一个网页图片提取插件来总结以下浏览器插件的开发过程。

　　6.开发一个抓取网站图片资源的浏览器插件

　　首先，根据作者的风格，我们在开发任何工具之前都要明确需求，那么我们来看看插件的特点：

　　基本上对于这些功能，我接下来会展示核心代码。在介绍代码之前，先预览一下插件的实现效果：

　　

　　

　　插件目录结构如下：

　　

　　因为插件的开发比较简单，所以直接用jquery来开发。这里我们主要关注 popup.js 和 content_script.js。 Popup.js 主要用于获取从 content_script 页面传入的图片数据，并在 popup.html 中显示。还有一点需要注意的是，当页面没有注入生成的按钮时，popupu需要向内容页面发送信息，主动让它生成按钮，代码如下：

　　chrome.storage.sync.get('imgArr', function(data) {

data.imgArr && data.imgArr.forEach(item => {

var imgWrap = $("")

var img = $("" + item + "")

imgWrap.append(img);

$('#content').append(imgWrap);

$('.empty').hide();

})

});

$('#activeBtn').click(function(element) {

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

chrome.tabs.sendMessage(tabs[0].id, "activeBtn", function(response) {

console.log(response);

});

});

});

　　对于内容页面，我们需要实现的是动态生成按钮，并在页面中植入一个弹窗来显示获取的图片。另一方面，我们需要将图像数据传递给存储，以便弹出页面可以获取图像数据。

　　由于页面比较简单，所以不需要太多第三方库。我只是先手写一个模态组件。代码如下：

　　// 弹窗

~function Modal() {

var modal;

if(this instanceof Modal) {

this.init = function(opt) {

modal = $("");

var title = $("" + opt.title + "");

var close_btn = $("X");

var content = $("");

var mask = $("");

close_btn.click(function(){

modal.hide()

})

title.append(close_btn);

content.append(title);

content.append(opt.content);

modal.append(content);

modal.append(mask);

$('body').append(modal);

}

this.show = function(opt) {

if(modal) {

modal.show();

}else {

var options = {

title: opt.title || '标题',

content: opt.content || ''

}

this.init(options)

modal.show();

}

}

this.hide = function() {

modal.hide();

}

}else {

window.Modal = new Modal()

}

}()

　　第一步，我们先批量获取页面图片数据：

　　var imgArr = []

$('img').each(function(i) {

var src = $(this).attr('src');

var realSrc = /^(http|https)/.test(src) ? src : location.protocol+ '//' + location.host + src;

imgArr.push(realSrc)

})

　　因为图片的src路径可能是一个相对地址，所以笔者这里用正则的规则简单处理如下。当然，我们可以进行更细粒度的控制。

　　第二步是将图片数据存入storage：

　　chrome.storage.sync.set({'imgArr': imgArr}, function() {

console.log('保存成功');

});

　　第三步是生成预览图的弹窗，这里我使用了上面实现的模态组件：

　　Modal.show({

title: '提取结果',

content: imgBox

})

　　第四步，当popup发送通知激活按钮时，我们需要在网页中动态插入生成的按钮：

　　chrome.runtime.onMessage.addListener(

function(message, sender, sendResponse) {

if (message == "activeBtn"){

if(!$('.crawl-btn')) {

$('body').append("提取")

}else {

$('.crawl-btn').css("background-color","orange");

setTimeout(() => {

$('.crawl-btn').css("background-color","#06c");

}, 3000);

}

sendResponse({farewell: "激活成功"});

}

});

　　setTimeout 段纯粹是为了吸引用户的注意力，当然我们可以用更优雅的方式来处理。

　　插件的核心代码主要是这些。当然，还有很多细节需要考虑。我把配置文件和一些细节放在github上。有兴趣的可以安装感受一下。

　　github地址：提取网页图片数据的浏览器插件

　　终于

　　如果想学习更多H5游戏、webpack、node、gulp、css3、javascript、nodeJS、canvas数据可视化等前端知识和实战，欢迎在“有趣的前端”学习讨论一起探索前端边界。

　　参考资料