Chrome拡張 – APIを使う

(Last Updated On: 2022-01-26)

Chrome API

Chromeの公式ページに Extention APIs というのがあるのでそこを参考
tabs、windows というのがあるので、tab、windowを開くボタンのついた拡張４を作る

必要なもの

manifest.json
popup用html
popup用のjsファイル

manifestファイル修正

browser_action の popup でやってみる
“permissions” まず記入せずに作成

manifest.json

{
    "manifest_version": 2,
    "name": "で拡張４",
    "description": "拡張４",
    "version": "0.4",
    "browser_action": {
        "default_title": "初めて拡張４",
        "default_popup": "popup4.html",
        "default_icon": "icons/FontAwesome_f005(0)_48.png"
    }
}

popup用html

tabを開く、winndowを開くの２つのボタンを配置

popup4.html

<!doctype html>
<html lang="ja">
<head>
    <link rel="stylesheet" href="css/bulmaswatch_flatly.min.css" />
    <script src="js/popup4.js"></script>
</head>
<body>
<div id="pup2">
    <p class="title">拡張３</p>
    <div class="field">
        <div class="control">
            <input class="button is-info" type="button" value="tabを開く" id="b_tabop" />
        </div>
    </div>
    <div class="field">
        <div class="control">
            <input class="button is-success" type="button" value="windowを開く" id="b_winop" />
        </div>
    </div>
</div>
</body>
</html>

popup用js

クリックイベントのコールバック
Chrome API で、tabとwindow を開くのみ
ブラウザメニューで、新しいタブ、新しいウィンドウを選択した場合と同じ

js/popup4.js

window.onload=init;

//-----------------------------
// ロード時初期化
//
function init(){
    // 入力フィールド初期値

    let tab = document.getElementById('b_tabop');
    tab.addEventListener('click', tabop);

    let win = document.getElementById('b_winop');
    win.addEventListener('click', winop);
}

function tabop(){
    chrome.tabs.create({});  // 何も指定しないtab 必須パラメータなので省略不可
}

function winop(){
    chrome.windows.create();  // 何も指定しないwindow パラメータはオプション
}