chrome开发总结(交互/权限/存储)-爬虫

chrome开发总结(交互/权限/存储)-爬虫

标签(空格分隔): 杂乱之地


经过一翻折腾。还是选择了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

posted @ 2016-01-30 16:38  宁静致远_  阅读(7433)  评论(0编辑  收藏  举报