チェックされているチェックボックスの数を教えてくれるブラウザアドオンを作ってみた

ウェブページを読み込んだ時に、チェック済みのチェックボッスが存在する場合、その数をアラートウィンドウで表示するFirefox用のアドオン（拡張機能）を作ってみました。

全てのソースコードはgithubにあります。

GitHub - saaria/check-checkedbox-browser-addon: Check checked checkbox in the web page.
Check checked checkbox in the web page. Contribute to saaria/check-checkedbox-browser-addon development by creating an a...
github.com

そのまま使う場合はFirefoxのデバッグモードで一時的なアドオンとして読み込みますが、再起動すると解除されます。

初めての拡張機能 - Mozilla | MDN
この記事では、Firefox 用の拡張機能をどのように作ればよいのか、その初めから最後までを一通り説明します。この拡張機能は "mozilla.org" とそのサブドメインから読み込まれたページに赤い枠を付けるだけです。
developer.mozilla.org

継続的に使うには、Firefoxのアドオン開発者センターでの署名が必要になります。（下記参考サイトを参照して下さい）

自分専用のFirefoxアドオンを作る | その他 | kido Tech Blog
概要Firefox Add-ons - MozillaでWeb公開せず、自分だけ使えればいいアドオンを作りたくなったので作りました。そのときの手順をメモします。 アドオンそのものについては初めての拡張機能を参照して作ります。デバッグ時は一時...
kido0617.github.io

仕様について

  • 任意のページにアクセスし、拡張機能のツールボタンを押して表示される有効化チェックボックスにチェックを入れると、以降は同じドメインのウェブページがチェック対象になる
  • チェック有無の設定情報はブラウザのローカルストレージに保存する
  • チェック対象のページ表示時、チェック済みチェックボックスの数をカウントし、１以上の場合はアラートウィンドウを表示する

ソースコード（一部）

メイン

let count = 0;
const elements = document.getElementsByTagName('input');
for (let i = 0; i < elements.length; i++){
    if (elements.item(i).type === 'checkbox' && elements.item(i).checked) {
        count++;
    }
}

if (count > 0) {
        let save = browser.storage.local.get(getDomainFromURI(location.href));
        save.then((storedInfo) => {
            let status = storedInfo[Object.keys(storedInfo)[0]];
            if (status) alert(count+' checked checkbox found.');
        });
}

function getDomainFromURI(uri) {
    let uriobj = new URL(uri);
    return uriobj.hostname;
}

checkboxタイプのinputタグの要素を抽出してカウント、URLのドメインが処理対象である（ローカルストレージに、ドメインをキーとする”true”の値が保存されている）場合は、カウント値をアラートウィンドウで表示します。

旧バージョンの名残で、処理対象であるかに関わらず要素のチェックを行っています。（今後のリファクタリングで直すかも）

設定画面

var enableInput = document.querySelector('input');

function getActiveTab() {
    return browser.tabs.query({active: true, currentWindow: true});
}

function getDomainFromURI(uri) {
    let uriobj = new URL(uri);
    return uriobj.hostname;
}

getActiveTab().then((tabs) => {
    let save = browser.storage.local.get(getDomainFromURI(tabs[0].url));
    save.then((storedInfo) => {
        let status = storedInfo[Object.keys(storedInfo)[0]];
        if (status) enableInput.checked = true;
    });
}); 

enableInput.onchange = function(e) {
    getActiveTab().then((tabs) => {
        var checked = e.target.checked;
        let settingToStore = {};
        settingToStore[getDomainFromURI(tabs[0].url)] = checked;
        browser.storage.local.set(settingToStore);
    });
}

ブラウザ右上端に配置されるツールボタンを押したときに表示される画面のスクリプトです。（他にHTMLとCSSファイルもあり）

チェックを入れると、アクティブなタブのURLからドメインを取得し、それをキーとしてローカルストレージに設定値trueを書き込みます。

また、（有効で）設定済みのドメインのページを表示した際、チェックボックスにチェックを入れます。

作った経緯

“希望しない場合はチェックを外して下さい”というチェックボックスが配置されているページにおいて、”後になってからチェックを外していなかった”ということに気付くことが度々あるからです。

しかし、個人的には「希望する場合はチェックして下さい」の方がユーザー目線な設計だと思います。

Firefox用以外について

開発者は基本的にFirefoxしか使っていないので、正直作る気が湧いてきません。ただ、おそらくmanifestファイル以外は殆ど変えることなく動作しそうな気がします。

タイトルとURLをコピーしました