Zenn
Closed13

DesmosのFirefox拡張を作る

Firefox
HyrodiumHyrodium

FirefoxでもconsoleからCalc.getState()を実行できた

基本的な操作は一緒なのかな

HyrodiumHyrodium

そのまま以前つくったChrome拡張のmanifest.jsonをそのまま選んだら問題なくインストールはできた様子。

ただし、exportはできてもimportで失敗する。

HyrodiumHyrodium

上記のメッセージによればDesmos本体のjsファイルから出ているらしいが、理由は謎。Chromeではエラーになっていないし…。

HyrodiumHyrodium

injected.jsの周辺のエラーっぽいのは分かったが、どうすれば良いのかさっぱり分からない。

https://github.com/hyrodium/DesmosTextIO/blob/777269150228813dc66ad962c748411aabb6da53/desmos-text-io/injected.js#L6-L9

    state = arg.detail
    Calc.setState(state);

の代わりに

    state = Calc.getState();
    Calc.setState(state);

とすればエラーなく動く。
なのでarg.detailとCalc.getState()で何らかの違いがあるようだが、これらをconsole.logで出力しても全く同じオブジェクトのように見える。

    state = Calc.getState();
    state["expressions"]["list"][0]["color"] = "#000000"
    Calc.setState(state);

のようなコードでも動くが

    state1 = arg.detail
    state2 = Calc.getState();
    state2["expressions"]["list"][0]["color"] = state1["expressions"]["list"][0]["color"]
    Calc.setState(state);

は以下のようなエラーになる。

Uncaught Error: Permission denied to access property "expressions"

HyrodiumHyrodium

setSTの関数を以下のように編集してFirefox/Chromeの両ブラウザで動くようにしました。

function setST(state) {
    if (typeof cloneInto !== 'undefined'){
        // Firefox
        let clonedDetail = cloneInto(state, document.defaultView);
        window.dispatchEvent(new CustomEvent('execPageFuncImport', { detail: clonedDetail }));
    } else {
        // Chrome
        window.dispatchEvent(new CustomEvent('execPageFuncImport', { detail: state }));
    }
}
HyrodiumHyrodium

Firefoxのアドオン登録をやっていく

アップロードではzipで固める必要があるらしい

HyrodiumHyrodium

Firefoxアドオンのための設定が必要とのエラー。

    "browser_specific_settings": {
        "gecko": {
            "id": "{2904c92e-079c-424b-bcd4-e1d4ae624249}"
        }
    },

をmanifest.jsonに追加して正常にアップロードできた。
UUIDは適当にJuliaで生成。

using UUIDs
uuid4()

UUIDを波括弧で囲むことに注意。

この辺りのドキュメントは https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings を参照。

このスクラップは2023/03/20にクローズされました