Chrome 浏览器插件之监控网页地址

浏览器插件开发手册:http://open.chrome.360.cn/extension_dev/overview.html
浏览器插件demo,请先参考博客:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
注意事项,由于js和C++的差异性,导致踩了不少坑:

1.js如果提及默认值,请填写null。
坑:chrome.tabs.getAllInWindow(integer windowId, function callback)
windowId  默认为当前窗口 然后给了一个连接值:chrome.windows.WINDOW_ID_NONE,此时发现获取不到数据。如果参数给null就对了

2.js函数执行顺序是异步的,并不会等待,所以需要使用回调,返回值不一定是正确的。如下通过函数返回值判断标签是否存在的方式是错误的:
错误方式:
function isExistTab()
{
	//block1
	var bExist = false;
	chrome.tabs.getAllInWindow(null, function(tabs)
	{
		//block2
		for ( var i = 0; i 

首先我们需要学习参考手册,了解基本的插件包格式和对象接口。监控浏览器网页地址可以参考浏览器插件demo学习里面的使用方法。

开发思考?
  1. 如何需要监控浏览器请求发生变化?
  2. 如何打开标签页,判断标签页是否存在?

问题1:如何需要监控浏览器请求发生变化?
答:首先监控浏览器请求那么生命周期必须和浏览器共存,才能在整体上监控浏览器请求变化。
那么首先可以排除popup里面处理js,所以我们把目标转移到content.js 和 background.js, 但是根据手册我们:

下面是content scipt可以做的一些事情范例:

从页面中找到没有写成超链接形式的url,并将它们转成超链接。
放大页面字体使文字更清晰
找到并处理DOM中的microformat
当然,content scripts也有一些限制,它们不能做的事情包括 :

不能使用除了chrome.extension之外的chrome.* 的接口
不能访问它所在扩展中定义的函数和变量
不能访问web页面或其它content script中定义的函数和变量
不能做cross-site XMLHttpRequests
这些限制其实并不像看上去那么糟糕。Content scripts 可以使用messages机制与它所在的扩展通信,来间接使用chrome.*接口,或访问扩展数据。Content scripts还可以通过共享的DOM来与web页面通信。更多功能参见执行环境。

所以我们在content.js里面没有办法处理和标签页相关的事物。但是可以使用messages机制和其他扩展通讯。message 需要json格式字符串

document.addEventListener('DOMContentLoaded', function()
{
	try
	{
		//alert(JSON.stringify(document));
		//按照匹配规则匹配
		//if(location.href == 'https://www.baidu.com/')
		//发送消息,有backgrand处理
		chrome.runtime.sendMessage({greeting:location.href}, function(response) {
		});
	}
	catch(e)
	{
		alert(e);
	}
	
});

问题1:如何打开标签页?
答:通过问题1我们可以知道如果处理messge的话,最好的方式就是在background.js里面处理message,因为background.js可以很轻松的和标签页交互,并且处理标签页的事务。

// 监听来自content-script的消息


chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
	//{greeting:url}
	try
	{
		var url = request.greeting;
		//url.match()
		isExistTab(bExist =>{
			if(bExist)
			{
				//alert(url);
			}
			else
			{
				//如果不存在打开新的标签页
				openUrlNewTab("https://pan.bitqiu.com/");
			}
		});
	}
	catch(e)
	{
		alert(e);
	}
	
	sendResponse('ans:ok');
});

// 获取当前选项卡ID
function getCurrentTabId(callback)
{
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
	{
		if(callback) callback(tabs.length ? tabs[0].id: null);
	});
}

// 当前标签打开某个链接
function openUrlCurrentTab(url)
{
	getCurrentTabId(tabId => {
		chrome.tabs.update(tabId, {url: url});
	})
}

// 新标签打开某个链接
function openUrlNewTab(url)
{
	chrome.tabs.create({url: url});
}

//判断某个标签页是否存在
function isExistTab(callback)
{
	chrome.tabs.getAllInWindow(null, function(tabs)
	{
		bexist = false;
		for ( var i = 0; i 

现在就是配置插件manifest.json

{
  "manifest_version": 2,
  
  "name": "watch_url_redirect",
  
  "description": "watch url address if is match role and open a new tab ",
  
  "version": "1.0.2",
  
  "icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
  
  "background":
	{
		"scripts": ["js/background.js"]
	},
	
  "browser_action": 
	{
		"default_icon": "img/icon.png",
		"default_title": "stwatch",
		"default_popup": "popup.html"
	},
	
	// 需要直接注入页面的JS
	"content_scripts": 
	[
		{
			// "" 表示匹配所有地址
			"matches": [""],
			// 多个JS按顺序注入
			"js": ["js/content-script.js"],
			// 代码注入的时间,可选值: "document_start", "document_end", or "document_idle",最后一个表示页面空闲时,默认document_idle
			"run_at": "document_start"
		}
	],
	
	// 权限申请
	"permissions":
	[
		"contextMenus", // 右键菜单
		"tabs", // 标签
		"notifications", // 通知
		"webRequest", // web请求
		"webRequestBlocking", // 阻塞式web请求
		"storage", // 插件本地存储
		"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
		"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
	]
	
}

此时整个插件完成请求监控。

思考:
其实在写background.js的时候我发现事实我们可以监控:chrome.webRequest.onBeforeRequest.addListener,但是不知道为什么这个接口没有被触发,所以使用了message机制来实现。等后面有时间研究在来解决这个问题.

你可能感兴趣的:(Chrome,浏览器插件,插件,chrom,标签页,请求监控)