大修改

2017-06-23 21:11:15 +08:00 · 2017-06-23 21:11:15 +08:00 · c5ffb784a5
commit c5ffb784a5
parent 669babe5fd
20 changed files with 790 additions and 47 deletions
--- a/demo/_locales/en/messages.json
+++ b/demo/_locales/en/messages.json
@ -0,0 +1,4 @@
+{
+	"pluginDesc": {"message": "A simple chrome extension demo"},
+	"helloWorld": {"message": "Hello World!"}
+}
--- a/demo/_locales/zh_CN/messages.json
+++ b/demo/_locales/zh_CN/messages.json
@ -0,0 +1,4 @@
+{
+	"pluginDesc": {"message": "一个简单的Chrome插件demo"},
+	"helloWorld": {"message": "你好啊，世界！"}
+}
--- a/demo/background.html
+++ b/demo/background.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>背景页</title>
+	<meta charset="utf-8"/>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<style>
+	html,body{height: 100%;font-size: 16px;}
+	body{font-family: 'Microsoft Yahei';margin:0;padding:0;}
+	.container {
+		width: 1024px;
+		margin: 0 auto;
+	}
+	</style>
+</head>
+<body>
+	<div class="container">
+		<h1>这是背景页</h1>
+		<div>
+			<a href="#" id="test_cors">跨域演示</a>
+		</div>
+	</div>
+	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
+	<script type="text/javascript" src="js/background.js"></script>
+</body>
+</html>
--- a/demo/css/custom.css
+++ b/demo/css/custom.css
@ -0,0 +1,71 @@
+.chrome-plugin-demo-panel {
+	position: fixed;
+	right: 0;
+	bottom: 10px;
+	background: #3385ff;
+	padding: 10px;
+    box-shadow: 0px 0px 10px #002761;
+    border-radius: 3px;
+    color: white;
+}
+.chrome-plugin-demo-panel a{
+	color: white;
+    text-decoration: none;
+	font-size: 16px;
+}
+.chrome-plugin-demo-panel a:hover{
+    text-decoration: underline;
+    color: #ffee08;
+}
+.chrome-plugin-simple-tip {
+    position: fixed;
+    left: 20px;
+    padding: 16px 10px;
+    top: 30px;
+    color: white;
+    min-width: 150px;
+	max-width: 700px;
+    border-radius: 3px;
+    text-align: center;
+    font-size: 16px;
+    background: #70a800;
+    background-image: linear-gradient(to bottom, #95cc2a, #70a800);
+    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
+	transition: top .4s;
+}
+.animated {
+    -webkit-animation-duration: .5s;
+    animation-duration: .5s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both
+}
+@-webkit-keyframes slideInLeft {
+    0% {
+        -webkit-transform: translate3d(-100%,0,0);
+        transform: translate3d(-100%,0,0);
+        visibility: visible
+    }
+
+    100% {
+        -webkit-transform: translate3d(0,0,0);
+        transform: translate3d(0,0,0)
+    }
+}
+
+@keyframes slideInLeft {
+    0% {
+        -webkit-transform: translate3d(-100%,0,0);
+        transform: translate3d(-100%,0,0);
+        visibility: visible
+    }
+
+    100% {
+        -webkit-transform: translate3d(0,0,0);
+        transform: translate3d(0,0,0)
+    }
+}
+
+.slideInLeft {
+    -webkit-animation-name: slideInLeft;
+    animation-name: slideInLeft
+}
--- a/demo/img/sds.png
+++ b/demo/img/sds.png
--- a/demo/js/background.js
+++ b/demo/js/background.js
@ -19,21 +19,11 @@ chrome.contextMenus.create({
 		chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
 	}
 });
-chrome.contextMenus.create({
-	title: "获取当前页面tabId",
-	onclick: function() {
-		chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
-		{
-			alert('当前tabId：' + (tabs.length ? tabs[0].id : '未知'));
-		});
-	}
-});
-



 //-------------------- badge演示 ------------------------//
