伪装你的chrome的tab页


发表于 2018-06-18 04:08


垃圾德国 !!!

垃圾巴西 !!!

亏我还熬夜看球,两个垃圾!!!

当老板正向你走来,你却在浏览如下网页时,你该怎么办?
test%2082.png 此时当然时选择关掉它了,但如果不想关掉呢,那也可以最小化,但老板走到你的身边让你给他看样东西此时你却点开了浏览器呢(或者要求你点开浏览器)?我一直在努力避免以上尴尬,但总是脑子发热,于是创建了一个下面的chrome插件。

功能如下:按下Ctrl+Q快捷键时,浏览器最小化,同时创建一个新的tab页并选中它,并且将其他的tab设置title为’百度一下,你就知道’,favicon.ico设置为’https://www.baidu.com/favicon.ico’, 如下图所示:
test%2038.png 此时哪怕你点开了浏览器也不必惊慌,老板看到的是不过是一个充满求知欲的你而已,等到老板走了,再摁下Ctrl+Q键,此时便会恢复到原来的title和favicon.ico了,要想实现这个功能很简单,到这里稍微了解一下就可以了https://developer.chrome.com/extensions ,最主要是涉及到了tab的开发。

manifest.json文件内容如下:

  {
    "name": "Ctrl+Q",
    "version": "1.1",
	"permissions": [
          "tabs","storage",
		  "<all_urls>"
        ],
    "description": "Ctrl+Q",
    "background": {
      "scripts": ["background.js"]
    },
	"options_page": "options.html",
	"commands": {
	  "toggle": {
		"suggested_key": {
		  "default": "Ctrl+Q"
		},
		"description": "toggle"
	  }
	},
    "manifest_version": 2
  }

background.js里实现自己的逻辑:

 function getMiniOpt(callback){
	  chrome.storage.sync.get({
		title: '百度一下,你就知道',
		faviconUrl: 'https://www.baidu.com/favicon.ico'
	  }, function(items) {
		callback(items.title,items.faviconUrl);
	  });
  }
  
  
var previous = {mini:false,olds:{},newTab:[]};
  
  function toggle(){
	  
	  
	  if(previous.mini){
		  //resume
		  resume();
	  } else {
		  
		  mini();
		  
	  }
	  
	  
  }
function mini(){
	 //最小化当前窗口
	getMiniOpt(function (title,faviconUrl){
			
	chrome.windows.getAll({},function(windows){
		for(var i=0;i<windows.length;i++){
			var win = windows[i];
			
			chrome.windows.update(win.id,{state:"minimized"});
			previous.mini = true;
			 //打开一个新的标签页
			 chrome.tabs.create({windowId:win.id},function(tab){
				 previous.newTab.push(tab);
			 });
			 //设置其他标签页的标签和favicon
			 chrome.tabs.query({windowId:win.id}, function(tabs) {

			 for(var i=0;i<tabs.length;i++){
					 var tab = tabs[i];
					 previous.olds[tab.id] = {title:tab.title,favIconUrl:tab.favIconUrl};
					 try{
						 chrome.tabs.executeScript(tab.id,{code:'function changeFavicon(href){var el, icon, link;el = document.querySelectorAll(\'head link[rel*="icon"]\');Array.prototype.forEach.call(el, function (node) {node.parentNode.removeChild(node);});link= document.createElement(\'link\');link.type = \'image/x-icon\';link.rel  = \'icon\';link.href = href;document.getElementsByTagName(\'head\')[0].appendChild(link);};document.title="'+title+'";changeFavicon("'+faviconUrl+'")'});	
					 }catch(e){}
				 }
			 });
		}
		
	});
	});
}

function resume(){
	for(var i=0;i<previous.newTab.length;i++){
		var tab = previous.newTab[i];chrome.tabs.remove(tab.id);
	}
	var olds = previous.olds;
	chrome.tabs.query({}, function(tabs) {
		 for(var i=0;i<tabs.length;i++){
			 var tab = tabs[i];
			 var old = olds[tab.id+""];
			 if(old){
				 chrome.tabs.executeScript(tab.id,{code:'function changeFavicon(href){var el, icon, link;el = document.querySelectorAll(\'head link[rel*="icon"]\');Array.prototype.forEach.call(el, function (node) {node.parentNode.removeChild(node);});link= document.createElement(\'link\');link.type = \'image/x-icon\';link.rel  = \'icon\';link.href = href;document.getElementsByTagName(\'head\')[0].appendChild(link);};document.title="'+old.title+'";changeFavicon("'+old.favIconUrl+'")'});
			 }
		 }
	 });
	 previous = {mini:false,olds:{},newTab:[]};

}

chrome.commands.onCommand.addListener(function(command) {
  if(command === "toggle") {
     toggle();
  }
});

最后加上配置页,用以配置伪装的标题和favicon:

<!DOCTYPE html>

<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head><title>Ctrl+Q</title></head>
<body>

Tab title

  <input type="text" id="title" style="width:100%"><br>

Tab favicon url

  <input type="text" id="faviconUrl" style="width:100%"><br>

<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>

options.js:

// Saves options to chrome.storage
function save_options() {
  var title = document.getElementById('title').value;
  var faviconUrl = document.getElementById('faviconUrl').value;
  chrome.storage.sync.set({
    title: title,
    faviconUrl: faviconUrl
  }, function() {
    alert("保存成功");
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  // Use default value color = 'red' and likesColor = true.
  chrome.storage.sync.get({
    title: '百度一下,你就知道',
    faviconUrl: 'https://www.baidu.com/favicon.ico'
  }, function(items) {
    document.getElementById('title').value = items.title;
    document.getElementById('faviconUrl').value = items.faviconUrl;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

当然这里只是考虑了最简单的情况,再次打开浏览器后,不能在新窗口做操作,不能关闭以前的tab(不然恢复时会错位)。

关于CSP

某些网站响应头中包含Content-Security-Policy,此时更改tab的favicon不会起作用,可以在background.js中添加如下代码禁用这个请求头:


 
var onHeadersReceived = function(details) {
  
  for(var i=details.responseHeaders.length-1;i>=0;i--){
	   if ('content-security-policy' === details.responseHeaders[i].name.toLowerCase()) {
      details.responseHeaders[i].value = '';
    }
  }

chrome.extension.getBackgroundPage().console.log(details.responseHeaders);
  return {
    responseHeaders: details.responseHeaders
  };
};


var filter = {
  urls: ["*://*/*"],
  types: ["main_frame", "sub_frame"]
};

chrome.webRequest.onHeadersReceived.addListener(onHeadersReceived, filter, ["blocking", "responseHeaders"]);

另外manifest.json文件中需要请求WebRequest权限。

最后附上自己用的插件:https://www.qyh.me/file/article/java/Ctrl+Q.zip

只支持chrome浏览器

关于地址栏地址

目前无法做到,chrome并没有提供改变地址栏地址的方法


搜索