chrome extension develop study
I spent a day in reading the chrome extension development. Its main point is aboout manifest.json and backgroud.html and popup.html.
一个扩展的主要内容.crx本质上是一个zip压缩包包括：
A manifest file：只是配置信息，没有任何可执行代码
One or more HTML files (unless the extension is a theme)
Optional: One or more JavaScript files
Optional: Any other files your extension needs — for example, image files
一个扩展中的所有页面可以互相访问，调用函数以及DOMs
Content Scripts:如果需要和当前页面进行交互，可以使用内容脚本Content scripts，可以把它看作是当前载入页面的一部分。它可以获取页面的细节如DOMs，从而修改页面。类似于油猴脚本,但是不能和页面中的js交互。可以通过消息和Background Page交互，发送请求。
一个扩展只能有一个Browser Actions或者Page Actions。
Browser Actions:就是浏览器菜单栏上图标行为，可以对所有页面起作用,适合广泛的应用，不适合仅用于几个页面的应用。包括设置图标，提示文字和弹出页面。图标大小为19*19,Badge在icon上显示文本，4字符。
Page Actions：图标在地址栏里默认不显示，表示当前页可用的行为，如rss或者幻灯方式显示页面的图片。
Background Page:只要浏览器打开都在后台运行任务。关闭浏览器就自动结束。它可以根据状态实现UI包括Browser Actions和Page Actions，如setBadgeText()函数就要在该文件中进行设置。一些API函数也都在这里执行。它相当于一个后台程序。
API中很多函数是异步的，使用的是callback性质的回调函数，返回的值在函数的参数中。扩展的js运行在沙箱中。
支持Cross domain XMLHttpRequest，在Permission中指定域
chrome.i18n 本地化
debug调试：右键点击扩展图标->审查扩展内容 打开开发人员工具 选择sripts标签 单击需要的行号标记断点 在console下运行location.reload()重新执行Javascript脚本 右侧的工具栏中可以看到变量信息和调试工具。
事件处理：chrome.tabs.onCreated.addListener(function(tab) {
appendToLog('tabs.onCreated --'
+ ' window: ' + tab.windowId
+ ' tab: ' + tab.id
+ ' index: ' + tab.index
+ ' url: ' + tab.url);
});
注册事件监听器用addListener(). addListener() 的参数通常定义为一个处理事件的函数，这个函数的参数由要处理的事件决定。例如chrome.tabs.onCreated()有一个Tab object作为参数描述新建的标签页。
通过var imageUrl = chrome.extension.getURL('mm.jpg'); 获取扩展中图片的实际完整地址
manifest.json{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"background_page": "background.html",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Extension Study"
//"default_popup": "popup.html"
},
"options_page": "options.html",
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
background.html
<html><head>
<script>
//setBadgeBackgroundColor
chrome.browserAction.setBadgeBackgroundColor({color:[255,255,25,126]});
//setBadageText on icon
chrome.browserAction.setBadgeText({text:"12"});
var flag = true;
var test = true;
//React when a browser action's icon is clicked.
chrome.browserAction.onClicked.addListener(function(tab) { //这个事件和popup相冲突，只能使用其中的一个
var viewTabUrl = chrome.extension.getURL('image.html');
var imageUrl = chrome.extension.getURL('mm.jpg');/* an image's URL */
var imageUrl2 = "http://farm5.static.flickr.com/4123/4800832578_6ee2927da7.jpg"
if(flag){//只创建一次新标签
chrome.tabs.create({url: viewTabUrl});
flag = false;
}
//Look through all the pages in this extension to find one we can use.
var views = chrome.extension.getViews();
for (var i = 0; i < views.length; i++) {
var view = views[i];
//If this view has the right URL and hasn't been used yet...
if (view.location.href == viewTabUrl) { //find the tab we want
//...call one of its functions and set a property.
if(test){//change image on each click
view.setImageUrl(imageUrl);
test = false;
}else{
view.setImageUrl(imageUrl2);
test = true;
}
break; //we're done
}
}
});
</script>
</head>
<body></body>
</html>
an options.html
<html>
<head><title>My Test Extension Options</title></head>
<script type="text/javascript">
// Saves options to localStorage.
function save_options() {
var select = document.getElementById("color");
var color = select.children[select.selectedIndex].value;
localStorage["favorite_color"] = color;
// Update status to let user know options were saved.
var status = document.getElementById("status");
status.innerHTML = "Options Saved.";
setTimeout(function() {
status.innerHTML = "";
}, 750);
}
// Restores select box state to saved value from localStorage.
function restore_options() {
var favorite = localStorage["favorite_color"];
if (!favorite) {
return;
}
var select = document.getElementById("color");
for (var i = 0; i < select.children.length; i++) {
var child = select.children[i];
if (child.value == favorite) {
child.selected = "true";
break;
}
}
}
</script>
<body onload="restore_options()">
Favorite Color:
<select id="color">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select>
<br>
<button onclick="save_options()">Save</button>
</body>
</html>
本文使用Blog_Backup未注册版本导出，请到soft.pt42.com注册。
