开发chrome extension抓取页面数据,并传输到另一页面
引用地址:https://blog.csdn.net/m0_37729058/article/details/79485302
1.前言
由于最近公司项目开发需要,学习了一段时间的chrome extension开发。使用chrome extension开发的优点是学习门槛非常的低,主要使用的就是js,css,html。前端最常用的三个东西,,另外去研读一下chrome提供的接口,会使用即可。开发起来可谓是 非常方便。不过缺点也是有的,开发的控件只能限定于部分使用webkit的浏览器使用(chrome的内核确切的说是Chromium引擎,它是使用苹果公司的WebKit作为浏览器内核原型,是WebKit内核的一个分支)
一般来说,只要你有前端开发经验,,花一天时间阅读文档,即可快速上手chrome extension。这里给帖出文档的链接:
360文档 360文档实则是chrome文档的翻译版,一模一样,就是有些年头了,更新内容里面可能没有。
chrome官方文档这个是官方文档,,各种接口demo一应俱全,,就是需要FQ和英文水平较好。
2.实现内容
这个主要实现从一个网站内抓取需要的数据,再放置到另外一个页面上。需要对chrome extension api和结构有一定的了解,,不了解的小伙伴先去文档学习一下。
3.详细代码
(1)基础内容分析
本次使用的是vs code开发工具演示,首先上一下结构图
左边的就是目录结构。这里详细说一下:
首先是image文件夹下方,放置的是图标文件,最好19像素左右,太大了会被压缩。
然后是js文件夹,这里面的文件是主要实现功能的文件:
1.background.js 是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面,也是数据交互常用到的文件。
2.content-script.js 这个文件实际上是我们插入打开页面的js代码,和打开页面共用一个DOM但是和页面的js是隔离的,相互无法调用。每打开一个页面就会有一个content-script.js生产并 运行。
3.jquery.js(非必须) 这个看个人喜好,方便之后代码书写。
4.popuop.js 这个就是我们运行的扩展程序的js文件,他只能控制扩展程序。
接下来是manifest.json,这个文件是整个程序的配置文件,非常重要,这里面上个图说明下
“name”: “XXXXXXXX”,
“version”: “XXXXXXX”,
“manifest_version”: 2,
这些字段是必须的,注意manifest_version值必须是2。
description: 是程序描述。
browser_action: 这里使用的是browser,还可以使用page,app等,里面的属性对应的是 图片地址 提示信息 扩展程序展示页面。
backgroud : 上面有提到过,算是程序常驻后台的代码。
content_script : matches表示匹配的地址 指的就是所有,js指的就是说注入页面的js文件。
最后是popup.html 这里面扩展程序的展示页面。
还不明白的小伙伴调至这里 manifest.json属性详解
(2)代码实现
既然明白了结构,接下来就要开始开发了。
先是文件配置:manifest.json
{
"name": "Copy Data Extension",
"manifest_version": 2,
"version": "1.0",
"description": "The extension for copy data.",
"browser_action": {
"default_icon": "image/showpicture.png",
"default_title": "Copy Data",
"default_popup": "popup.html"
},
"background": {
"scripts": ["js/background.js"]
},
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js": [ "js/jquery-1.12.4.min.js", "js/content-script.js" ]
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
这里面没有什么特别的内容,正常配置,上面解释过。
扩展程序页面:popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
这里面引用了需要的js文件,两个按钮用来操作抓取和放置数据。
这个文件就确定了我们程序的样子:
背景页:background.js
window.data = null;
1
2
这里提供个数据公共使用即可。
由于数据的抓取和放置比较繁琐,拆开解释,最后有合并的代码
数据抓取:popuo.js && content-script.js
************************** popup.js *****************************
$(function () {
$("#btnCopy").click(function () {
// chrome.tabs.query可以通过回调函数获得当前页面的信息tabs
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
// 发送一个copy消息出去
chrome.tabs.sendMessage(tabs[0].id, { action: "copy" }, function (response) {
// 这里的回调函数接收到了要抓取的值,获取值得操作在下方content-script.js
// 将值存在background.js的data属性里面。
var win = chrome.extension.getBackgroundPage();
win.data=response;
console.log(response);
});
});
});
});
************************** content-script.js *****************************
//监听消息
chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.action === "copy") {
//收到copy信息,开始获取当前页面id为sb_form_q的值
var ctrl = $("#sb_form_q");
if (ctrl.length > 0) {
// 如果获取的值不为空则返回数据到popup.js的回调函数
if (sendResponse) sendResponse(ctrl.val());
} else {
alert("No data");
}
}
}
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
以上就是抓取部分,可以获得需要的数据并保持起来。不太好明白的都有注释,基本上很容易理解。
放置数据到另一页面:popuo.js && content-script.js
************************** popup.js *****************************
$(function () {
$("#btnPaste").click(function () {
// 将之前抓取到的并保存的data数据从background.js取出
var win = chrome.extension.getBackgroundPage();
if (win.data) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
// 将之前抓取的数据发送
chrome.tabs.sendMessage(tabs[0].id, { action: "paste", data: win.data }, function (response) {
console.log(response);
});
});
}
});
});
************************** content-script.js *****************************
chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.action === "paste") {
// 收到paste消息和之前抓取的值
var ctrl = $("#input");
if (ctrl.length > 0) {
// 将值放入目标网页的id为input的输入框中
ctrl.val(request.data);
sendResponse("OK");
} else {
alert("No data");
}
}
}
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
其实放置数据就是抓取翻过来,接下来放整体代码。
popup.js
$(function () {
$("#btnCopy").click(function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, { action: "copy" }, function (response) {
var win = chrome.extension.getBackgroundPage();
win.data=response;
console.log(response);
});
});
});
$("#btnPaste").click(function () {
var win = chrome.extension.getBackgroundPage();
if (win.data) {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, { action: "paste", data: win.data }, function (response) {
console.log(response);
});
});
}
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
content-script.js
chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.action === "copy") {
var ctrl = $("#sb_form_q");
if (ctrl.length > 0) {
if (sendResponse) sendResponse(ctrl.val());
} else {
alert("No data");
}
} else if (request.action === "paste") {
var ctrl = $("#input");
if (ctrl.length > 0) {
ctrl.val(request.data);
sendResponse("OK");
} else {
alert("No data");
}
}
}
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
4.添加到chrome和效果演示
经过上面的代码,功能已经完成了。下来将扩展添加到chrome里面,并且展示效果。
添加到chrome
将所有的文件放置文件夹内。
打开谷歌浏览器,地址栏输入chrome://extensions/
勾选上开发者模式,并点击加载已解压的扩展程序 选中文件夹
使用控件
我们控件抓取数据的网址是 微软Bing搜索,放置数据的网址是 360搜索
想抓取或放置其他网址的小伙伴,,将抓取和放置那一部分代码用来获取数据或赋值的id换成你需要抓取或放置页面input的id即可
1.先在抓取网址(微软Bing搜索)目标input框中输入点数据,并点击右上角之前添加的扩展程序,选择copy.
2.接着找到放置网页( 360搜索 ),点击Paste,就把我们的数据自动就放上去了。
写在最后
chrome加载扩展的时候,有时可能会有BUG,,如果小伙伴,代码写完之后功能无法实现。。可以尝试打开扩展程序页面Ctrl+R(重新加载),同时刷新你的抓取页面和放置页面,就会有效果啦!!
————————————————
版权声明:本文为CSDN博主「爆裂吧叶子」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_37729058/article/details/79485302