Firefox(Quantum)のHTTPSサイトで、Content Scriptsで実行するXHR#open()ではURLが絶対パス化されない

v62.0b8で確認。
XHRの対象URLをプロトコルを含めて指定しないとエラーが投げられる。

const xhr = new XMLHttpRequest();

/*
    駄目な例x2
        DOMException: "The URI is malformed."
*/
xhr.open('get',    '/hoge');
xhr.open('get',    'www.example.com/hoge');


/*
    回避
*/
const url = new URL('/hoge', location.origin);
xhr.open('get', url.href);

url-change

hashchangeイベントはあるものの、URL全体の変更を監視するDOMイベントが見当たらない。標準APIを諦めてnpmでURL変更を監視してくれそうなモジュールを探したらいくつか見つかったが、timerでpollingするなんか重そうなやつ以外はURLを変更するメソッドをラップして変更を検知する実装になっていて、異なるwindowオブジェクトで動くブラウザ拡張機能だとそのままでは動かない。結局都合のいいものは見つからなかったため、仕方なく自分で作ることにした。

最初は素のEventコンストラクタを継承して実装したが、派生のHashChangeEventコンストラクタの方が.old/newURLプロパティを後付せず使えるため途中で乗り換えた。おしまい。

image-loaded-promise

ESMな画像読み込み監視モジュールが欲しかったが、調べて出てくるのはどれも通常scriptのライブラリかバンドル前提で都合のいいものが見つからなかったのと、これまで縁のなかったobserve系のAPIを使ってみたかったので自分で拵えた。

background-imageの読み込みはimg要素に同じURLを読み込ませて判定している。何年か前にどこかで見たときに目から鱗のでた方法だった。

MutationObserverのインスタンスに登録した要素を個別に解除する方法がわからず、仕方なく要素毎にインスタンスを作って不要になったらdisconnect()するゴミのような実装になっている。あまりに非合理的だが他にいい方法も思い浮かばなかった。自分のAPIの理解がどこかで間違っている気がする。

これまではES5にトランスパイルしてから圧縮していたため、今回uglify-jsが単体ではESMを解釈できないことに初めて気付いて頭を抱えたが、調べたらuglify-esという対応版が見つかってすんなり解決した。おしまい。

map-storage

ChromeExtensions, WebExtensionsのstorage APIをMap APIで使えるようにしたやつ。インスタンス毎に実体の.ldbファイルを一つ使う。今思えばFirefoxはWebExtensionsとは別にChromeExtensionsのCallbackスタイルなAPIも実装しているから、そっちに合わせて書いておけばChromeで使う際にWebExtensionsのPolyfillが不要になってよかったかもしれない。おしまい。

Map(iterable)ではthis.set()が使われる

例えば以下のようなMap継承クラスMapExtがあるとして、constructor内でsuper()による継承元コンストラクタでのインスタンス初期化を行う場合、super()に渡したiterableな引数は Map#set() ではなく MapExt#set() によって自身に格納される。要するにMapのコンストラクタでは、iterableを回してからタイトル通りに this.set(key, value) しているようだ。

class MapExt extends Map {
    constructor(arr){
        super(arr);
    }

    set(...args){
        console.log(...args);
        Map.prototype.set.call(this, ...args);
    }
}
const mapext = new MapExt([['key', 'value']])

これに気付かないまま、上記のような拡張クラスからのMapコンストラクタによる引数付き初期化を行おうとしてうまく行かず小一時間頭を抱えてしまった。これから自分で書くときにはコンストラクタ内でインスタンス自身のPropertyを使わないようにしよう……。おしまい。

すポンサードリンク
最新記事
カテゴリ
DN (57)
CSS (2)
いろいろ