Chrome拡張 – APIを使う

(Last Updated On: 2022-01-26)

Chrome API

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

必要なもの

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

manifestファイル修正

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

manifest.json

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

popup用html

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

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">拡張3</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 パラメータはオプション
}

確認

  1. 拡張機能を読み込み、有効化
  2. 拡張機能アイコンをクリック、popupを開く
  3. popupのボタンクリック
    popup4
  • permission 記述せずに createができる 多くは記述なしでも利用可能
  • backgroundページでも、同様にcreateが可能

参考

https://risaiku.net/archives/1653/

https://developer.chrome.com/extensions/api_index

環境

  • Windows7 Professional 64bit
  • Chrome バージョン: 79.0.3945.130(Official Build) (64 ビット)
  • アイコン作成、iconion、http://iconion.com/