{
	// 清單文件的版本，這個必須寫，而且必須是2
	"manifest_version": 2,
	// 插件的名稱
	"name": "demo",
	// 插件的版本
	"version": "1.0.0",
	// 插件描述
	"description": "簡單的Chrome擴展demo",
	// 圖標(biāo)，一般偷懶全部用一個尺寸的也沒問題
	"icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
	// 會一直常駐的后臺JS或后臺頁面
	"background":
	{
		// 2種指定方式，如果指定JS，那么會自動生成一個背景頁
		"page": "background.html"
		//"scripts": ["js/background.js"]
	},
	// 瀏覽器右上角圖標(biāo)設(shè)置，browser_action、page_action、app必須三選一
	"browser_action": 
	{
		"default_icon": "img/icon.png",
		// 圖標(biāo)懸停時的標(biāo)題，可選
		"default_title": "這是一個示例Chrome插件",
		"default_popup": "popup.html"
	},
	// 當(dāng)某些特定頁面打開才顯示的圖標(biāo)
	/*"page_action":
	{
		"default_icon": "img/icon.png",
		"default_title": "我是pageAction",
		"default_popup": "popup.html"
	},*/
	// 需要直接注入頁面的JS
	"content_scripts": 
	[
		{
			//"matches": ["http://*/*", "https://*/*"],
			// "<all_urls>" 表示匹配所有地址
			"matches": ["<all_urls>"],
			// 多個JS按順序注入
			"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// JS的注入可以隨便一點，但是CSS的注意就要千萬小心了，因為一不小心就可能影響全局樣式
			"css": ["css/custom.css"],
			// 代碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最后一個表示頁面空閑時，默認document_idle
			"run_at": "document_start"
		},
		// 這里僅僅是為了演示content-script可以配置多個規(guī)則
		{
			"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
			"js": ["js/show-image-content-size.js"]
		}
	],
	// 權(quán)限申請
	"permissions":
	[
		"contextMenus", // 右鍵菜單
		"tabs", // 標(biāo)簽
		"notifications", // 通知
		"webRequest", // web請求
		"webRequestBlocking",
		"storage", // 插件本地存儲
		"http://*/*", // 可以通過executeScript或者insertCSS訪問的網(wǎng)站
		"https://*/*" // 可以通過executeScript或者insertCSS訪問的網(wǎng)站
	],
	// 普通頁面能夠直接訪問的插件資源列表，如果不設(shè)置是無法直接訪問的
	"web_accessible_resources": ["js/inject.js"],
	// 插件主頁，這個很重要，不要浪費了這個免費廣告位
	"homepage_url": "https://www.baidu.com",
	// 覆蓋瀏覽器默認頁面
	"chrome_url_overrides":
	{
		// 覆蓋瀏覽器默認的新標(biāo)簽頁
		"newtab": "newtab.html"
	},
	// Chrome40以前的插件配置頁寫法
	"options_page": "options.html",
	// Chrome40以后的插件配置頁寫法，如果2個都寫，新版Chrome只認后面這一個
	"options_ui":
	{
		"page": "options.html",
		// 添加一些默認的樣式，推薦使用
		"chrome_style": true
	},
	// 向地址欄注冊一個關(guān)鍵字以提供搜索建議，只能設(shè)置一個關(guān)鍵字
	"omnibox": { "keyword" : "go" },
	// 默認語言
	"default_locale": "zh_CN",
	// devtools頁面入口，注意只能指向一個HTML文件，不能是JS文件
	"devtools_page": "devtools.html"
}

{
	// 需要直接注入頁面的JS
	"content_scripts": 
	[
		{
			//"matches": ["http://*/*", "https://*/*"],
			// "<all_urls>" 表示匹配所有地址
			"matches": ["<all_urls>"],
			// 多個JS按順序注入
			"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// JS的注入可以隨便一點，但是CSS的注意就要千萬小心了，因為一不小心就可能影響全局樣式
			"css": ["css/custom.css"],
			// 代碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最后一個表示頁面空閑時，默認document_idle
			"run_at": "document_start"
		}
	],
}

document.addEventListener('DOMContentLoaded', function()
{
	console.log('我被執(zhí)行了！');
});

