這篇開始介紹 Chrome 相關的 API,
首先分享最常接觸到的 TAB 相關操作.

manifest.json

{
   "manifest_version": 2,
   "name": "ironman6",
   "version": "1.0",
   "browser_action": {
      "default_popup": "index.html"
   },
	"permissions": [
		"tabs"
	]
}

index.html

		<title>ironman6</title>
		<style>body {width: 500px ;} .icon {width: 16px; height: 16px;}</style>
	
	
		<button id="createTab">CreateTab ( http://ithelp.ithome.com.tw/ironman6/ )</button>
		<div id="output">Loading</div>
		<script src="app.js"></script>
	

app.js

document.addEventListener('DOMContentLoaded', function () {
	document.querySelector('#createTab').addEventListener('click', createTab);
	getTabs();
});

function getTabs(){
	chrome.tabs.query({}, function(result){
		var output = [];
		for (var i = 0; i < result.length; i++){
			var url   = result[i].url;
			var icon  = result[i].favIconUrl;
			var title = result[i].title;
			output.push('<p>');
			output.push('<img class="icon" src="' + icon + '"/>');
			output.push('<a href="' + url + '">' + title + '</a>');
			output.push('</p>');
		}
		document.querySelector('#output').innerHTML = output.join('');
	});
}

function createTab(){
	chrome.tabs.create({url: 'http://ithelp.ithome.com.tw/ironman6/'}, function(result){
		console.dir(result);
	});
}

值得注意的是 chrome.tabs.create 及 chrome.tabs.update 不需要要求 tabs 權限也能使用,
這對於 Chrome Extension 寫成 Web app 的開發者會很方便,
可以直接在新分頁上呈現自己的內容, 而不用局限於 popup 視窗裡.

下面是我常用的做法
在 index.html 裡放真正要跑的程式, 在 popup 的部份只做類似跳轉的動作
popup.html

<script src="popup.js"></script>

popup.js

chrome.tabs.create({url:chrome.extension.getURL("index.html")});