开发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": [ "" ],
"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

开发chrome extension抓取页面数据，并传输到另一页面

相关

标签