{
	// 會一直常駐的后臺JS或后臺頁面
	"background":
	{
		// 2種指定方式，如果指定JS，那么會自動生成一個背景頁
		"page": "background.html"
		//"scripts": ["js/background.js"]
	},
}

{
	"background":
	{
		"scripts": ["event-page.js"],
		"persistent": false
	},
}

{
	"browser_action":
	{
		"default_icon": "img/icon.png",
		// 圖標(biāo)懸停時的標(biāo)題，可選
		"default_title": "這是一個示例Chrome插件",
		"default_popup": "popup.html"
	}
}

// 向頁面注入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()
	{
		// 放在頁面不好看，執(zhí)行完后移除掉
		this.parentNode.removeChild(this);
	};
	document.head.appendChild(temp);
}

{
	// 普通頁面能夠直接訪問的插件資源列表，如果不設(shè)置是無法直接訪問的
	"web_accessible_resources": ["js/inject.js"],
}

"browser_action":
{
	"default_icon": "img/icon.png",
	"default_title": "這是一個示例Chrome插件",
	"default_popup": "popup.html"
}

chrome.browserAction.setBadgeText({text: 'new'});
chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});

// manifest.json
{
	"page_action":
	{
		"default_icon": "img/icon.png",
		"default_title": "我是pageAction",
		"default_popup": "popup.html"
	},
	"permissions": ["declarativeContent"]
}

// background.js
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()]
			}
		]);
	});
});

// manifest.json
{"permissions": ["contextMenus"]}

// background.js
chrome.contextMenus.create({
	title: "測試右鍵菜單",
	onclick: function(){alert('您點擊了右鍵菜單！');}
});

// manifest.json
{"permissions": ["contextMenus"， "tabs"]}

// background.js
chrome.contextMenus.create({
	title: '使用度娘搜索：%s', // %s表示選中的文字
	contexts: ['selection'], // 只有當(dāng)選中文字時才會出現(xiàn)此右鍵菜單
	onclick: function(params)
	{
		// 注意不能使用location.href，因為location是屬于background的window對象
		chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
	}
});

chrome.contextMenus.create({
	type: 'normal'， // 類型，可選：["normal", "checkbox", "radio", "separator"]，默認 normal
	title: '菜單的名字', // 顯示的文字，除非為“separator”類型否則此參數(shù)必需，如果類型為“selection”，可以使用%s顯示選定的文本
	contexts: ['page'], // 上下文環(huán)境，可選：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默認page
	onclick: function(){}, // 單擊時觸發(fā)的方法
	parentId: 1, // 右鍵菜單項的父菜單項ID。指定父菜單項將會使此菜單項成為父菜單項的子菜單
	documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些頁面顯示此右鍵菜單
});
// 刪除某一個菜單項
chrome.contextMenus.remove(menuItemId)；
// 刪除所有自定義右鍵菜單
chrome.contextMenus.removeAll();
// 更新某一個菜單項
chrome.contextMenus.update(menuItemId, updateProperties);

"chrome_url_overrides":
{
	"newtab": "newtab.html",
	"history": "history.html",
	"bookmarks": "bookmarks.html"
}

{
	// 只能指向一個HTML文件，不能是JS文件
	"devtools_page": "devtools.html"
}

<!DOCTYPE html>
<html>
<head></head>
<body>
	<script type="text/javascript" src="js/devtools.js"></script>
</body>
</html>

// 創(chuàng)建自定義面板，同一個插件可以創(chuàng)建多個自定義面板
// 幾個參數(shù)依次為：panel標(biāo)題、圖標(biāo)（其實設(shè)置了也沒地方顯示）、要加載的頁面、加載成功后的回調(diào)
chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
{
	console.log('自定義面板創(chuàng)建成功！'); // 注意這個log一般看不到
});

// 創(chuàng)建自定義側(cè)邊欄
chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar)
{
	// sidebar.setPage('../sidebar.html'); // 指定加載某個頁面
	sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通過表達式來指定
	//sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接設(shè)置顯示某個對象
});

// 檢測jQuery
document.getElementById('check_jquery').addEventListener('click', function()
{
	// 訪問被檢查的頁面DOM需要使用inspectedWindow
	// 簡單例子：檢測被檢查頁面是否使用了jQuery
	chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException)
	{
		var html = '';
		if (isException) html = '當(dāng)前頁面沒有使用jQuery。';
		else html = '當(dāng)前頁面使用了jQuery，版本為：'+result;
		alert(html);
	});
});

