Tokyo WebExtensions Meetup #3で発表した資料ですが、スライドそのままだと情報量が少なすぎるので（スライド内では表示されない補助テキストの埋め込み機能が欲しい）、スライド1枚目を口頭での説明を踏まえた内容に置き換えておきます。 なお、同内容を自サイトにもクロスポストしています。 前提 Firefox 63以降の話です。 後述しますが、Firefox 64では最初から使えるようになる予定です。 Firefox 63ではabout:configでbrowser.tabs.multiselectをtrueにすると試せます。 Firefox ESR60などの古いバージョンは対象外です。 Chromeでもだいたい同じAPIが使えます。 タブの「選択」状態とは？ Firefox 63からタブの複数選択機能が入った事で「選択」という言葉が多義的になってしまったので、まずその点を

はじめに 背景と目的 元ネタは、@ozuma5119氏のスライド個人でEV SSL証明書が欲しい話でした。スライド36枚目から、オレオレEVSSL証明書1を作ってブラウザ(Firefox)に認識させようという試みが説明されているのですが、結局成功していませんでした。 そこでこの話に触発されて、 オレオレEVSSL証明書をブラウザ(Firefox)に認識させることはできるのか 件のスライドの説明よりもっと楽な方法はないか 件のスライドでうまく行かなかった理由は何か を調べた話になります。 前提 SSL/TLSの本当に基礎については、拙記事SSL/TLSの見落とされがちな「認証」という基本機能をご覧ください。その中でEVについても軽く触れています。 また、今回の話の全体像をつかむためには、冒頭で紹介したスライドを一読されることをお勧めします。 注意 本記事の趣旨はあくまで、ブラウザがEVだと認

Firefoxで、検索プラグインを追加したり、追加した検索プラグインを編集したりする方法を纏めた。本記事の内容は、Quantumにも旧式環境にも対応している。 ウェブブラウザに於いて、検索プラグインとは、検索バーやアドレスバーから検索をする機能に組み込まれる検索エンジンごとのプログラムである。Firefoxを含め殆どのウェブブラウザで、OpenSearch仕様1に準拠している。 筆者の環境は、次の通り。 OS: Windows 10 ウェブブラウザ(1): Mozilla Firefox 55.0.3 64bit版 ウェブブラウザ(2): Mozilla Firefox Developer Edition 60.0b4 ウェブブラウザ(3): Waterfox 56.0.4.1 検索プラグインの追加 検索エンジンサイトから追加 追加したい検索エンジンのウェブサイトで検索プラグインが提供され

QUICについて (2020/06 追記) 手前味噌ですが、QUICについて別途まとめましたので、参考にして頂ければ 2020/06/01 時点でHTTP/3, QUICの解説書を書きました https://github.com/flano-yuki/http3-note あわせて個人ブログもどうぞ QUIC, HTTP/3の標準化状況を確認したい (2019年11月版) QUICの話 (QUICプロトコルの簡単なまとめ) HTTP over QUICと、その名称について (HTTP3について) QUICとは QUICとはGoogleの考案したHTTPのメッセージを効率よく高速かつ安全にやりとりするためのプロトコルであり。UDP上でTCP+TLS1.3+HTTP/2のような機能を持ち、信頼性のある安全な通信を行う。 スタック図を見ると分かる通り、TCPのような輻輳制御やロスリカバリと、TL

addEventListener('fetch', (e) => { e.respondWith(fetch(e.request.url)); }); このようなスクリプトとページを用意すると、初回のページ訪問時にService Workerが保存され、次回の訪問時にはworker.js経由でレスポンスを取得します。その際に、前回の記事でちらっと紹介したように、worker.jsはmain.htmlとは別のプロセスで動く可能性があります。以下にその状態を図に示してみます。 まずmain.htmlを開くとそのリクエストはブラウザプロセスで処理されます。Service Workerが存在する場合、Service WorkerのあるレンダラプロセスへとFetch Eventが投げられます。 先程の例のように、worker.jsでfetch()を実行すると、Service Workerからリクエス

