js 抓取网页内容(3.详细代码（1）基础内容分析本次使用的是vscode演示)

　　js 抓取网页内容(3.详细代码（1）基础内容分析本次使用的是vscode演示)

　　1.前言

　　最近由于公司项目开发需要，研究了一段时间chrome扩展开发。使用chrome扩展开发的好处是学习门槛很低，主要使用js、css、html。最常用的三个前端的东西，除了研究chrome提供的界面，还可以用。开发起来非常方便。但是，也有缺点。开发的控件只能在部分使用 webkit 的浏览器中使用。（chrome的内核正是Chromium引擎。它使用苹果的WebKit作为浏览器内核原型，也就是WebKit内核的一个分支）***

　　一般来说，只要有前端开发经验，花一天时间阅读文档，就可以快速上手chrome扩展。这是帖子文档的链接：

　　360文档 360文档其实就是chrome文档的翻译版，一模一样，只是有些年头了，里面可能没有更新的内容。Chrome 官方文档 这是官方文档。提供各种界面演示，但您需要克服障碍并具有良好的英语水平。2.实现内容

　　这主要是通过从一个 网站 抓取所需的数据并将其放在另一个页面上来实现的。需要对chrome扩展api和结构有一定的了解。如果你不知道，先去文档学习。

　　3.详细代码（1）基本内容分析

　　这次使用了vs code开发工具演示，首先来看一下*敏*感*词*

　　

　　左边的是目录结构。我在这里详细说一下：

　　第一个是在图像文件夹下。放置图标文件，最好在 19 像素左右。如果它们太大，它们将被压缩。

　　然后是js文件夹，里面的文件是主要实现功能的文件：

　　1.background.js 是一个常驻页面。它的生命周期是插件所有类型页面中最长的。它在浏览器打开时打开，在浏览器关闭时关闭，所以一般需要一直运行的全局代码，启动时运行，全局代码放在后台，一般也是一个文件用于数据交互。

　　2.content-script.js 这个文件其实就是我们插入打开页面的js代码。它与打开的页面共享相同的DOM，但与页面的js隔离，不能相互调用。每次打开页面时，都会生成并运行一个 content-script.js。

　　3.jquery.js (非必须) 这个看个人喜好，方便以后写代码。

　　4.popuop.js 这是我们运行的扩展的js文件，它只能控制扩展。

　　接下来是 manifest.json。这个文件是整个程序的配置文件。这是非常重要的。这是下面的图片。

　　

　　"姓名": "XXXXXXX",

　　"版本": "XXXXXXX",

　　"Manifest_version": 2,

　　这些字段是必需的。请注意， manifest_version 值必须为 2。

　　描述：是程序的描述。

　　browser_action：这里使用浏览器，也可以使用page、app等。里面的属性对应图片地址提示信息扩展程序的显示页面。

　　后台：如上所述，是程序驻留在后台的代码。

　　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" ]

}

]

}

　　这里没什么特别的，正常配置，上面已经解释过了。

　　扩展页面：popup.html

　　

button {width:100px;}

button ~ button {margin-top:10px;}

Copy

Paste

　　这里引用了需要的js文件，两个按钮用来操作抓包和放置数据。

　　这个文件决定了我们的程序是什么样的：

　　

　　后台页面：background.js

　　window.data = null;

　　只需提供一段数据供公众使用。

　　由于数据抓取和放置比较繁琐，我们拆解说明，最后有合并的代码

　　数据捕获：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");

}

}

}

);

　　以上是抓取部分，可以获取需要的数据并保存。不好理解的也有注释，基本都能看懂。

　　将数据放在另一个页面上：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");

}

}

}

);

　　其实放数据就是抓起来翻过来，然后放整体代码。

　　弹出窗口.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);

});

});

}

});

});

　　内容脚本.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");

}

}

}

);

　　4.添加到chrome和效果演示

　　经过上面的代码，功能就完成了。接下来，将扩展添加到 chrome 并显示效果。

　　添加到 chrome 将所有文件放在文件夹中。打开谷歌浏览器，在地址栏输入 chrome://extensions/ 勾选开发者模式，点击加载解压后的扩展程序选择文件夹

　　

　　使用控件

　　我们控件获取数据的URL是微软必应搜索，放置数据的URL是360搜索

　　想要抓取或放置其他网址的，只需将用于获取数据或赋值的代码部分的id替换为您需要抓取或放置页面输入的id即可。

　　1.首先在爬取网址（微软必应搜索）的目标输入框中输入点数据，点击右上角添加的扩展名，选择复制。

　　

　　2. 然后找到展示位置网页（360搜索），点击粘贴，我们的数据就会自动上传。

　　

　　写在最后

　　chrome加载扩展时，有时可能会出现bug。如果你是小伙伴，写完代码后功能无法实现。. 你可以尝试打开扩展页面Ctrl+R（重新加载），同时刷新你的抓取页面和展示位置页面，会有效果！！