LoginSignup
0
0

More than 5 years have passed since last update.

拡張機能(WebExtensions)で、拡張機能がインストールされているというフラグを設定する方法

Posted at

初めに

文中において、対象のURLのページ(HTML)からロードされるスクリプト(JavaScript)のことをページスクリプトと記述します。

本題

拡張機能がインストールされているかどうかを取得する方法がないのか検索しても見つかりませんでした。
(もし、どなたかご存知でしたら教えてください。)
ですので、スクリプト(JavaScript)で対処する方法をとります。
そうなると、ページスクリプトより先に拡張機能のスクリプトが実行されていなければならないため、"run_at": "document_start"として、拡張機能のスクリプトを実行させます。拡張機能のメインスクリプトの実行タイミングが"document_start"でもいいのでしたら、メインスクリプトにインストールチェック用のスクリプトを追加するだけでいいですが、メインスクリプトの実行タイミングを"document_start"以外にしたい場合は、インストールチェック用のスクリプトファイルを別途用意し、"run_at": "document_start"に設定します。

{
    "name": "run_atのテスト",
    "version": "0.0.1",
    "manifest_version": 2,
    "author": "gtk2k",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "ext_main.js"  // 拡張機能のスクリプト
            ],
            "run_at": "document_end"
        },
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "ext_install_check.js"  // 拡張機能インストールチェック用スクリプト
            ],
            "run_at": "document_start"
        }
    ]
}

これで、どのページスクリプトよりも先にext_install_check.jsが実行されるようになりますが、ext_install_check.jsにどのようなスクリプトを書けば、ページスクリプトでもフラグの値が取得できるよになるのかを試しました。

× グローバル変数

window.extInstalled = true;

そもそも、ページスクリプトと拡張機能スクリプトの実行コンテキストが違うため、ページスクリプトでは取得できません。

× scriptタグ追加

const script = document.createElement('script');
script.text = window.extInstalled = true;
document.head.appendChild(script);

たとえ、このようにスクリプトでscriptタグを追加しても、ロード自体は非同期で行われるのか、これもダメ。

× document.bodyにdataset追加

document.body.dataset.extInstalled = '1';

実行タイミングが"document_start"であるため、スクリプト実行時点ではdocument.bodyがロードされていないのでこれもダメ。

〇 document.documentElementにdataset追加

document.documentElement.dataset.extInstalled = '1';

htmlタグにdatasetが追加され、これでようやく、どのページスクリプトにおいても、document.documentElement.dataset.extInstalledで取得できるようになりました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0