你需要了解的內(nèi)容
-Chrome擴展文件
- Chrome擴展文件以.crx為后綴名循榆，在Google Chrome擴展官方網(wǎng)站下載擴展時，Chrome會將.crx文件下載到Chrome的Application Data文件夾的User Data\Temp下泽篮，一般是C:\Documents and Settings*User*\Local Settings\Application Data\Google\Chrome\User Data\Temp泼各，安裝完成或者取消安裝扣蜻，該文件就會被刪除莽使。.crx實際上是一個壓縮文件吮旅，使用解壓文件打開這個文件就可以看到其中的文件目錄庇勃，下圖中是“關(guān)燈看視頻”擴展的截圖：
Paste_Image.png
- 因此可以認為，我們實際上就是寫一個Web應(yīng)用掂铐，然后將按照Chrome的規(guī)定將一個快捷方式放在Chrome工具欄上。
2衷掷、Browser Actions（擴展圖標） - 把Browser Actions翻譯成擴展圖標不是很準確戚嗅，但它的功能就是把你的應(yīng)用顯示在Chrome工具欄上懦胞。我們在上面看到一個文件manifest.json躏尉，就是使用這個文件來把相應(yīng)的圖標和其他參數(shù)注冊到Browser Actions胀糜。比如下圖中就是EverNote的擴展圖標僚纷。
Paste_Image.png
3、Page Actions（地址欄圖標）
- 如果你熟悉一些Chrome插件的話陡蝇，你一定會發(fā)現(xiàn)有些擴展的圖標不是顯示在地址欄的右邊登夫，而是顯示在地址內(nèi)部右方恼策，這就是Page Actions地址欄圖標涣楷。
Paste_Image.png
- 可以看出上面中有三個Page Actions狮斗，圖中我標出的是Chrome添加書簽碳褒，現(xiàn)在你就會發(fā)現(xiàn)其實這個也是Chrome的擴展沙峻，只不是它是直接內(nèi)置在Chrome的。
- Page Actions與Browser Actions的區(qū)別就是Page Actions不是隨時都是顯示的睹逃，必須在特定的頁面中這個功能才能使用沉填。因此在開發(fā)中注意：如果不是全部頁面中都能使用的功能請使用Page Actions方式翼闹。
4猎荠、popup彈出窗口
popup屬于Browser Actions关摇，當點擊圖標時出現(xiàn)這個窗口输虱，可以在里面放置任何html元素宪睹，它的寬度是自適應(yīng)的亭病。當然罪帖，這個彈出窗口不會被Chrome攔截的:)
如下圖中是evernote的popup窗口：
Paste_Image.png
5、Background Pages后臺頁面
這個窗口不會顯示葬项，它是擴展程序的后臺服務(wù)迹蛤，它會一直保持運行。比如在一些需要數(shù)據(jù)保存程序中陋桂，如果當前用戶關(guān)閉popup嗜历，就需要Background Pages來進行相應(yīng)的操作梨州。
實踐
- 自動統(tǒng)計禪道的周統(tǒng)計暴匠，上周遺留
- popup.html中popup.js發(fā)送統(tǒng)計信息給d.js每窖，d.js統(tǒng)計好數(shù)據(jù)后在返回給popup.js
- manifest.json是配置文件
{
"name": "Long Extension Title",
"short_name": "Short Name",
"version": "1.0.0",
"manifest_version": 2,
"description": "Description of the Extension",
"icons": {
"128": "16.png"
},
"browser_action": {
"default_icon": "16.png",
"default_title": "",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["http://182.254.228.211:9099/*"],
"js": ["d.js","jquery.js"],
"run_at": "document_end"
}],
"permissions": [
"tabs",
"http://182.254.228.211:9099/"
],
"web_accessible_resources": ["popup.js"]
}
- popup.js主要是針對于popup.html中的元素操作窒典，其中chrome.tabs.sendMessage是發(fā)送一個類似于廣播的信息出去 d.js 是實際操作頁面元素的腳本
- popup.js代碼:
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#weekAddBug').addEventListener('change', changeHandler);
document.querySelector('#WeekRsoleBug').addEventListener('change', changeHandler);
document.querySelector('#lastWeekNoBug').addEventListener('change', changeHandler);
document.querySelector('#noRsoleBug').addEventListener('change', changeHandler);
document.querySelector('#resoleBug').addEventListener('change', changeHandler);
});
function changeHandler(){
//Do Something...maybe another function showAlert(), for instance
if(document.getElementById("weekAddBug").checked){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {startDate: $("#tbStartDate").val(),BugType:"weekAddBug"}, function(response) {
console.log(response.farewell);
});
});
chrome.tabs.executeScript({
file: 'd.js'
});
}
if(document.getElementById("WeekRsoleBug").checked){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {startDate: $("#tbStartDate").val(),BugType:"WeekRsoleBug"}, function(response) {
console.log(response.farewell);
});
});
chrome.tabs.executeScript({
file: 'd.js'
});
}
if(document.getElementById("lastWeekNoBug").checked){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {startDate: $("#tbStartDate").val(),BugType:"lastWeekNoBug",endDate:$("#tbEndDate").val()}, function(response) {
console.log(response.farewell);
});
});
chrome.tabs.executeScript({
file: 'd.js'
});
}
if(document.getElementById("noRsoleBug").checked){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {BugType:"noRsoleBug"}, function(response) {
console.log(response.farewell);
});
});
chrome.tabs.executeScript({
file: 'd.js'
});
}
if(document.getElementById("resoleBug").checked){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {BugType:"resoleBug"}, function(response) {
console.log(response.farewell);
});
});
chrome.tabs.executeScript({
file: 'd.js'
});
}
}
- d.js中的代碼
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.BugType == "weekAddBug"){
weekAddFindBug(request.startDate);
sendResponse({farewell: "新增Bug統(tǒng)計"});
}
if (request.BugType == "WeekRsoleBug"){
WeekRsoleBug(request.startDate);
sendResponse({farewell: "本周實解Bug統(tǒng)計"});
}
if (request.BugType == "lastWeekNoBug") {
lastWeekNoBug(request.startDate, request.endDate);
sendResponse({farewell: "上周遺留Bug統(tǒng)計"});
}
if (request.BugType == "noRsoleBug"){
noRsoleBug();
sendResponse({farewell: "沒有解決總數(shù)Bug統(tǒng)計"});
}
if (request.BugType == "resoleBug"){
resoleBug();
sendResponse({farewell: "解決總數(shù)Bug統(tǒng)計"});
}
});
//本周新增
function weekAddFindBug(d)
{
//d:"2015-10-9"
$("#bysearchTab").click();
setTimeout(1000);
$("#searchmore").click();
//創(chuàng)建日期
$("#field2 option").eq(27).attr("selected", "selected");
//創(chuàng)建日期選擇條件
$("#operator2 option").eq(3).attr("selected", "selected");
//創(chuàng)建的具體日期
$("#value2").val(d);
$("#value5").val("");
$("#submit").click();
}
如何打包chrome插件
- 打開chrome瀏覽器的開發(fā)中選項后室，點擊“打包擴展程序…”，彈出打包選擇文件窗口将饺，在擴展程序根目標中找到我們建立的文件夾予弧，私有密碼文件第一次不用選擇掖蛤。點擊確定蚓庭，它會在根文件夾同一級生成XXX.crx和XXX.pem，XXX.pem是程序簽名文件垢袱。把XXX.crx拖進Chrome窗體內(nèi)请契，就會把這個應(yīng)用XXX插件安裝在Chrome里爽锥。
Paste_Image.png
