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

来源：互联网发布：数控编程的基本步骤编辑：程序博客网时间：2024/06/05 21:13

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

chrome开发总结交互权限存储-爬虫
- chrome-配置文件
- chrome-js简介
- 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

0 0