您的位置：首页 > 其它

chrome开发总结（交互/权限/存储）-爬虫

2016-01-30 16:38 197 查看

chrome开发总结（交互/权限/存储）-爬虫

[TOC]

标签（空格分隔）：杂乱之地

经过一翻折腾。还是选择了chrome来做爬虫。主要是为了解决一些ajax加载的问题以及代理的问题。

1.chrome-配置文件

manifest.json

{
// 必选
"manifest_version": 2,
"name": "我的应用",
"version": "版本字符串",

// 推荐
"default_locale": "en",
"description": "纯文本描述",
"icons": {...},

// 选择某一个（或者无）
"browser_action": {...},
"page_action": {...},

// 可选
"author": ...,
"automation": ...,
"background": {
// 推荐
"persistent": false
},
"background_page": ...,

"commands": ...,

"content_scripts": [{...}],
"content_security_policy": "策略字符串",
"converted_from_user_script": ...,
"current_locale": ...,

"externally_connectable": {
"matches": ["*://*.example.com/*"]
},

"homepage_url": "http://path/to/homepage",
"import": ...,
"incognito": "spanning 或 split",

"key": "公钥",
"minimum_chrome_version": "版本字符串",

"offline_enabled": true,

"optional_permissions": ...,
"options_page": "aFile.html",
"page_actions": ...,
"permissions": [...],

"plugins": [...],
"requirements": {...},

"script_badge": ...,
"short_name": "短名称",
"signature": ...,
"spellcheck": ...,
"storage": {
"managed_schema": "schema.json"
},

"tts_engine": ...,
"update_url": "http://path/to/updateInfo.xml",
"web_accessible_resources": [...]
}

上面这些不是必须的。把自己需要的加上就可以了。基本上后面的都是不需要的。下面贴一个我的项目的配置

{
"name": "siteSpider",
"manifest_version": 2,
"version": "0.0.2",
"description": "相对单线程稳定版",
"browser_action": {
"default_icon": "spider.png",
"default_title": "spider",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"webRequest",
"webNavigation",
"webRequestBlocking",
"proxy",
"*://*/*",
"tabs",
"storage",
"unlimitedStorage"
],
"background": { "scripts": ["js/jquery-1.11.2.min.js", "js/bk.js"] },
"content_scripts": [
{
"matches": [
"*://*/*"
],
"js": [
"js/jquery-1.11.2.min.js",
"js/content.js"
]
}
]
}

2. chrome-js简介

chrome一般情况下是3个js。这3个js分别是popup.js/background.js/content.js

这三个js的名字分别代表他们的位置及作用的地点。

popup.js是弹出的那个页面用的js。假如在弹出的页面引用了document.getElement.ById().则他获取的是popup.html页面的内容。而不是当前页的。popup.js所作用的范围就是popup.

background.js：顾名思义，他是一个后台的js，在任何页面都可以调用。他主要的作用就是调度及与我们的后台发送ajax请求等。通过bk.js给popup/content来发送信息。操作tab以及做一些监听等操作。

content.js:是页面中的js，也就是tab中的js。在background.js可以通过

chrome.tabs.query(active:true,currentWindow:true,function(tabs){
//发送一些操作指令
})

来发送一些指令进行操作。并且只能使用chrome.extension.*的api.

3. chrome-交互

chrome插件交互一般是3种js之间的交互。

下面演示一下popup.js跟background.js的交互。

这是一个popup.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</head>
<body>
<div>
<!-- <div>
sku编码：<input type="text" id="sku"/>
</div> -->
<div>
抓取规则:<select id="rule">
<option value="tb">淘宝</option>
</select>
</div>
<div>
抓取页数:<input type="text" id="fetchNum" value="1"/>
</div>
<button id="startFetch">抓取</button>
<button id="hasLoginOk">已登录</button>
</div>
<div>
使用说明：
1.在淘宝搜索好关键词（可选择排序或其他淘宝功能）后，点击抓取。
2.如果出现登录验证，请登录后点击已登录，然后刷新当前网页。
3.插件正常运行中， 禁止使用该浏览器浏览其他网页。
</div>
<!-- <div id="html">
抓取总数：<span id="fetchTotals"></span>
</div>
-->
</body>
</html>

下面是popup.js

```

$(function() {//绑定按钮

$("#startFetch").bind("click", startFetch);

$("#hasLoginOk").bind("click",hasLoginOk);

})

function hasLoginOk() {

chrome.runtime.sendMessage({

type: "mustLoginIsOk"

},

function(response) {

});

}

function startFetch() {

var rule = $("#rule").val();

var num = $("#fetchNum").val();

var sku = $("#sku").val();

var baseUrl = $("#baseUrl").val();

chrome.runtime.sendMessage({//发送消息

type: "fetchUrls",

sku: sku,

rule: rule,

num: num,

baseUrl: baseUrl

},

function(response) {

$("#fetchTotal").html(response);

});

}

/* chrome.extension.onMessage.addListener(function(request,_,response){

if(request.totals){

$("#fetchTotal").html("z");

$("#fetchTotal").html(request.totals);

}

}) */

可以看到popup.js通过

chrome.runtime.sendMessage()

来发送消息。 在backgroundjs通过

chrome.extension.onMessage.addListener()```来放置一个监听器。监听所有的请求。

总结 chrome-js之间的通信都是通过chrome-api的chrome.tabs.sendMessage，chrome.runtime.sendMessage，chrome.extension.onMessage.addListener()来进行的。

api地址：http://chajian.baidu.com/developer/extensions/api_index.html

下面是代码地址

https://github.com/wongloong/chromeSpider

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航