1.前言
由于最近公司项目开发需要，学习了一段时间的chrome extension开发。使用chrome extension开发的优点是学习门槛非常的低，主要使用的就是js,css,html。前端最常用的三个东西，，另外去研读一下chrome提供的接口，会使用即可。开发起来可谓是 非常方便。不过缺点也是有的，开发的控件只能限定于部分使用webkit的浏览器使用***（chrome的内核确切的说是Chromium引擎,它是使用苹果公司的WebKit作为浏览器内核原型,是WebKit内核的一个分支）***
一般来说，只要你有前端开发经验，，花一天时间阅读文档，即可快速上手chrome extension。这里给帖出文档的链接：
- 360文档 360文档实则是chrome文档的翻译版，一模一样，就是有些年头了，更新内容里面可能没有。
- chrome官方文档这个是官方文档，，各种接口demo一应俱全，，就是需要翻墙和英文水平较好。
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" ]
}
]
}
这里面没有什么特别的内容，正常配置，上面解释过。
扩展程序页面：popup.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/popup.js"></script>
<style>
button {width:100px;}
button ~ button {margin-top:10px;}
</style>
</head>
<body>
<button id="btnCopy">Copy</button>
<button id="btnPaste">Paste</button>
</body>
</html>
这里面引用了需要的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");
}
}
}
);
其实放置数据就是抓取翻过来，接下来放整体代码。
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);
});
});
}
});
});
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");
}
}
}
);
4.添加到chrome和效果演示
经过上面的代码，功能已经完成了。下来将扩展添加到chrome里面，并且展示效果。
添加到chrome
- 将所有的文件放置文件夹内。
- 打开谷歌浏览器，地址栏输入chrome://extensions/
- 勾选上开发者模式，并点击加载已解压的扩展程序 选中文件夹
使用控件
我们控件抓取数据的网址是 微软Bing搜索，放置数据的网址是 360搜索
想抓取或放置其他网址的小伙伴，，将抓取和放置那一部分代码用来获取数据或赋值的id换成你需要抓取或放置页面input的id即可
1.先在抓取网址（微软Bing搜索）目标input框中输入点数据，并点击右上角之前添加的扩展程序，选择copy.
2.接着找到放置网页（ 360搜索 ），点击Paste,就把我们的数据自动就放上去了。
写在最后
chrome加载扩展的时候，有时可能会有BUG，，如果小伙伴，代码写完之后功能无法实现。。可以尝试打开扩展程序页面Ctrl+R（重新加载），同时刷新你的抓取页面和放置页面，就会有效果啦！！
扫一扫
1106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
