今回はChrome拡張機能でポップアップ機能からサイト上で実行される機能に値を渡す方法を紹介します。

前回ポップアップ機能を作りましたがこのままだと実際に表示しているページを操作できません。

そのため、Chrome拡張機能のバックグラウンド処理を作ってそこにメッセージを送る必要があります。

全体のイメージとしてはこんな感じです。

content_scriptが現在のページで動作している機能。actionがポップアップで動作する機能です。

これをつなぐためにバックグラウンド処理を追加します。

manifest.jsonに記述を追加

追加するためにmanifest.jsonに以下の記述を追加します。

"background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "tabs"
  ]

permissionsに関しては後で使用するために記述しています。

今回はポップアップ機能のボタンを押したときにcontent_script側でボタンを追加する機能を作ってみます。

actionの処理作成

まず、action側に

let id;

//アクティブタブ情報の取得
chrome.tabs.query({ active: true, lastFocusedWindow: true }, tabs => {
    // const results = document.getElementById('results');
    // const titles = [];

    for (let i = 0; i < tabs.length; i++) {
        console.log(tabs[i]);
    }
    id = tabs[0].id;

});

document.addEventListener('DOMContentLoaded', function () {
    const btn = document.getElementById('btn1');

    btn.addEventListener('click', function () {
        //バックグラウンド処理にメッセージ送信
        //この時IDは送っておかないとアクティブタブが判別できない
        chrome.runtime.sendMessage({
            name: 'background',
            url: url,
            id: id
        });
    });

});

と記述します。

上の図でも書いていますがchrome.runtime.sendMessageでバックグラウンド処理にメッセージを送ることができます。

また、アクティブタブを取得していますがバックグラウンド処理で使用するためです。

backgroundの処理作成

次にバックグラウンド処理を作ります。

//メッセージ受信
chrome.runtime.onMessage.addListener((request) => {
    // 期待通りのリクエストかどうかをチェック
    if (request.name === 'background') {

        // content_script へデータを送る
        chrome.tabs.sendMessage(request.id, { // content_script はタブごとに存在するため ID 指定する必要がある
            name: 'contentScripts',
            data: {
                url: request.url
            }
        });
    }
});

chrome.runtime.onMessage.addListenerでメッセージを受信できます。

このとき、どのメッセージなのか判別するためにポップアップ側にname要素を送信させています。

また、ここからcontetnt_script側に送信するためにchrome.tabs.sendMessageを使用して現在アクティブのタブに送信させます。

chrome.runtime.sendMessageで送信してしまうとポップアップ側に送信してしまうためです。

chrome.tabs.sendMessageを使用するためにはmanifest.jsonでpermissionsにtabsを指定しておく必要があります。

この時、現在のアクティブタブのIDが必要になるのでactionで取得したIDを使用して指定しています。

バックグラウンド処理でタブの情報を取得しようとすると拡張機能、つまりポップアップのIDが取得されるので注意が必要です。

content_scriptの処理作成

最後にcontetnt_script側で以下の記述をします。

//メッセージ受信
chrome.runtime.onMessage.addListener((request, options) => {
    if (request.name === 'contentScripts') {
        const tbody = document.querySelector('body')
        const taddElement = document.createElement('button');
        taddElement.textContent = 'testbtn';


        taddElement.addEventListener('click', function () {
            alert(request.data.url);
        });

        tbody.prepend(taddElement);
    }
});

chrome.tabs.sendMessagで送られたメッセージもchrome.runtime.onMessage.addListenerで受信することができます。

これも、どのメッセージなのか判別するためにname要素で判別させています。

これでポップアップでボタンを押すと現在のページにボタンを追加する機能が作れました。

個人的にこのメッセージのやり取りやアクティブタブのID取得で少し手間取ってしまいました。