浏览器抓取网页(谷歌浏览器插件开发文档,插件总结经验 )

　　浏览器抓取网页(谷歌浏览器插件开发文档,插件总结经验

)

　　前言

　　由于业务需要，笔者想为公司开发几个实用的浏览器插件，所以一般花了一天时间看完了谷歌浏览器插件开发文档，这里特意总结一下经验，对插件进行复习——通过一个实际案例。开发过程及注意事项.javascript

　　你会得到文字

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

　　

　　如果你熟悉浏览器插件开发，可以直接观看最后一节插件开发实践。1.开始

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

　　浏览器插件是基于 HTML、JavaScript 和 CSS 等 Web 技术构建的小型软件程序，可自定义浏览体验。它们使用户能够根据我的需要或偏好自定义 Chrome 的功能和行为。前端

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

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

　　

　　导入自己的浏览器插件包

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

　　

　　下面详细讲解一下浏览器插件开发的核心概念。2.核心知识点

　　浏览器插件通常涉及以下核心文件：node

　　作者画了一张图来粗略表示它们之间的关系：jquery

　　

　　接下来，让我们仔细看看几个核心知识点。网页包

　　2.1 manifest.json

　　谷歌官网为我们提供了一个简单的配置，如下：css3

　　{

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

　　

　　3. 与 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.html和popup.js来控制弹窗的页面显示和交互。我们在 manifest.json 中配置如下：

　　{

"page_action": {

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

"default_popup": "popup.html"

},

}

复制代码

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

　　

在线图片提取工具

复制代码

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

　　

　　3.通讯机制

　　对于一个比较复杂的浏览器插件，我们不仅需要操作 DOM 或者提供基本的功能，还需要从第三方或者我们自己的服务器上获取有用的页面数据。这时候，我们就需要使用插件式的通信机制了。

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

　　

　　3.1 弹出和后台相互通信

　　从官方文档我们知道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 用于为插件全局存储数据。我们将数据存储在任何页面（弹出窗口或 content_script 或背景）下。我们可以在上面三个页面上得到它。具体用法如下：

　　获取数据

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 = $(""/span + item + span class="hljs-string""")

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

});

});

});

复制代码

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

　　因为页面比较简单，所以作者不需要太多的第三方库。作者简单的先写了一个modal组件。代码如下：

　　// 弹窗

~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组件：

　　Modal.show({

title: '提取结果',

content: imgBox

})

复制代码

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

　　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数据可视化等前端知识和实战，欢迎在公众号“趣前沿”加入我们的技术群-end”一起学习、讨论和探索前端边界。