first commit

luchenqun · Mar 13, 2018 · dbdf3ba · dbdf3ba
1 parent 6457178
commit dbdf3ba
Show file tree

Hide file tree

Showing 22 changed files with 10,520 additions and 0 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -0,0 +1,4 @@
+{
+	"pluginDesc": {"message": "A simple chrome extension demo"},
+	"helloWorld": {"message": "Hello World!"}
+}
diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json
@@ -0,0 +1,4 @@
+{
+	"pluginDesc": {"message": "一个简单的Chrome插件demo"},
+	"helloWorld": {"message": "你好啊，世界！"}
+}
diff --git a/background.html b/background.html
@@ -0,0 +1,27 @@
+<!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>
+			<a href="#" id="get_popup_title">获取popup页标题</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>
diff --git a/css/custom.css b/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
+}
diff --git a/devtools.html b/devtools.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<head></head>
+<body>
+	<script type="text/javascript" src="js/devtools.js"></script>
+</body>
+</html>
diff --git a/img/icon.png b/img/icon.png
diff --git a/img/sds.png b/img/sds.png
diff --git a/js/background.js b/js/background.js
@@ -0,0 +1,135 @@
+//-------------------- 右键菜单演示 ------------------------//
+chrome.contextMenus.create({
+	title: "测试右键菜单",
+	onclick: function () {
+		chrome.notifications.create(null, {
+			type: 'basic',
+			iconUrl: 'img/icon.png',
+			title: '这是标题',
+			message: '您刚才点击了自定义右键菜单！'
+		});
+	}
+});
+chrome.contextMenus.create({
+	title: '使用度娘搜索：%s', // %s表示选中的文字
+	contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单
+	onclick: function (params) {
+		// 注意不能使用location.href，因为location是属于background的window对象
+		chrome.tabs.create({ url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText) });
+	}
+});
+
+// 监听来自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('跨域调用成功！');
+	});
+});
+
+$('#get_popup_title').click(e => {
+	var views = chrome.extension.getViews({ type: 'popup' });
+	if (views.length > 0) {
+		alert(views[0].document.title);
+	} else {
+		alert('popup未打开！');
+	}
+});
+
+// 获取当前选项卡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！');
+	chrome.tabs.getSelected(null, function (tab) { 
+		console.log(tab);
+	});
+}
+
+// 是否显示图片
+var showImage;
+chrome.storage.sync.get({ showImage: true }, function (items) {
+	showImage = items.showImage;
+});
+// web请求监听，最后一个参数表示阻塞式，需单独声明权限：webRequestBlocking
+chrome.webRequest.onBeforeRequest.addListener(details => {
+	// cancel 表示取消本次请求
+	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"]);
+
+
+chrome.tabs.getSelected(null, function (tab) { 
+	console.log(tab);
+});