chrome 插件 抓取网页qq聊天记录(百度翻译小插件练手.js注入脚本进入浏览页面)

　　chrome 插件 抓取网页qq聊天记录(百度翻译小插件练手.js注入脚本进入浏览页面)

　　昨天上网看了一下chrome开发文档，写了一个翻译小插件来练功。通常，在外文文档中查找生词是很方便的。

　　简单介绍及实现效果

　　插件的主要思想很简单，将content.js注入脚本进入浏览页面，使用window.getSelection()方法获取当前页面鼠标选中的文本，然后使用chrome的api chrome.extension.sendRequest 发送之前获取的字符。给后台，然后后台的ajax调用翻译接口获取翻译结果，并使用chrome.storage.local来存储并显示在弹窗中。

　　

　　为了直接使用popup输出结果，也可以写一个浮动框实时显示结果，只需将后台的结果发回内容即可。

　　显示结果

　　

　　百度翻译的反应还是很快的。

　　内容.js

　　Content.js 在插件中用于将脚本或 css 样式注入当前页面。本文实现的插件选择对github及其子链接有效，内容文件写在插件清单文件中：

　　 "content_scripts": [

{

"matches": ["https://github.com/*"],

"js": ["jquery.js", "md5.js", "content.js"]

}

],

　　为了演示，这里设置只在github相关页面进行脚本注入，同时指定注入的js文件。

　　具体逻辑在 content.js 文件中实现：

　　var now = "begin select"

$(document).ready(function(){

$("div").on("click", selectTrans)

})

function selectTrans(){

var text = getSelect()

var textStr = text.toString()

// 防止因为div太多多次调用

if(textStr != now && textStr!=""){

console.log(text.toString())

now = textStr

sendRequestToPopup(textStr)

}

}

function getSelect(){

var text = window.getSelection()

if(text == null){

return "blank"

}

return text

}

　　代码首先在所有的 div 块上设置了一个点击回调函数，这样页面上选择的任何文本都可以被检索到。

　　在 getSelect() 函数中，使用 window.getSelection() 来获取选中的信息。要获取文本，您需要调用其 toString() 方法来获取字符串。为了防止div太多，点击别处的时候会得到一个空字符串或者重复字符串，在selectTrans函数中进行判断，判断成功后传递信息。

　　function sendRequestToPopup(textStr){

chrome.extension.sendRequest({'text': textStr}, function(response){

console.log(response); // 将返回信息打印到控制台里

});

}

　　调用chrome.extension库中的sendRequest方法，传递收录数据的对象，并设置回调函数在控制台输出返回的信息。只要收到请求，此方法就可以将请求传递给弹出窗口和后台。

　　背景.js

　　由于内容安全策略（CPS）安全的规定，在https页面中无法访问http，所以使用内容传输数据，在后台进行ajax接口访问。

　　Manifest中设置后台的脚本文件，这里只需要进行后台数据处理，所以不需要html文件：

　　 "background":{

"scripts": ["jquery.js", "md5.js", "background.js"]

},

　　第一种是使用onRequest*敏*感*词*传输的数据，处理后存放在chrome的本地：

　　chrome.extension.onRequest.addListener(

function(request, sender, sendResponse) {

textNow = request.text

sendResponse("send success:" + textNow);

console.log(textNow)

trans(textNow)

// afterTrans = textNow

chrome.storage.local.set(

{

former_result: textNow,

translate_result: afterTrans

},function(){

console.log("store result:"+afterTrans)

}

)

}

)

　　其中trans函数调用ajax获取翻译信息，翻译接口使用百度翻译，返回一个对象信息，处理后得到翻译结果。调用接口需要对应应用的id和key，开发者平台可以申请。

　　function trans(text){

// 调用百度翻译接口

var query = text.toString()

var from = "auto"

var to = "zh"

var appid = "xxx" //你的id

var key = "xxx" //你的key

var salt = (new Date).getTime()//取当前时间作为随机数

var str1 = appid + query + salt + key

var md5_str = MD5(str1)

$.ajax({

url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',

type: 'get',

dataType: 'json',

data:{

appid: appid,

q: query,

from: from,

to: to,

salt: salt,

sign: md5_str

},

success: function(result){

console.log(result)

var res = getTranslateResult(result)

afterTrans = res

console.log(res)

// setResult(res)

}

})

}

　　MD5文件取自百度翻译demo，可以直接使用。

　　需要注意的是，chrome插件不支持jsonp格式信息的获取。百度翻译演示中ajax的dataType为jsonp，这里改为json。否则会违反 csp 规定，错误是：因为它违反了以下 Content Security Policy 指令：“script-src 'self'”。请注意，'script-src-elem' 没有明确设置，因此 'script-src' 用作后备。

　　弹出窗口

　　Popup 是浏览器动作的一个组件，因为它会因为失去焦点而关闭页面，所以在选择下一个单词后会重新加载。这时候，读取相应的数据并显示就足够了。

　　显现：

　　 "browser_action": {

"default_icon": "images/t.png",

"default_title": "translate tool",

"default_popup": "test.html"

},

　　需要注意的是，为了安全起见，不会在弹窗中直接使用chrome插件。

　　Popup.js：

　　$(document).ready(function(){

chrome.storage.local.get("translate_result",function(result){

$("#translate_result").text(result['translate_result'])

$(".main_screen")

})

chrome.storage.local.get("former_result",function(result){

$("#former_result").text(result['former_result'])

})

})

　　加载完成后只需显示相应的值。

　　总结

　　阅读文档后，只需调用接口，熟悉插件即可。实现相对简单。如果要继续美化，可以使用内容的CSS注入实现浮框。能在当前页面中注入脚本就好了，可以用来爬取，修改页面样式等要注意安全。毕竟可以直接注入脚本，不知道的插件不要用。

　　项目已经上传到github：