はじめまして、ひらのです。Blink 上でネットワーク関連の API (XHR, fetch API, WebSocket, …) の実装や、ローディング関連の実装を行っています。 本稿では、Fetch API における Request および RequestInit の keepalive プロパティの実装について解説します。このプロパティの実装は、Chromium のリソースローディングパスのかなりトリッキーな既存実装をいじる必要があり、また、Chromium のマルチプロセスアーキテクチャを意識することも必要なため、(いわゆる下位レイヤーですでに実装されているスイッチに配線するだけの実装と違い) 楽しい実装です。 リンク集 本稿では仕様の説明はほとんど行いません。以下を参照ください。 Fetch Spec (fetch, CORS) SendBeacon Content Securi

TL;DR; AssemblyScriptを使うと、TypeScriptコードをWebAssemblyに変換できます。オブジェクト指向プログラミングをしている場合は、オブジェクトが保存されるメモリ領域を自分で管理しなくてはならないので、その手間とのトレードオフを見極めてください。 なお、使用しているascのバージョンは 0.9.2 です。 C書けない私にWebAssemblyをつくれと言われましても WebAssembly（以下、WASM）とはWebブラウザで動くプログラムのバイナリ表現です。Safari, Edge, Chrome, Firefoxと、モダンなWebブラウザへの搭載も終わり、本格的に利用できるようになってきました。その特徴はスピードです。ネイティブに近いスピードで動作します。画像処理やエンコード、暗号といったCPUの処理能力に依存するような処理を行うモジュールをWebAs

この記事は所属会社のブログとのクロスポストです。 Firefoxのタブを参照するアドオンは、browser.tabs.get()やbrowser.tabs.query()などのAPIを使って各タブの状態を取得します。この時、Firefoxのタブの状態を表すオブジェクトはtabs.Tabという形式のオブジェクトで返されます。 tabs.Tabにはタブの状態を表すプロパティが多数存在していますが、ここに表れないタブの状態という物もあります。「未読」「複製された」「復元された」といった状態はその代表例です。これらはWebExtensions APIの通常の使い方では分からないタブの状態なのですが、若干の工夫で判別することができます。 タブが未読かどうかを判別する方法 タブの未読状態は、バックグラウンドのタブの中でページが再読み込みされたりページのタイトルが変化したりしたらそのタブは「未読」となり

この記事は所属会社のブログとのクロスポストです。 ソフトウェアをアンインストールする際には、ゴミや痕跡を無駄に残さない事が望ましいです。また、イベントを監視する必要のある機能を含んでいる場合、監視の必要がなくなったにも関わらず監視を続けていると、メモリやCPUを無駄に消費する事になります。こういった無駄を取り除くために行うのが、いわゆる終了処理です。Firefoxのアドオンでも、場合によって終了処理が必要になってきます。 アドオンが削除される際の終了処理は、現状では不可能 WebExtensions APIはGoogle Chromeの拡張機能向けAPIのインターフェースを踏襲しており、その中には、アドオンがアンインストールされたり無効化されたりしたタイミングで実行されるイベントハンドラを定義するための仕組みも含まれています。以下の2つがそれです。 runtime.onSuspend ru

はじめに この記事はChromium Browser Advent Calendar 2017の22日目の記事になります。 ChromiumプロジェクトでFetch APIやService Worker周りを担当しているhoroです。つい先日、Microsoft Edgeの開発者版やSafariの開発者版でもService Workerが使えるようになったそうで、非常に嬉しい限りです。 さて、今回は、Service Workerにも少し関係がある、JavaScriptのコードキャッシュについてです。 コードキャッシュとは この資料によると、現実世界のWebページでは、V8の実行時間のうちJavaScriptのパースに15-20%の時間がかかっていると言われています。 そこで、Chromiumでは、頻繁に読み込まれるJavaScriptファイルに関して、パース処理によって生成されるバイトコー

