chrome開發總結（交互/許可權/存儲） 爬蟲 [TOC] 標簽（空格分隔）： 雜亂之地 經過一翻折騰。還是選擇了chrome來做爬蟲。主要是為瞭解決一些ajax載入的問題以及代理的問題。 1.chrome 配置文件 manifest.json 上面這些不是必須的。把自己需要的加上就可以了。基本上後
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
