Follow Fang!: Chrome Extensions API 點擊Extensions圖示開新分頁

2015/02/20

Chrome Extensions API 點擊Extensions圖示開新分頁

點擊小圖示的動作可以透過chrome.browserAction.onClicked.addListener去註冊，該方法透過background方式去觸發
開新分頁，則透過create方法去建立一個新分頁即可，但注意當開啟的分頁不是這個Extensions內的檔案，則需要在Manifest新增url到permissions

當前這個範例則是透過test.js在background運作，且運作時就去註冊chrome.browserAction.onClicked.addListener方法，當使用者點擊時透過create方法去開新分頁並顯示Yahoo的頁面

執行結果：

index.html：

<!DOCTYPE html>
<html>
<head>
 <title>:)</title>
</head>
<body>
<h1>Hi</h1>
</body>
</html>

test.js：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({"url": "http://yahoo.com.tw"});
});

Manifest：

{
  "name": "C.Y. Fang",
  "manifest_version": 2,
  "version": "0.0.1",
  "description": "Happy new year",
  "homepage_url" : "http://cyfangnotepad.blogspot.tw/",
  "icons": { 
    "16" : "Images/book16.png",
    "128": "Images/book128.png"
  },
  "browser_action": {
    "default_title": "Title",
    "default_icon": "Images/book16.png"
  },
  "background": {
    "scripts": ["test.js"]
  },
  "permissions": [
    "tabs",
    "http://yahoo.com.tw/*"
  ]
}