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

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

)

　　前言

　　由于业务需要，笔者想为公司开发几个实用的浏览器插件。所以，大概花了一天时间看完了谷歌浏览器插件开发文档。这里我专门总结一下经验，通过一个实际案例来回顾一下插件。开发过程及注意事项.javascript

　　你会收获文字

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

　　

　　熟悉浏览器插件开发的可以直接看上一节插件开发实战。1.开始

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

　　浏览器插件是基于 Web 技术（如 HTML、JavaScript 和 CSS）构建的可以自定义浏览体验的小型软件程序。它们使用户能够根据我的需要或偏好自定义 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 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时，插件图标不会被激活：

　　

　　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 用于为插件全局存储数据。我们在任意一个页面（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 = $(""/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);

});

});

});

复制代码

　　对于内容页面，我们需要实现的是动态生成按钮，并在页面中植入一个弹窗来展示获取到的图片。另一方面，图片数据必须传递给存储，这样弹出页面才能获取图片数据。

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

　　// 弹窗

~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

})

复制代码

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

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