-(function()
+/*(function()
 {
 	var showBadge = false;
 	var menuId = chrome.contextMenus.create({
@ -56,6 +46,106 @@ chrome.contextMenus.create({
 			showBadge = !showBadge;
 		}
 	});
-})();
+})();*/

+// 监听来自content-script的消息
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
+{
+	console.log('收到来自content-script的消息：');
+	console.log(request, sender, sendResponse);
+	sendResponse('我是后台，我已收到你的消息：' + JSON.stringify(request));
+});

+$('#test_cors').click((e) => {
+	$.get('https://www.baidu.com', function(html){
+		console.log( html);
+		alert('跨域调用成功！');
+	});
+});
+
+// 获取当前选项卡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});
+}
+
+// omnibox 演示
+chrome.omnibox.onInputChanged.addListener((text, suggest) => {
+	console.log('inputChanged: ' + text);
+	if(!text) return;
+	if(text == '美女') {
+		suggest([
+			{content: '中国' + text, description: '你要找“中国美女”吗？'},
+			{content: '日本' + text, description: '你要找“日本美女”吗？'},
+			{content: '泰国' + text, description: '你要找“泰国美女或人妖”吗？'},
+			{content: '韩国' + text, description: '你要找“韩国美女”吗？'}
+		]);
+	}
+	else if(text == '微博') {
+		suggest([
+			{content: '新浪' + text, description: '新浪' + text},
+			{content: '腾讯' + text, description: '腾讯' + text},
+			{content: '搜狐' + text, description: '搜索' + text},
+		]);
+	}
+	else {
+		suggest([
+			{content: '百度搜索 ' + text, description: '百度搜索 ' + text},
+			{content: '谷歌搜索 ' + text, description: '谷歌搜索 ' + text},
+		]);
+	}
+});
+
+// 当用户接收关键字建议时触发
+chrome.omnibox.onInputEntered.addListener((text) => {
+    console.log('inputEntered: ' + text);
+	if(!text) return;
+	var href = '';
+    if(text.endsWith('美女')) href = 'http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + text;
+	else if(text.startsWith('百度搜索')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('百度搜索 ', '');
+	else if(text.startsWith('谷歌搜索')) href = 'https://www.google.com.tw/search?q=' + text.replace('谷歌搜索 ', '');
+	else href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text;
+	openUrlCurrentTab(href);
+});
+
+// 预留一个方法给popup调用
+function testBackground() {
+	alert('你好，我是background！');
+}
+
+// 是否显示图片
+var showImage;
+chrome.storage.sync.get({showImage: true}, function(items) {
+	showImage = items.showImage;
+});
+// web请求监听，最后一个参数表示阻塞式，需单独声明权限：webRequestBlocking
+chrome.webRequest.onBeforeRequest.addListener(details => {
+	if(!showImage && details.type == 'image') return {cancel: true};
+	// 简单的音视频检测
+	// 大部分网站视频的type并不是media，且视频做了防下载处理，所以这里仅仅是为了演示效果，无实际意义
+	if(details.type == 'media') {
+		chrome.notifications.create(null, {
+			type: 'basic',
+			iconUrl: 'img/icon.png',
+			title: '检测到音视频',
+			message: '音视频地址：' + details.url,
+		});
+	}
+}, {urls: ["<all_urls>"]}, ["blocking"]);
--- a/demo/js/content-script.js
+++ b/demo/js/content-script.js
@ -3,6 +3,8 @@
 // 注意，必须设置了run_at=document_start 此段代码才会生效
 document.addEventListener('DOMContentLoaded', function()
 {
+	// 注入自定义JS
+	injectCustomJs();
 	// 给谷歌搜索结果的超链接增加 _target="blank"
 	if(location.host == 'www.google.com.tw')
 	{
@ -17,17 +19,17 @@ document.addEventListener('DOMContentLoaded', function()
 	{
 		function fuckBaiduAD()
 		{
+			if(document.getElementById('my_custom_css')) return;
 			var temp = document.createElement('style');
 			temp.id = 'my_custom_css';
 			(document.head || document.body).appendChild(temp);
 			var css = `
 			/* 移除百度右侧广告 */
 			#content_right{display:none;}
-			[data-click] [data-tuiguang]{display:none;}
 			/* 覆盖整个屏幕的相关推荐 */
 			.rrecom-btn-parent{display:none;}'
 			/* 难看的按钮 */
-			.result-op{display:none !important;}`;
+			.result-op.xpath-log{display:none !important;}`;
 			temp.innerHTML = css;
 			console.log('已注入自定义CSS！');
 			// 屏蔽百度推广信息
@ -40,6 +42,121 @@ document.addEventListener('DOMContentLoaded', function()
 			});
 		}
 		fuckBaiduAD();
+		initCustomPanel();
+		initCustomEventListen();
 	}
 });

+function initCustomPanel()
+{
+	var panel = document.createElement('div');
+	panel.className = 'chrome-plugin-demo-panel';
+	panel.innerHTML = `
+		<h2>injected-script操作content-script演示区：</h2>
+		<div class="btn-area">
+			<a href="javascript:sendMessageToContentScriptByPostMessage('你好，我是普通页面！')">通过postMessage发送消息给content-script</a><br>
+			<a href="javascript:sendMessageToContentScriptByEvent('你好啊！我是通过DOM事件发送的消息！')">通过DOM事件发送消息给content-script</a><br>
+			<a href="javascript:invokeContentScript('sendMessageToBackground()')">发送消息到后台或者popup</a><br>
+		</div>
+		<div id="my_custom_log">
+		</div>
+	`;
+	document.body.appendChild(panel);
+}
+
+// 向页面注入JS
+function injectCustomJs(jsPath)
+{
+	jsPath = jsPath || 'js/inject.js';
+	var temp = document.createElement('script');
+	temp.setAttribute('type', 'text/javascript');
+	// 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
+	temp.src = chrome.extension.getURL(jsPath);
+	temp.onload = function()
+	{
+		// 放在页面不好看，执行完后移除掉
+		this.parentNode.removeChild(this);
+	};
+	document.head.appendChild(temp);
+}
+
+// 接收来自后台的消息
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
+{
+	console.log('收到来自 ' + (sender.tab ? "content-script(" + sender.tab.url + ")" : "popup或者background") + ' 的消息：', request);
+	if(request.cmd == 'update_font_size') {
+		var ele = document.createElement('style');
+		ele.innerHTML = `* {font-size: ${request.size}px !important;}`;
+		document.head.appendChild(ele);
+	}
+	else {
+		tip(JSON.stringify(request));
+		sendResponse('我收到你的消息了：'+JSON.stringify(request));
+	}
+});
+
+// 主动发送消息给后台
+// 要演示此功能，请打开控制台主动执行sendMessageToBackground()
+function sendMessageToBackground(message) {
+	chrome.runtime.sendMessage({greeting: message || '你好，我是content-script呀，我主动发消息给后台！'}, function(response) {
+		tip('收到来自后台的回复：' + response);
+	});
+}
+
+// 监听长连接
+chrome.runtime.onConnect.addListener(function(port) {
+	console.log(port);
+	if(port.name == 'test-connect') {
+		port.onMessage.addListener(function(msg) {
+			console.log('收到长连接消息：', msg);
+			tip('收到长连接消息：' + JSON.stringify(msg));
+			if(msg.question == '你是谁啊？') port.postMessage({answer: '我是你爸！'});
+		});
+	}
+});
+
+window.addEventListener("message", function(e)
+{
+	console.log('收到消息：', e.data);
+	if(e.data && e.data.cmd == 'invoke') {
+		eval('('+e.data.code+')');
+	}
+	else if(e.data && e.data.cmd == 'message') {
+		tip(e.data.data);
+	}
+}, false);
+
+
+function initCustomEventListen() {
+	var hiddenDiv = document.getElementById('myCustomEventDiv');
+	if(!hiddenDiv) {
+		hiddenDiv = document.createElement('div');
+		hiddenDiv.style.display = 'none';
+		hiddenDiv.id = 'myCustomEventDiv';
+		document.body.appendChild(hiddenDiv);
+	}
+	hiddenDiv.addEventListener('myCustomEvent', function() {
+		var eventData = document.getElementById('myCustomEventDiv').innerText;
+		tip('收到自定义事件：' + eventData);
+	});
+}
+
+var tipCount = 0;
+// 简单的消息通知
+function tip(info) {
+	info = info || '';
+	var ele = document.createElement('div');
+	ele.className = 'chrome-plugin-simple-tip slideInLeft';
+	ele.style.top = tipCount * 70 + 20 + 'px';
+	ele.innerHTML = `<div>${info}</div>`;
+	document.body.appendChild(ele);
+	ele.classList.add('animated');
+	tipCount++;
+	setTimeout(() => {
+		ele.style.top = '-100px';
+		setTimeout(() => {
+			ele.remove();
+			tipCount--;
+		}, 400);
+	}, 3000);
+}
--- a/demo/js/inject.js
+++ b/demo/js/inject.js
@ -0,0 +1,24 @@
+// 通过postMessage调用content-script
+function invokeContentScript(code)
+{
+	window.postMessage({cmd: 'invoke', code: code}, '*');
+}
+// 发送普通消息到content-script
+function sendMessageToContentScriptByPostMessage(data)
+{
+	window.postMessage({cmd: 'message', data: data}, '*');
+}
+
+// 通过DOM事件发送消息给content-script
+(function() {
+	var customEvent = document.createEvent('Event');
+	customEvent.initEvent('myCustomEvent', true, true);
+	// 通过事件发送消息给content-script
+	function sendMessageToContentScriptByEvent(data) {
+		data = data || '你好，我是injected-script!';
+		var hiddenDiv = document.getElementById('myCustomEventDiv');
+		hiddenDiv.innerText = data
+		hiddenDiv.dispatchEvent(customEvent);
+	}
+	window.sendMessageToContentScriptByEvent = sendMessageToContentScriptByEvent;
+})();
--- a/demo/js/options.js
+++ b/demo/js/options.js
@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', function() {
+	var defaultConfig = {color: 'white', showImage: true}; // 默认配置
+	// 读取数据，第一个参数是指定要读取的key以及设置默认值
+	chrome.storage.sync.get(defaultConfig, function(items) {
+		document.getElementById('color').value = items.color;
+		document.getElementById('show_image').checked = items.showImage;
+	});
+});
+
+document.getElementById('save').addEventListener('click', function() {
+	var color = document.getElementById('color').value;
+	var showImage = document.getElementById('show_image').checked;
+	// 这里貌似会存在刷新不及时的问题
+	chrome.extension.getBackgroundPage().showImage = showImage; // 让background即使生效
+	chrome.storage.sync.set({color: color, showImage: showImage}, function() {
+		// 注意新版的options页面alert不生效！
+		// alert('保存成功！');
+		document.getElementById('status').textContent = '保存成功！';
+		setTimeout(() => {document.getElementById('status').textContent = '';}, 800);
+	});
+});
--- a/demo/js/popup.js
+++ b/demo/js/popup.js
@ -0,0 +1,222 @@
+$(function() {
+
+	// 加载设置
+	var defaultConfig = {color: 'white'}; // 默认配置
+	chrome.storage.sync.get(defaultConfig, function(items) {
+		document.body.style.backgroundColor = items.color;
+	});
+
+	// 初始化国际化
+	$('#test_i18n').html(chrome.i18n.getMessage("helloWorld"));
+
+
+});
+
+// 打开后台页
+$('#open_background').click(e => {
+	window.open(chrome.extension.getURL('background.html'));
+});
+
+// 调用后台JS
+$('#invoke_background_js').click(e => {
+	var bg = chrome.extension.getBackgroundPage();
+	bg.testBackground();
+});
+
+// 获取后台页标题
+$('#get_background_title').click(e => {
+	var bg = chrome.extension.getBackgroundPage();
+	alert(bg.document.title);
+});
+
+// 设置后台页标题
+$('#set_background_title').click(e => {
+	var title = prompt('请输入background的新标题：', '这是新标题');
+	var bg = chrome.extension.getBackgroundPage();
+	bg.document.title = title;
+	alert('修改成功！');
+});
+
+// 自定义窗体大小
+$('#custom_window_size').click(() => {
+	chrome.windows.getCurrent({}, (currentWindow) => {
+		var startLeft = 10;
+		chrome.windows.update(currentWindow.id, 
+		{
+			left: startLeft * 10,
+			top: 100,
+			width: 800,
+			height: 600
+		});
+		var inteval = setInterval(() => {
+			if(startLeft >= 40) clearInterval(inteval);
+			chrome.windows.update(currentWindow.id, {left: (++startLeft) * 10});
+		}, 50);
+	});
+});
+
+// 最大化窗口
+$('#max_current_window').click(() => {
+	chrome.windows.getCurrent({}, (currentWindow) => {
+		// state: 可选 'minimized', 'maximized' and 'fullscreen' 
+		chrome.windows.update(currentWindow.id, {state: 'maximized'});
+	});
+});
+
+
+// 最小化窗口
+$('#min_current_window').click(() => {
+	chrome.windows.getCurrent({}, (currentWindow) => {
+		// state: 可选 'minimized', 'maximized' and 'fullscreen' 
+		chrome.windows.update(currentWindow.id, {state: 'minimized'});
+	});
+});
+
+// 打开新窗口
+$('#open_new_window').click(() => {
+	chrome.windows.create({state: 'maximized'});
+});
+
+// 关闭全部
+$('#close_current_window').click(() => {
+	chrome.windows.getCurrent({}, (currentWindow) => {
+		chrome.windows.remove(currentWindow.id);
+	});
+});
+
+// 新标签打开网页
+$('#open_url_new_tab').click(() => {
+	chrome.tabs.create({url: 'https://www.baidu.com'});
+});
+
+// 当前标签打开网页
+$('#open_url_current_tab').click(() => {
+	getCurrentTabId(tabId => {
+		chrome.tabs.update(tabId, {url: 'http://www.so.com'});
+	});
+});
+
+// 获取当前标签ID
+$('#get_current_tab_id').click(() => {
+	getCurrentTabId(tabId => {
+		alert('当前标签ID：' + tabId);
+	});
+});
+
+// 高亮tab
+$('#highlight_tab').click(() => {
+	chrome.tabs.highlight({tabs: 0});
+});
+
+// popup主动发消息给content-script
+$('#send_message_to_content_script').click(() => {
+	sendMessageToContentScript('你好，我是popup！', (response) => {
+		if(response) alert('收到来自content-script的回复：'+response);
+	});
+});
+
+// 监听来自content-script的消息
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
+{
+	console.log('收到来自content-script的消息：');
+	console.log(request, sender, sendResponse);
+	sendResponse('我是popup，我已收到你的消息：' + JSON.stringify(request));
+});
+
+// popup与content-script建立长连接
+$('#connect_to_content_script').click(() => {
+	getCurrentTabId((tabId) => {
+		var port = chrome.tabs.connect(tabId, {name: 'test-connect'});
+		port.postMessage({question: '你是谁啊？'});
+		port.onMessage.addListener(function(msg) {
+			alert('收到长连接消息：'+msg.answer);
+			if(msg.answer && msg.answer.startsWith('我是'))
+			{
+				port.postMessage({question: '哦，原来是你啊！'});
+			}
+		});
+	});
+});
+
+// 获取当前选项卡ID
+function getCurrentTabId(callback)
+{
+	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
+	{
+		if(callback) callback(tabs.length ? tabs[0].id: null);
+	});
+}
+
+// 这2个获取当前选项卡id的方法大部分时候效果都一致，只有少部分时候会不一样
+function getCurrentTabId2()
+{
+	chrome.windows.getCurrent(function(currentWindow)
+	{
+		chrome.tabs.query({active: true, windowId: currentWindow.id}, function(tabs)
+		{
+			if(callback) callback(tabs.length ? tabs[0].id: null);
+		});
+	});
+}
+
+// 向content-script主动发送消息
+function sendMessageToContentScript(message, callback)
+{
+	getCurrentTabId((tabId) =>
+	{
+		chrome.tabs.sendMessage(tabId, message, function(response)
+		{
+			if(callback) callback(response);
+		});
+	});
+}
+
+// 向content-script注入JS片段
+function executeScriptToCurrentTab(code)
+{
+	getCurrentTabId((tabId) =>
+	{
+		chrome.tabs.executeScript(tabId, {code: code});
+	});
+}
+
+
+// 演示2种方式操作DOM
+
+// 修改背景色
+$('#update_bg_color').click(() => {
+	executeScriptToCurrentTab('document.body.style.backgroundColor="red";')
+});
+
+// 修改字体大小
+$('#update_font_size').click(() => {
+	sendMessageToContentScript({cmd:'update_font_size', size: 42}, function(response){});
+});
+
+// 显示badge
+$('#show_badge').click(() => {
+	chrome.browserAction.setBadgeText({text: 'New'});
+	chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});
+});
+
+// 隐藏badge
+$('#hide_badge').click(() => {
+	chrome.browserAction.setBadgeText({text: ''});
+	chrome.browserAction.setBadgeBackgroundColor({color: [0, 0, 0, 0]});
+});
+
+// 显示桌面通知
+$('#show_notification').click(e => {
+	chrome.notifications.create(null, {
+		type: 'image',
+		iconUrl: 'img/icon.png',
+		title: '祝福',
+		message: '骚年，祝你圣诞快乐！Merry christmas!',
+		imageUrl: 'img/sds.png'
+	});
+});
+
+$('#check_media').click(e => {
+	alert('即将打开一个有视频的网站，届时将自动检测是否存在视频！');
+	chrome.tabs.create({url: 'http://www.w3school.com.cn/tiy/t.asp?f=html5_video'});
+});
--- a/demo/js/show-image-content-size.js
+++ b/demo/js/show-image-content-size.js
@ -0,0 +1,8 @@
+// 鉴于浏览器默认不会显示图片的体积大小，每次都需要保存到本地才能查看到大小
+// 故通过插件的方式强行修改图片页的标题
+fetch(location.href).then(resp => resp.blob()).then(blob => {
+	var size = blob.size;
+	size = (size / 1024).toFixed(2) + ' kb';
+	document.title = '(' + size + ')' + document.title;
+	console.log(size);
+});
--- a/demo/manifest.json
+++ b/demo/manifest.json
@ -6,7 +6,7 @@
 	// 插件的版本
 	"version": "1.0.0",
 	// 插件描述
-	"description": "简单的Chrome扩展demo",
+	"description": "__MSG_pluginDesc__",
 	// 图标，一般偷懒全部用一个尺寸的也没问题
 	"icons":
 	{
@ -14,10 +14,12 @@
 		"48": "img/icon.png",
 		"128": "img/icon.png"
 	},
-	// 后台JS
+	// 会一直常驻的后台JS或后台页面
 	"background":
 	{
-		"scripts": ["js/background.js"]
+		// 2种指定方式，如果指定JS，那么会自动生成一个背景页
+		"page": "background.html"
+		//"scripts": ["js/background.js"]
 	},
 	// 浏览器右上角图标设置，browser_action、page_action、app必须三选一
 	"browser_action": 
@ -38,11 +40,20 @@
 	"content_scripts": 
 	[
 		{
-			"matches": ["http://*/*", "https://*/*"],
+			//"matches": ["http://*/*", "https://*/*"],
+			// "<all_urls>" 表示匹配所有地址
+			"matches": ["<all_urls>"],
+			// 多个JS按顺序注入
 			"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
-			"css": [],
+			// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
+			"css": ["css/custom.css"],
 			// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
 			"run_at": "document_start"
+		},
+		// 这里仅仅是为了演示content-script可以配置多个规则
+		{
+			"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
+			"js": ["js/show-image-content-size.js"]
 		}
 	],
 	// 权限申请
@ -51,9 +62,14 @@
 		"contextMenus", // 右键菜单
 		"tabs", // 标签
 		"notifications", // 通知
+		"webRequest", // web请求
+		"webRequestBlocking",
+		"storage", // 插件本地存储
 		"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
 		"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
 	],
+	// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
+	"web_accessible_resources": ["js/inject.js"],
 	// 插件主页，这个很重要，不要浪费了这个免费广告位
 	"homepage_url": "https://www.baidu.com",
 	// 覆盖浏览器默认页面
@ -62,6 +78,19 @@
 		// 覆盖浏览器默认的新标签页
    	"newtab": "newtab.html"
  	},
+	// Chrome40以前的插件配置页写法
+	"options_page": "options.html",
+	// Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
+	"options_ui":
+	{
+    	"page": "options.html",
+		// 添加一些默认的样式，推荐使用
+    	"chrome_style": true
+	},
+	// 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
+	"omnibox": { "keyword" : "go" },
+	// 默认语言
+	"default_locale": "zh_CN",
 	// devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
  	"devtools_page": "devtools.html"
 }
--- a/demo/newtab.html
+++ b/demo/newtab.html
@ -15,9 +15,17 @@
 	    font-size: 48px;
 	    color: #CCC;
 	}
+	.wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		padding: 40px;
+		font-size: 16px;
+	}
 	</style>
 </head>
 <body>
 	<div class="center"><p>这是一个自定义的新标签页</p></div>
+	<div class="wrapper"><a href="https://www.baidu.com">百度</a></div>
 </body>
 </html>
--- a/demo/options.html
+++ b/demo/options.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+	<style>
+	body{font-size: 16px;width: 400px; height: 300px;padding: 10px;font-family: 'Microsoft Yahei'; }
+	#status {color:red;}
+	</style>
+	<title>插件配置页</title>
+</head>
+<body>
+	<h1>简单的配置页</h1>
+	<p>（功能很无聊，纯属演示功能）</p>
+	<div>
+		<label>请选择popup页面背景色：</label>
+		<select id="color">
+			<option value="white">white</option>
+			<option value="red">red</option>
+			<option value="green">green</option>
+			<option value="blue">blue</option>
+			<option value="yellow">yellow</option>
+		</select>
+	</div>
+	<div>
+		<label><input type="checkbox" id="show_image"/>允许网页显示图片</label>
+	</div>
+	<a href="javascript:;" id="save">保存配置</a>
+	<div id="status"></div>
+
+	<script src="js/options.js"></script>
+</body>
+</html>
--- a/demo/popup.html
+++ b/demo/popup.html
@ -10,10 +10,59 @@
 		width: 500px;
 		min-height: 100px;
 	}
+	a {margin-right: 10px;}
 	</style>
 </head>
 <body>
 	<h1>这是一个popup页面！</h1>
+	<h2>background</h2>
+	<div>
+		<a href="#" id="open_background">打开background</a>
+		<a href="#" id="invoke_background_js">调用background页JS方法</a>
+		<a href="#" id="get_background_title">获取background页的标题</a>
+		<a href="#" id="set_background_title">设置background页标题</a>
+		(验证background生命周期和单实例特性)
+	</div>
+	<h2>窗口操作演示</h2>
+	<div>
+		<a href="#" id="open_new_window">新窗口打开百度</a>
+		<a href="#" id="custom_window_size">执行简单的窗口动画</a>
+		<a href="#" id="max_current_window">将当前窗口最大化</a>
+		<a href="#" id="min_current_window">将当前窗口最小化</a>
+		<a href="#" id="close_current_window">关闭当前窗口所有标签(慎点)</a>
+	</div>
+	<h2>标签操作演示</h2>
+	<div>
+		<a href="#" id="open_url_new_tab">新标签打开百度</a>
+		<a href="#" id="open_url_current_tab">当前标签打开网页</a>
+		<a href="#" id="get_current_tab_id">获取当前标签页ID</a>
+		<a href="#" id="highlight_tab">切换到第一个标签</a>
+	</div>
+	<h2>popup与content-script交互</h2>
+	<div>
+		<a href="#" id="send_message_to_content_script">短连接发送消息到content-script</a>
+		<a href="#" id="connect_to_content_script">长连接发送消息到content-script</a>
+	</div>
+	<h2>DOM交互演示</h2>
+	<div>
+		<a href="#" id="update_bg_color">修改页面背景色(通过executeScript实现)</a>
+		<a href="#" id="update_font_size">修改字体大小(通过sendMessage实现)</a>
+	</div>
+	<h2>国际化演示</h2>
+	<div>
+		<p><span id="test_i18n"></span> (另外请到插件列表页查看描述的变化)</p>
+	</div>
+	<h2>其它</h2>
+	<div>
+		<a href="#" id="show_badge">显示badge</a>
+		<a href="#" id="hide_badge">隐藏badge</a>
+		<a href="#" id="show_notification">显示桌面通知</a>
+		<a href="#" id="check_media">检测网页视频</a>
+	</div>
+	<h2>更多</h2>
+	<div>
+		百度广告，右键菜单，omnibox，图片大小演示，devtools演示，sidebar演示，
+	</div>
 	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 	<script type="text/javascript" src="js/popup.js"></script>
 </body>
--- a/demo/popup.js
+++ b/demo/popup.js
@ -1,28 +0,0 @@
-var bg = chrome.extension.getBackgroundPage();
-function add(name,url)
-{
-  var path=bg.localStorage.path||'[]';
-  path=JSON.parse(path);
-  path.push([name,url]);
-  bg.localStorage.path=JSON.stringify(path);
-  return path;
-}
-function init()
-{
-  var path=JSON.parse(bg.localStorage.path||'[]');
-  var html='';
-  for(var i=0;i<path.length;i++)
-    html+='<tr><td>'+path[i][0]+'</td><td>'+path[i][1]+'</td></tr>';
-  $('#table').append(html);
-}
-$(function()
-{
-    init();
-    $('#add').click(function()
-    {
-        var name=$('#name').val(),url=$('#url').val();
-        add(name,url);
-        $('#table').append('<tr><td>'+name+'</td><td>'+url+'</td></tr>');
-    });
-});
-
--- a/page-action-demo/img/icon.png
+++ b/page-action-demo/img/icon.png
--- a/page-action-demo/js/background.js
+++ b/page-action-demo/js/background.js
@ -0,0 +1,13 @@
+chrome.runtime.onInstalled.addListener(function(){
+	chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
+		chrome.declarativeContent.onPageChanged.addRules([
+			{
+				conditions: [
+					// 只有打开百度才显示pageAction
+					new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})
+				],
+				actions: [new chrome.declarativeContent.ShowPageAction()]
+			}
+		]);
+	});
+});
--- a/page-action-demo/manifest.json
+++ b/page-action-demo/manifest.json
@ -0,0 +1,33 @@
+{
+	// 清单文件的版本，这个必须写，而且必须是2
+	"manifest_version": 2,
+	// 插件的名称
+	"name": "page-action-demo",
+	// 插件的版本
+	"version": "1.0.0",
+	// 插件描述
+	"description": "pageAction演示",
+	// 图标，一般偷懒全部用一个尺寸的也没问题
+	"icons":
+	{
+		"16": "img/icon.png",
+		"48": "img/icon.png",
+		"128": "img/icon.png"
+	},
+	// 当某些特定页面打开才显示的图标
+	"page_action":
+	{
+		"default_icon": "img/icon.png",
+		"default_title": "我是pageAction",
+		"default_popup": "popup.html"
+	},
+	// 权限申请
+	"permissions":
+	[
+		"declarativeContent"
+	],
+	"background":
+	{
+		"scripts": ["js/background.js"]
+	}
+}
--- a/page-action-demo/popup.html
+++ b/page-action-demo/popup.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>popup页</title>
+	<meta charset="utf-8"/>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<style>
+	body {
+		font-family: 'Microsoft Yahei';
+		width: 500px;
+		min-height: 100px;
+	}
+	a {margin-right: 10px;}
+	</style>
+</head>
+<body>
+	<h1>pageAction演示</h1>
+	<p>打开百度pageAction会点亮，打开其它页面pageAction会变灰。</p>
+</body>
+</html>