chrome插件网页抓取(怎么完成一个chrome插件？教程教你如何使用插件)

　　chrome插件网页抓取(怎么完成一个chrome插件？教程教你如何使用插件)

　　编写 chrome 插件是一项非常简单的任务。只要懂JavaScript，就可以轻松做到这一点，但要完成一个完美的插件还是比较困难的。使用插件，我们可以做很多有趣的事情。比如我们可以做一个抢热票插件，自动提醒，自动购票等等。本教程将教你如何完成一个chrome插件。

　　

　　开始工作插件功能

　　提取页面所有样式表中的背景图片并在插件中显示

　　显现

　　manifest.json 是插件的配置文件。整个插件中最重要的文件。配置权限、内容脚本、后台脚本、弹窗、插件ICON都是这个文件。官方文件

　　

{

"manifest_version": 2, //扩展使用的Manifest 版本, 1是chrome版本低于17才使用.目前主流都是用2

"name": "ImageSource", //扩展名称

"version": "1.0", //扩展版本

"description": "抓取当前页面样式文件中的所有图片源地址", //扩展描述

//设置扩展将在地址右侧显示扩展图标，弹出窗，提示等

//@see https://developer.chrome.com/extensions/browserAction

//当你的扩展是针对某些页面操作的话，你应该使用page_action

/**

"browser_action": {

"default_icon": { // 设置ICON，不同大小，浏览会选择显示那种ICON

"16": "images/icon16.png",

"24": "images/icon24.png",

"32": "images/icon32.png"

},

"default_title": "Google Mail", // 设置默认的标题

"default_popup": "popup.html" // 设置默认的弹出层页面

},

*/

"page_action": {

"default_icon": "images/icon-32.png", // 设置ICON，不同大小，浏览会选择显示那种ICON

"default_title": "图片源", // 设置默认的标题

"default_popup": "popup.html" // 设置默认的弹出层页面

},

"icons": {

"48": "images/icon-48.png",

"128": "images/icon-128.png"

},

//运行于后台的实例, 后台实例是一直在运行中，打开浏览器只执行一次实例

//官方推荐使用事件页面代替背景页面

//@see

"background": {

//"page": "background.html",

"scripts": [

"js/background.js"

],

"persistent": false

},

//页面脚本注入

"content_scripts": [

{

"matches": ["http://*/*", "https://*/*"],

"js": ["js/content.js"]

}

],

//扩展权限

//@see https://developer.chrome.com/extensions/declare_permissions 权限列表文档

"permissions": [

"background",

"tabs",

"activeTab",

"http://*/*",

"https://*/*"

],

"author": "骑驴找蚂蚁", //开发者

"homepage_url": "http://loocode.com" //项目主页

}

　　以上是插件的 manifest.json 的完整内容。

　　页面操作

　　在这个插件中，我们使用 page_action 而不是 browser_action。使用 page_action 需要开发者控制插件的使用状态。默认处于未使用状态（打开chrome.pageAction.show(tabId)），browser_action则相反。官方认为该插件在一定条件下可以选择page_action，比如我是针对某个网站（github、google），或者是针对网页内容的特定值（json、rss）。

　　

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {

var url = tab.url;

var status = changeInfo.status; //loading and complete two state

if (url !== undefined && status === 'complete' && url.indexOf("https://github.com") !== -1) {

chrome.pageAction.show(tabId);

}

});

　　比如*敏*感*词*tabs页面的update事件，当打开的页面是github网站时，将插件更新为active状态。这里需要申请tabs权限，在权限属性中填写tabs，而browser_action不需要。

　　default_popup

　　该属性是设置点击插件弹出的页面图层。也是上面例子的显示页面。

　　

Document

　　笔记：

　　无法在 html 中嵌入内联脚本，因此必须将其作为文件引入。

<p>

var query = {

active: true, currentWindow: true

};

var tab = null;

var bg = chrome.extension.getBackgroundPage();

function ajax(url) {

var xhr = new XMLHttpRequest();

xhr.open("GET", url, true);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

var content = xhr.responseText,

reg = /url\("?(.*?\.(png|gif|jpeg|jpg|svg))"?\)/gi,

match = null, images = [];

while((match = reg.exec(content)) !== null) {

images.push(match[1]);

}

if (images.length > 0) {

var p = document.createElement("p");

p.innerHTML = url,

offset = url.lastIndexOf("/") + 1,

newUrl = url.substring(0, offset),

point = newUrl.lastIndexOf(".") + 1,

domain = null;

for (var j = 1; j