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

chrome开发总结（交互/权限/存储）-爬虫的更多相关文章

  1. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  2. 不仅仅是浏览器 走近Chrome开发人员工具

    Chrome浏览器以其简单.快速.安全.稳定.扩展丰富等特性受到了不少人的喜爱,除了这些特性,Chrome浏览器还提供了非常简单方便的开发人员工具,可以为开发提高效率,加上Chrome浏览器对HTML ...

  3. Web自动化之Headless Chrome开发工具库

    命令行运行Headless Chrome Chrome 安装(需要带梯子) 下载地址 几个版本的比较 Chromium 不是Chrome,但Chrome的内容基本来源于Chromium,这个是开源的版 ...

  4. AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

  5. Chrome 开发工具之Timeline

    之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程 ...

  6. Chrome 开发工具之Sources

    Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的. 文件列表 展示当前页面内所引用资源的列表,和平常 ...

  7. Chrome 开发工具之Console

    前段时间看git的相关,记的笔记也大致写到了博客上,还有些因为运用不熟,或者还有一些疑惑点,暂时也不做过多纠缠,之后在实践中多运用得出结论再整理分享吧. 工欲善其事,必先利其器.要想做好前端的工作,也 ...

  8. winform快速开发平台 -> 通用权限管理之动态菜单

    这几个月一直忙APP的项目,没来得及更新项目,想想该抽出时间整理一下开发思路,跟大家分享,同时也希望得到宝贵的建议. 先说一下我们的权限管理的的设计思路,首先一个企业信息化管理系统一定会用到权限管理, ...

  9. Chrome开发工具之Console

    Chrome开发工具-Console 看了别人的博客,才发现在百度主页用开发工具“Console”可以看到百度的招聘信息 前端调试工具可以按F12打开,谷歌的开发工具中的Console面板可以查看错误 ...

随机推荐

  1. React Ntive 学习手记

    React使今年来比较热门的前端库,之所以说是库呢,因为React.js是应用于MVC中的V层, 它并不是一个完整的MVC框架,所以,我也不知称之为框架了. 不过这并不影响React的火热. 混合应用 ...

  2. <Oracle Database>数据库启动与关闭

    启动和关闭Oracle数据库 要启动和关闭数据库,必须要以具有Oracle 管理员权限的用户登陆,通常也就是以具有SYSDBA权限的用户登陆.一般我们常用INTERNAL用户来启动和关闭数据库(INT ...

  3. Firebird数据库的Select语句

    select first 10 skip 8 * from t_data   //跳过前8行不要,取10行,即取第9行到18行共10行 select  first 10 * from t_data   ...

  4. Linux初记

    ctrl+u可以在shell下删除行,如果此键不起作用,就试试ctrl+x ctrl+z可以将程序挂起,不会终止程序,但可以将程序挂起. 通过fg命令可再把此作业切换到前台 cp命令的目标文件如果是一 ...

  5. 使用Axure来仿真Vogue网站

    用户体验包括三部分:用户研究.视觉设计和交互设计.按顺序进行,在用户研究和视觉设计之后,开始交互设计,Axure是最好的交互设计的软件. Vogue是著名的奢侈品品牌,网站设计“高大上”,用Axure ...

  6. 练习1-13：编写一个程序，打印输入中单词长度的直方图（水平）（C程序设计语言 第2版）

    简单未考虑标点符号 #include <stdio.h> #define MAX_WORD_LEN 10 #define BLANK 0 #define IN_WORD 1 #define ...

  7. windows下安装python和依赖包的利器——Anaconda

    在windows下安装python和很多依赖包,安装起来略为痛苦,可以使用python的大整合包——Anaconda Anaconda下载地址: http://continuum.io/downloa ...

  8. ng2-timesheet, 一个timesheet.js的angular2复制版

    一个 timesheet.js (JavaScript library for HTML5 & CSS3 time sheets) 的 Angular 2 复制版 用法: npm instal ...

  9. 分享我的“艺术品”：公共建筑能耗监测平台的GPRS通讯服务器的开发方法分享

    在这个文章里面我将用一个实际的案例来分享如何来构建一个能够接受3000+个连接的GPRS通讯服务器软件,这个软件被我认为是一个艺术品,实现周期为1.5个月,文章很长,有兴趣的同志慢慢看.在这里,我将分 ...

  10. 使用F#来实现哈夫曼编码吧

    最近算法课要求实现哈夫曼编码,由于前面的问题都是使用了F#来解决,偶然换成C#也十分古怪,报告也不好看,风格差太多.一开始是打算把C#版本的哈夫曼编码换用F#来写,结果写到一半就觉得日了狗了...毕竟 ...