浏览器插件开发手册：http://open./extension_dev/overview.html
浏览器插件demo，请先参考博客：/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(){//block1var bExist = false;chrome.tabs.getAllInWindow(null, function(tabs){//block2for ( var i = 0; i <tabs.length; i++){url = tabs[i].url;if(url.indexOf("") != -1){bexist = true;break;}}});//block3return bExist ;}调试你会发现，代码执行顺序是block1=》block3=》block2 ，并不是顺序执行3.js中的try catch 只会抓当前代码块的异常，并不会捕获代码块里面的函数的异常function test(){try{........//这段function代码的异常不会被捕获function(){try{}catch(e){}}}catch(e){}}
首先我们需要学习参考手册，了解基本的插件包格式和对象接口。监控浏览器网页地址可以参考浏览器插件demo学习里面的使用方法。
开发思考？
如何需要监控浏览器请求发生变化？如何打开标签页，判断标签页是否存在？问题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 == '/')//发送消息，有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("/");}});}catch(e){alert(e);}sendResponse('ans:ok');});// 获取当前选项卡IDfunction 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 <tabs.length; i++){url = tabs[i].url;if(url.indexOf("") != -1){bexist = true;break;}}if(callback) callback(bexist)});}
现在就是配置插件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": [{// "<all_urls>" 表示匹配所有地址"matches": ["<all_urls>"],// 多个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机制来实现。等后面有时间研究在来解决这个问题.