「とにかく再起動のやり方だけ教えて！」 って人はちょっと下までスキップ Restartアドオンが使えなくなった…！ Firefoxのバージョン57が出たのでアップデートしてみたところ… ・・・Mozillaが告知していた通り、数々の旧式アドオンが死にました。 その中にはRestartアドオンも含まれていました。 これはボタン1つでタブやウィンドウの状態を保ったままFirefoxを終了・起動、つまり再起動するアドオンです。 再起動したい理由 「わざわざブラウザをする必要あんの？」って思う人もいるかもしれません。なので、その理由を先に説明しておきます。 Firefoxはメモリの開放が上手くいってない 長時間使うとメモリが溜まって重くなる 再起動でメモリ開放ができる です。もしかするとFirefox Quantumでこの問題が解消されてるかもしれないですが、まあ、ゴミは残るだろうしタブの状態その

今年11月に新しいFirefoxがリリースされましたね。多くの処理がパラレルで動作するようになりマルチコア環境での動作が高速化しました。 この新しいFirefoxで改善された点にCSS描画速度の高速化も含まれていたので、ページ表示速度を速くするためのCSSの記述方法をまとめてみました。 シンプルに適用できるCSSにする（と速くなるはず） 要素への適用ルールをシンプルにできるCSSにすると描画速度が改善されるはず、です。後述しますが、この適用ルールには疑似要素(:beforeや:afterなど)も含まれます。 新しいFirefoxに搭載されているレンダリングエンジンの一部、Quantum CSS (Stylo) は以下3つの要素を組み合わせて実装されています。 ServoのParallelism（並行処理） FirefoxのRule Tree ChromeとSafariから取り入れた Sty

広告の効果測定サービスで利用している、計測用のJavaScriptタグでSafariのITP対応した話JavaScriptSafaricookie はじめに この記事は下記の勉強会での発表資料になります 自己紹介 株式会社オプト　シニアエンジニア @sisisin GitHub Twitter フロントエンドマン（Angular,AngularJS中心） Scalaも少々 最近はスクラムマスターやってます 先日、Safari11にてIntelligent Tracking Prevention(以下ITP)という機能がリリースされました ITP機能はユーザーのプライバシー保護のためにCookie利用に制限をかける機能で、これにより弊社の広告の効果測定サービスのユーザー行動の計測部分にも影響が出ました 最前線で使われるリアルなJSフレームワーク事情！ という題目とはちょっと逸れてしまいますが

Here is the English version of this article. この投稿は個人サイトとのクロスポストです。 2017年の8月下旬に思い立って、ツリー型タブのWebExtensions版を作り始め、去る9月26日にバージョン2.0としてリリースしました。 重い腰を上げて取り組む気になれたのは、必須と目していたAPIが一通り実装されてきて、Firefox 57でようやく技術的に作れる目処が立ってきたからでした。 関係者の皆さんの尽力に改めて感謝の意を表明します。 やっている事自体はそう難しい話ではなく、技術的に目新しいトピックは無いのですが、主に歴史的資料としてレガシーなアドオンの移行の一事例の記録を残しておこうと思います。 ツリー型タブとは？ 一言でいうと、ツリー型タブ（Tree Style Tab、略してTST）は「Firefox用の、タブ同士の来歴・関係をツリー

Web Speech APIを使うとJavaScriptだけでしゃべらせることができる。おぉ凄い！今時はそんな事もできるようになったのか！とワクワクしたもののの、いざ試してみるとしゃべってくれたり、くれなかったり…どうも全ての環境でしゃべってくれる訳ではなさそうです。 というわけでどの環境ならしゃべってくれるのか調べてみました。 どうやったらしゃべるの？ 以下のようなコードでしゃべらせることができます。 var u = new SpeechSynthesisUtterance(); u.text = "こんにちは"; u.lang = 'ja-JP'; u.rate = 1.0; speechSynthesis.speak(u); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Speech Test</title>

