Chrome拡張でBrowserAction起動時に指定URL開いてやんよ!!!

タグ：Chrome Extension

BrowserAction と PageAction と Override Pages

Chrome拡張は大きく３種類の仕様に別れて、

PageAction

特定のサイトやURLにのみ挙動するPageAction。
URLバーにアイコンが表示され、指定のサービスに対応した際に自動で発動する様なRSS系はほとんどこのタイプです

BrowserAction

不特定多数のサイトで汎用性のある機能をポップアップ上で操作するBrowserAction。
ページのカラーコードを取得したり現在のURLのQRを発行する様なタイプです

Override Pages

その名の通り、ページを上書きします。新しくタブを開いた際にテーマを変更したり
デフォルトのページを自身のサービスのメニューに変更したりできます

BrowserAction仕様の制限

一番多いのはBrowserActionタイプですが、これが通常はPageActionの様にアイコンクリックで指定URLに飛ぶ様な設定がデフォルトではできません。
(基本はポップアップ表示が優先されるので)

個人的にはChrome拡張は業務で使う特定サイトをポップアップのコンパネ経由で作業効率ハック用に作る事が一番多いのでアプリ専用のサイトにいる場合は通常のポップアップを表示させ、
他のサイトにいる場合はブックマーク代わりにアイコンボタンを押したタイミングで任意のURLに飛ばすようにカスタムします

BrowserActionのmanifestファイル

まずはアプリに必要なマニュフェストファイルの設定

// 省略
"permissions": [
    "tabs",          // タブを操作する場合は必要
    "https://*/*"    // 操作対象を限定しない場合
],
  
"browser_action": {
    "default_icon": {
            "16": "images/icon16.png",
            "24": "images/icon24.png", 
            "32": "images/icon32.png"
    },
    "default_title": "yanyo_app",  // アイコンボタンのホバー時に出るテキスト  
    "default_popup": "popup.html"  // アイコンボタンをクリックするとこのhtmlがポップアップされる
},

// 省略

通常、BrowserAction仕様にした場合はこの"default_popup"がある事でアイコンをクリックしてもポップアップの表示が優先されてクリック時にイベントを書ける
chrome.browserAction.onClicked.addListener()が動きません。

なので、実行ファイルの「background.js」に以下を追記。

実行ファイル「background.js」の設定

// アプリで強制的に飛ばすURL
const app_url = "https://example.com";

// ポップアップが表示（ロード）されたら
window.addEventListener('load',()=>{
    chrome.tabs.getSelected(tab=>{ 
　　　　 // 現在のタブのURLを取得
	var tab_url = tab.url;
        // アプリを開いた時のページが設定URLのページじゃない場合は強制リンク
	if (tab_url != app_url ) {
            // 現在のウィンドウの新規タブで開く場合はこっち
	    chrome.tabs.create({ url: app_url });
            // 新規ウィンドウで開きたい場合はこっち
	    chrome.windows.create({ url: app_url });
	} 
    });
});

これでアプリアイコンをクリックした時点でのURLが設定したURLでなかった場合は一度強制的にリンクさせて もう一回クリックしたら通常通りポップアップが表示させられます

これでわざわざブックマークとかしなくてもよくなる、楽。