// 打開某個資源
document.getElementById('open_resource').addEventListener('click', function()
{
	chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException)
	{
		chrome.devtools.panels.openResource(result, 20, function()
		{
			console.log('資源打開成功！');
		});
	});
});

// 審查元素
document.getElementById('test_inspect').addEventListener('click', function()
{
	chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){});
});

// 獲取所有資源
document.getElementById('get_all_resources').addEventListener('click', function()
{
	chrome.devtools.inspectedWindow.getResources(function(resources)
	{
		alert(JSON.stringify(resources));
	});
});

{
	// Chrome40以前的插件配置頁寫法
	"options_page": "options.html",
}

{
	"options_ui":
	{
    	"page": "options.html",
		// 添加一些默認的樣式，推薦使用
    	"chrome_style": true
	},
}

{
	// 向地址欄注冊一個關(guān)鍵字以提供搜索建議，只能設(shè)置一個關(guān)鍵字
	"omnibox": { "keyword" : "go" },
}

// 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},
		]);
	}
});

// 當(dāng)用戶接收關(guān)鍵字建議時觸發(fā)
chrome.omnibox.onInputEntered.addListener((text) => {
    console.log('inputEntered: ' + text);
	if(!text) return;
	var href = '';
    if(text.endsWith('美女'))  + text;
	else if(text.startsWith('百度搜索'))  + text.replace('百度搜索 ', '');
	else if(text.startsWith('谷歌搜索'))  + text.replace('谷歌搜索 ', '');
	else  + text;
	openUrlCurrentTab(href);
});
// 獲取當(dāng)前選項卡ID
function getCurrentTabId(callback)
{
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
	{
		if(callback) callback(tabs.length ? tabs[0].id: null);
	});
}

// 當(dāng)前標(biāo)簽打開某個鏈接
function openUrlCurrentTab(url)
{
	getCurrentTabId(tabId => {
		chrome.tabs.update(tabId, {url: url});
	})
}

chrome.notifications.create(null, {
	type: 'basic',
	iconUrl: 'img/icon.png',
	title: '這是標(biāo)題',
	message: '您剛才點擊了自定義右鍵菜單！'
});

// background.js
function test()
{
	alert('我是background！');
}

// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.test(); // 訪問bg的函數(shù)
alert(bg.document.body.innerHTML); // 訪問bg的DOM

var views = chrome.extension.getViews({type:'popup'});
if(views.length > 0) {
	console.log(views[0].location.href);
}

function sendMessageToContentScript(message, callback)
{
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
	{
		chrome.tabs.sendMessage(tabs[0].id, message, function(response)
		{
			if(callback) callback(response);
		});
	});
}
sendMessageToContentScript({cmd:'test', value:'你好，我是popup！'}, function(response)
{
	console.log('來自content的回復(fù)：'+response);
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
	// console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");
	if(request.cmd == 'test') alert(request.value);
	sendResponse('我收到了你的消息！');
});

chrome.runtime.sendMessage({greeting: '你好，我是content-script呀，我主動發(fā)消息給后臺！'}, function(response) {
	console.log('收到來自后臺的回復(fù)：' + response);
});

// 監(jiān)聽來自content-script的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
	console.log('收到來自content-script的消息：');
	console.log(request, sender, sendResponse);
	sendResponse('我是后臺，我已收到你的消息：' + JSON.stringify(request));
});

window.postMessage({"test": '你好！'}, '*');

window.addEventListener("message", function(e)
{
	console.log(e.data);
}, false);

var customEvent = document.createEvent('Event');
customEvent.initEvent('myCustomEvent', true, true);
function fireCustomEvent(data) {
	hiddenDiv = document.getElementById('myCustomEventDiv');
	hiddenDiv.innerText = data
	hiddenDiv.dispatchEvent(customEvent);
}
fireCustomEvent('你好，我是普通JS！');

