运用 background_page ,`browser_action` and tabs
在工具栏中加入动画效果.
{
"name": "Animated Page Action",
"description": "This extension adds an animated browser action to the toolbar.",
"version": "1.1",
"permissions": ["tabs"],
"background": {
"page": "background.html"
},
"page_action": {
"default_title": "First icon"
},
"manifest_version": 2
}
<html>
<head>
<script>
var lastTabId = 0;
var tab_clicks = {};
chrome.tabs.onSelectionChanged.addListener(function(tabId) {
lastTabId = tabId;
chrome.pageAction.show(lastTabId);
});
chrome.tabs.getSelected(null, function(tab) {
lastTabId = tab.id;
chrome.pageAction.show(lastTabId);
});
// Called when the user clicks on the page action.
chrome.pageAction.onClicked.addListener(function(tab) {
var clicks = tab_clicks[tab.id] || 0;
chrome.pageAction.setIcon({path: "icon" + (clicks + 1) + ".png",
tabId: tab.id});
if (clicks % 2) {
chrome.pageAction.show(tab.id);
} else {
chrome.pageAction.hide(tab.id);
setTimeout(function() { chrome.pageAction.show(tab.id); }, 200);
}
chrome.pageAction.setTitle({title: "click:" + clicks, tabId: tab.id});
// We only have 2 icons, but cycle through 3 icons to test the
// out-of-bounds index bug.
clicks++;
if (clicks > 3)
clicks = 0;
tab_clicks[tab.id] = clicks;
});
var i = 0;
window.setInterval(function() {
var clicks = tab_clicks[lastTabId] || 0;
// Don't animate while in "click" mode.
if (clicks > 0) return;
// Don't do anything if we don't have a tab yet.
if (lastTabId == 0) return;
i++;
chrome.pageAction.setIcon({imageData: draw(i*2, i*4), tabId: lastTabId});
}, 50);
function draw(starty, startx) {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "rgba(0,200,0,255)";
context.fillRect(startx % 19, starty % 19, 8, 8);
context.fillStyle = "rgba(0,0,200,255)";
context.fillRect((startx + 5) % 19, (starty + 5) % 19, 8, 8);
context.fillStyle = "rgba(200,0,0,255)";
context.fillRect((startx + 10) % 19, (starty + 10) % 19, 8, 8);
return context.getImageData(0, 0, 19, 19);
}
</script>
</head>
<body>
<canvas id="canvas" width="19" height="19"></canvas>
</body>
</html>