大修改
This commit is contained in:
xiananliu
parent
669babe5fd
commit
c5ffb784a5
4
demo/_locales/en/messages.json
Normal file
4
demo/_locales/en/messages.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"pluginDesc": {"message": "A simple chrome extension demo"},
|
||||||
|
"helloWorld": {"message": "Hello World!"}
|
||||||
|
}
|
||||||
4
demo/_locales/zh_CN/messages.json
Normal file
4
demo/_locales/zh_CN/messages.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"pluginDesc": {"message": "一个简单的Chrome插件demo"},
|
||||||
|
"helloWorld": {"message": "你好啊，世界！"}
|
||||||
|
}
|
||||||
26
demo/background.html
Normal file
26
demo/background.html
Normal file
@ -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>
|
||||||
71
demo/css/custom.css
Normal file
71
demo/css/custom.css
Normal file
@ -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
|
||||||
|
}
|
||||||
BIN
demo/img/sds.png
Normal file
BIN
demo/img/sds.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
@ -19,21 +19,11 @@ chrome.contextMenus.create({
|
|||||||
chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
|
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演示 ------------------------//
|
//-------------------- badge演示 ------------------------//
|
||||||
(function()
|
/*(function()
|
||||||
{
|
{
|
||||||
var showBadge = false;
|
var showBadge = false;
|
||||||
var menuId = chrome.contextMenus.create({
|
var menuId = chrome.contextMenus.create({
|
||||||
@ -56,6 +46,106 @@ chrome.contextMenus.create({
|
|||||||
showBadge = !showBadge;
|
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"]);
|
||||||
@ -3,6 +3,8 @@
|
|||||||
// 注意，必须设置了run_at=document_start 此段代码才会生效
|
// 注意，必须设置了run_at=document_start 此段代码才会生效
|
||||||
document.addEventListener('DOMContentLoaded', function()
|
document.addEventListener('DOMContentLoaded', function()
|
||||||
{
|
{
|
||||||
|
// 注入自定义JS
|
||||||
|
injectCustomJs();
|
||||||
// 给谷歌搜索结果的超链接增加 _target="blank"
|
// 给谷歌搜索结果的超链接增加 _target="blank"
|
||||||
if(location.host == 'www.google.com.tw')
|
if(location.host == 'www.google.com.tw')
|
||||||
{
|
{
|
||||||
@ -17,17 +19,17 @@ document.addEventListener('DOMContentLoaded', function()
|
|||||||
{
|
{
|
||||||
function fuckBaiduAD()
|
function fuckBaiduAD()
|
||||||
{
|
{
|
||||||
|
if(document.getElementById('my_custom_css')) return;
|
||||||
var temp = document.createElement('style');
|
var temp = document.createElement('style');
|
||||||
temp.id = 'my_custom_css';
|
temp.id = 'my_custom_css';
|
||||||
(document.head || document.body).appendChild(temp);
|
(document.head || document.body).appendChild(temp);
|
||||||
var css = `
|
var css = `
|
||||||
/* 移除百度右侧广告 */
|
/* 移除百度右侧广告 */
|
||||||
#content_right{display:none;}
|
#content_right{display:none;}
|
||||||
[data-click] [data-tuiguang]{display:none;}
|
|
||||||
/* 覆盖整个屏幕的相关推荐 */
|
/* 覆盖整个屏幕的相关推荐 */
|
||||||
.rrecom-btn-parent{display:none;}'
|
.rrecom-btn-parent{display:none;}'
|
||||||
/* 难看的按钮 */
|
/* 难看的按钮 */
|
||||||
.result-op{display:none !important;}`;
|
.result-op.xpath-log{display:none !important;}`;
|
||||||
temp.innerHTML = css;
|
temp.innerHTML = css;
|
||||||
console.log('已注入自定义CSS！');
|
console.log('已注入自定义CSS！');
|
||||||
// 屏蔽百度推广信息
|
// 屏蔽百度推广信息
|
||||||
@ -40,6 +42,121 @@ document.addEventListener('DOMContentLoaded', function()
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
fuckBaiduAD();
|
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);
|
||||||
|
}
|
||||||
24
demo/js/inject.js
Normal file
24
demo/js/inject.js
Normal file
@ -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;
|
||||||
|
})();
|
||||||
21
demo/js/options.js
Normal file
21
demo/js/options.js
Normal file
@ -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);
|
||||||
|
});
|
||||||
|
});
|
||||||
222
demo/js/popup.js
Normal file
222
demo/js/popup.js
Normal file
@ -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'});
|
||||||
|
});
|
||||||
8
demo/js/show-image-content-size.js
Normal file
8
demo/js/show-image-content-size.js
Normal file
@ -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);
|
||||||
|
});
|
||||||
@ -6,7 +6,7 @@
|
|||||||
// 插件的版本
|
// 插件的版本
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
// 插件描述
|
// 插件描述
|
||||||
"description": "简单的Chrome扩展demo",
|
"description": "__MSG_pluginDesc__",
|
||||||
// 图标，一般偷懒全部用一个尺寸的也没问题
|
// 图标，一般偷懒全部用一个尺寸的也没问题
|
||||||
"icons":
|
"icons":
|
||||||
{
|
{
|
||||||
@ -14,10 +14,12 @@
|
|||||||
"48": "img/icon.png",
|
"48": "img/icon.png",
|
||||||
"128": "img/icon.png"
|
"128": "img/icon.png"
|
||||||
},
|
},
|
||||||
// 后台JS
|
// 会一直常驻的后台JS或后台页面
|
||||||
"background":
|
"background":
|
||||||
{
|
{
|
||||||
"scripts": ["js/background.js"]
|
// 2种指定方式，如果指定JS，那么会自动生成一个背景页
|
||||||
|
"page": "background.html"
|
||||||
|
//"scripts": ["js/background.js"]
|
||||||
},
|
},
|
||||||
// 浏览器右上角图标设置，browser_action、page_action、app必须三选一
|
// 浏览器右上角图标设置，browser_action、page_action、app必须三选一
|
||||||
"browser_action":
|
"browser_action":
|
||||||
@ -38,11 +40,20 @@
|
|||||||
"content_scripts":
|
"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"],
|
"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
|
// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
|
||||||
"run_at": "document_start"
|
"run_at": "document_start"
|
||||||
|
},
|
||||||
|
// 这里仅仅是为了演示content-script可以配置多个规则
|
||||||
|
{
|
||||||
|
"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
|
||||||
|
"js": ["js/show-image-content-size.js"]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
// 权限申请
|
// 权限申请
|
||||||
@ -51,9 +62,14 @@
|
|||||||
"contextMenus", // 右键菜单
|
"contextMenus", // 右键菜单
|
||||||
"tabs", // 标签
|
"tabs", // 标签
|
||||||
"notifications", // 通知
|
"notifications", // 通知
|
||||||
|
"webRequest", // web请求
|
||||||
|
"webRequestBlocking",
|
||||||
|
"storage", // 插件本地存储
|
||||||
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
|
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
|
||||||
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
|
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
|
||||||
],
|
],
|
||||||
|
// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
|
||||||
|
"web_accessible_resources": ["js/inject.js"],
|
||||||
// 插件主页，这个很重要，不要浪费了这个免费广告位
|
// 插件主页，这个很重要，不要浪费了这个免费广告位
|
||||||
"homepage_url": "https://www.baidu.com",
|
"homepage_url": "https://www.baidu.com",
|
||||||
// 覆盖浏览器默认页面
|
// 覆盖浏览器默认页面
|
||||||
@ -62,6 +78,19 @@
|
|||||||
// 覆盖浏览器默认的新标签页
|
// 覆盖浏览器默认的新标签页
|
||||||
"newtab": "newtab.html"
|
"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页面入口，注意只能指向一个HTML文件，不能是JS文件
|
||||||
"devtools_page": "devtools.html"
|
"devtools_page": "devtools.html"
|
||||||
}
|
}
|
||||||
@ -15,9 +15,17 @@
|
|||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
color: #CCC;
|
color: #CCC;
|
||||||
}
|
}
|
||||||
|
.wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="center"><p>这是一个自定义的新标签页</p></div>
|
<div class="center"><p>这是一个自定义的新标签页</p></div>
|
||||||
|
<div class="wrapper"><a href="https://www.baidu.com">百度</a></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
32
demo/options.html
Normal file
32
demo/options.html
Normal file
@ -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>
|
||||||
@ -10,10 +10,59 @@
|
|||||||
width: 500px;
|
width: 500px;
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
}
|
}
|
||||||
|
a {margin-right: 10px;}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>这是一个popup页面！</h1>
|
<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/jquery-1.8.3.js"></script>
|
||||||
<script type="text/javascript" src="js/popup.js"></script>
|
<script type="text/javascript" src="js/popup.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -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>');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
BIN
page-action-demo/img/icon.png
Normal file
BIN
page-action-demo/img/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
13
page-action-demo/js/background.js
Normal file
13
page-action-demo/js/background.js
Normal file
@ -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()]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
});
|
||||||
33
page-action-demo/manifest.json
Normal file
33
page-action-demo/manifest.json
Normal file
@ -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"]
|
||||||
|
}
|
||||||
|
}
|
||||||
20
page-action-demo/popup.html
Normal file
20
page-action-demo/popup.html
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user