[JavaScript]開發Chrome擴充功能
前言
Chrome瀏覽器商店內有非常多好用的擴充功能可以安裝
那麼有沒有想過自己也嘗試開發自己的擴充功能呢??
今天這篇文章將簡單敘述如何開發Chrome的擴充功能(一鍵開啟多數網址)
Step 1
在喜歡的地方建立一個資料夾當作根目錄，名稱隨意
進入根目錄後建立兩個資料夾，images 及 js
images資料夾內建立兩張圖片，icon.png (尺寸為64px * 64px) 及 icon_big.png (尺寸為128px * 128px)
作為擴充功能顯示的圖示
js資料夾內建立 run.js 檔案
根目錄下建立兩個檔案，index.html 及 manifest.json
manifest.json 請貼上以下內容
{
"manifest_version": 2,
"icons": {
"128": "images/icon_big.png"
},
"description": "open multiple url", // 擴充功能簡介
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "index.html", // 預設HTML檔案
"default_title": ""
},
"name": "OMU", // 擴充功能名稱
"version": "1.0.0", // 版本號
"homepage_url": "https://www.google.com/", // 開發人員網站
"permissions": [] // 需要的權限，可視情況加入
}
index.html 請貼上以下內容
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/run.js"></script>
<style type="text/css">
html, body {
margin: 0px;
padding: 5px;
width: 400px;
height: 550px;
text-align: center;
}
textarea {
width: 390px;
height: 500px;
margin-left: -5px;
}
button {
float: right;
margin-right: 5px;
color: #fff;
background-color: #007bff;
border-color: #007bff;
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
</style>
</head>
<body>
<textarea id="urls" placeholder="One URL per line"></textarea>
<br />
<div>
<button id="event">Open</button>
</div>
</body>
</html>
run.js 請貼上以下內容
function onWindowLoad() {
let urls = document.getElementById('urls');
document.getElementById('event').onclick = function() {
urls.value.split(/\r\n|[\r\n]/).forEach(function(value) {
value = value.replace(/\s+/, '');
if (value != '') {
chrome.tabs.create({ url: value });
}
});
};
}
window.onload = onWindowLoad;
Step 2
開啟擴充功能頁面，或在網址輸入 chrome://extensions/
右上角的 開發人員模式 開關打開
點選 載入未封裝項目 選擇第一步建立的根目錄後就可以開始使用了
程式碼
index.html 會直接當作擴充功能的畫面
裡面先是載入了 run.js 並加入了 button 和 textarea
run.js 定義了點下 button 後的事件
會去分析 textarea 的內容，每一行就是一條 URL
並且呼叫 Chrome API 創建新分頁
chrome.tabs.create({ url: value });
這樣就簡單的完成了一個小工具，非常的簡單
上架
製作完後若想要分享給其他人使用有兩種方式
其中一種就是把原始碼給對方，讓對方按照第二步操作
另外一種方式就是上傳到 Chrome 商店
但會一次性的收取5元美金的費用，最多可以發佈 20 項商品
下面簡單走一次上架的流程
開啟網站 開發人員資訊主頁
點取下方的立即付款
付款完成後請回到擴充功能頁面，點選封裝擴充功能，選擇要封裝的目錄
金鑰檔案可以不需要，會幫我們產生
完成後會產生一個 pem 檔案跟 crx 檔案
把 pem 檔案重新命名成 key.pem 後放入根目錄中
之後把整個根目錄壓縮成 zip 檔案
回到 開發人員資訊主頁 後點選 新增商品，上傳壓縮好的根目錄
後面會開始填寫一些基本資料，也需要上傳一些介紹圖片之類的
基本上一小時內就可以上架成功
倘若擴充功能需要用到特別的權限會進入人工審核，那就需要幾天的時間
上架成功後就可以讓全部的人安裝使用了
擴充功能上架後，OMU
之後若有修改需要上傳新版本的話
先把 manifest.json 內的版本號更新，1.0.0 > 1.0.1
重新壓縮後，再次上傳就行了