前言

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

重新壓縮後，再次上傳就行了

參考資料

Chrome Extension API