var hiddenDiv = document.getElementById('myCustomEventDiv');
if(!hiddenDiv) {
	hiddenDiv = document.createElement('div');
	hiddenDiv.style.display = 'none';
	document.body.appendChild(hiddenDiv);
}
hiddenDiv.addEventListener('myCustomEvent', function() {
	var eventData = document.getElementById('myCustomEventDiv').innerText;
	console.log('收到自定義事件消息：' + eventData);
});

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: '哦，原來是你啊！'});
		}
	});
});

// 監(jiān)聽長連接
chrome.runtime.onConnect.addListener(function(port) {
	console.log(port);
	if(port.name == 'test-connect') {
		port.onMessage.addListener(function(msg) {
			console.log('收到長連接消息：', msg);
			if(msg.question == '你是誰?。?) port.postMessage({answer: '我是你爸！'});
		});
	}
});

{
	"name": "動態(tài)JS注入演示",
	...
	"permissions": [
		"tabs", "http://*/*", "https://*/*"
	],
	...
}

// 動態(tài)執(zhí)行JS代碼
chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'});
// 動態(tài)執(zhí)行JS文件
chrome.tabs.executeScript(tabId, {file: 'some-script.js'});

{
	"name": "動態(tài)CSS注入演示",
	...
	"permissions": [
		"tabs", "http://*/*", "https://*/*"
	],
	...
}

// 動態(tài)執(zhí)行CSS代碼，TODO，這里有待驗證
chrome.tabs.insertCSS(tabId, {code: 'xxx'});
// 動態(tài)執(zhí)行CSS文件
chrome.tabs.insertCSS(tabId, {file: 'some-style.css'});

chrome.windows.getCurrent(function(currentWindow)
{
	console.log('當(dāng)前窗口ID：' + currentWindow.id);
});

// 獲取當(dāng)前選項卡ID
function getCurrentTabId(callback)
{
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
	{
		if(callback) callback(tabs.length ? tabs[0].id: null);
	});
}

// 獲取當(dāng)前選項卡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);
		});
	});
}

// 讀取數(shù)據(jù)，第一個參數(shù)是指定要讀取的key以及設(shè)置默認值
chrome.storage.sync.get({color: 'red', age: 18}, function(items) {
	console.log(items.color, items.age);
});
// 保存數(shù)據(jù)
chrome.storage.sync.set({color: 'blue'}, function() {
	console.log('保存成功！');
});

//manifest.json
{
	// 權(quán)限申請
	"permissions":
	[
		"webRequest", // web請求
		"webRequestBlocking", // 阻塞式web請求
		"storage", // 插件本地存儲
		"http://*/*", // 可以通過executeScript或者insertCSS訪問的網(wǎng)站
		"https://*/*" // 可以通過executeScript或者insertCSS訪問的網(wǎng)站
	],
}


// background.js
// 是否顯示圖片
var showImage;
chrome.storage.sync.get({showImage: true}, function(items) {
	showImage = items.showImage;
});
// web請求監(jiān)聽，最后一個參數(shù)表示阻塞式，需單獨聲明權(quán)限：webRequestBlocking
chrome.webRequest.onBeforeRequest.addListener(details => {
	// cancel 表示取消本次請求
	if(!showImage && details.type == 'image') return {cancel: true};
	// 簡單的音視頻檢測
	// 大部分網(wǎng)站視頻的type并不是media，且視頻做了防下載處理，所以這里僅僅是為了演示效果，無實際意義
	if(details.type == 'media') {
		chrome.notifications.create(null, {
			type: 'basic',
			iconUrl: 'img/icon.png',
			title: '檢測到音視頻',
			message: '音視頻地址：' + details.url,
		});
	}
}, {urls: ["<all_urls>"]}, ["blocking"]);

{
	"pluginDesc": {"message": "A simple chrome extension demo"},
	"helloWorld": {"message": "Hello World!"}
}

{
	"pluginDesc": {"message": "一個簡單的Chrome插件demo"},
	"helloWorld": {"message": "你好啊，世界！"}
}

{
	"description": "__MSG_pluginDesc__",
	// 默認語言
	"default_locale": "zh_CN",
}

<input id="btn" type="button" value="收藏" onclick="test()"/>

$('#btn').on('click', function(){alert('測試')});

<a href="javascript:;" rel="external nofollow"  rel="external nofollow"  id="get_secret">請求secret</a>