[2018/07/07 追記] 本記事ではChrome拡張について説明していますが、Firefox1やEdgeの拡張機能もほぼ同じ仕組みで動いています。 [2023/11/06 追記] #参考 ページを追加しました。 Chrome拡張。便利な機能を簡単に追加できるので使っている人も多いと思います。 ただ、インストール時の権限の注意書きが分かり難いので無条件に承認（追加）していることもあるのではないかと思われます。 そこで、本記事ではChrome拡張の権限の種類・確認方法の他、拡張がどこまで（悪いことを）できるのかとその対策を3段階の権限（危険性）レベルごとに紹介していきたいと思います。 便利だが危険性もあるChrome拡張 Chrome拡張をインストールすると、Webページを読むというブラウザ本来の機能だけでなく様々なことができるようになります。 例えば、Webメールの新着通知や記事などの

この記事はRecruit Engineers Advent Calendarの9日目の記事です。 また、この記事は2016年に書かれた古い記事です。当時は今とは状況がかなり異なっています。参考にする場合注意してください。 はじめに 2016年ももうすぐ終わりです。 今年はVR元年とも呼ばれる年でした。秋にはPlayStationVRが発売されたりと各所で盛り上がりを見せているVRですが、webにもその波が押し寄せています。 Mozilla VRチームが中心となって開発を進めてきたWebVR APIを利用することで、PCとVRデバイスを接続すればブラウザ上でVR体験が可能になります。 OculusRiftやDaydreamなど、VRコンテンツはそれぞれのプラットフォームに閉じてしまっていますが、webのオープン性を持ち込むことでより多くのメディアの架け橋となり、VRが浸透していく上で一翼を担

Android 7.0からはChromeがWebViewを提供する みたいのはあちこちでバズってる割に、中身の仕組みをちゃんと書いた記事は殆ど見ません。 個人的にはとても残念に思います。 ということで、中を見てみました。 まずは、Lollipopまでのおさらい WebViewのAPIを提供するのが、WebViewFactoryProviderで、 WebViewFactory::getProvider のなかで ネイティブ側の準備：libwebviewchromium.soの探索とロード パッケージ名はgetWebViewPackageName()で取得 Java API側の準備：WebviewProviderの生成と初期化 WebViewChromiumFactoryProviderが内部でWebViewDelegateを実装する みたいな流れの処理があります。 ソースレベルで見たければ

IE: プラグイン利用が必須 Edge: 現在対応中（詳しくは後述） Safari: Ericssonが WebRTC in WebKitプロジェクトを立ち上げ、開発を支援。WebKitへの実装が進められている WebRTC概要（詳細編） WebRTCが繋がる仕組み、要素技術の解説は今回の発表では行いません ご興味がある方は次の資料をお読みください 注目の最新技術「WebRTC」とは？ -技術概要と事例紹介- WebRTCの技術的習熟度 WebRTCの技術的習熟度 有名なガートナーレポートによれば 2016年版では流行期（Peak of Inflated Expectations）の終盤 流行期とは？ 世間の注目が大きくなり、過度の興奮と非現実的な期待が生じることが多い。成功事例が出ることも多いが、多くは失敗に終わる。 wikipediaより WebRTCの技術的習熟度 安定期までは2年〜

※will-changeは編集時点(2016/07/27)でCandidate Recommendationの状態です。仕様変更による挙動差異などがあれば適宜コメントを頂けるとありがたいです。 TL;DR 使いどころ JavaScriptでアニメーションを行う際 CSS animation, transitionを:hover等で遅延実行する際 などの、初期値として変形やアニメーションの値を持たない要素を特定の要因で実行する際に効果を発揮する ユースケースによって、常に指定するか、動かす直前から指定して終了時に解除するかを判断する 最適化はUAごとに異なっており、かつ指定したからといって必ず恩恵が得られるものではない "おまじない"的な使い方も有りだが、本当にパフォーマンスが必要な場面で有効かどうかはブラウザの実装を調べるのがてっとり早い 前提知識 Webブラウザのレンダリングの仕組み ブ