◆ 開発向け変更多め
◆ 一般のユーザ向けは広告ブロックが改善されたみたいだけどいまいち条件がわからなかった

久々に変わったところを調べてみました

普通に使う分には 操作方法やボタンが増えたといった目に見えて変わったところはないようです
Ctrl-F の見た目とリンクの下線が変わってました

開発者向けツールが色々変わってました

Element タブの右クリック

右クリックメニューがちょっと変わってました

といっても見た目の変化はまとめ方が変わった部分がほとんどで 選択要素の削除とフォーカスが増えたくらい
削除は Delete ボタンでよかったので フォーカスのほうが重要です

input 系に使うとフォーカスしてくれるので地味に便利です

63
ch63-element-menu


64
ch64-element-menu

Override?

What's New によると一番目に書かれてる大きな機能なのですが 65 に延期になったみたいです

ch64-features

実装はされていませんし 65 の devtools の更新に載っています
https://developers.google.com/web/updates/2018/01/devtools

使っていないので詳しくはわかりませんが 簡単に見たところでは devtools で更新した CSS の差分をローカルに保存することで変更を永続的に維持できる機能のようです
これで つい F5 を押して消してしまった! が消えるのですね

また リロードして再度確認したいときに F5 したらもとに戻ってしまう だけどまだ元ソースを更新したくないってときなどに使えそうです

これまででもローカルとファイルマッピングしていれば 永続化できましたが これはソース自体を変えてしまうので一時的に別の色を試してみたいってときにはあまりむいてませんでした
なので ローカルの別ファイルでオーバーライドできる機能は嬉しい機能です

それに ローカルマッピングだとサーバで使用するソースを書き換えることができる必要があったので自分管理のサーバでだけ有効でした
この機能だとローカルファイルでオーバーライドするわけなので 好きなサイトに使えそうです

適当なウェブサービスでカスタムスタイル当てたいときに devtools でいじって CSS 埋め込みツールに差分 CSS を登録するわけですが この機能だとそれすらいらなくなりそうです

ResizeObserver

要素のリサイズが起きたときに関数を実行してくれるオブザーバーです

1 年くらい前に ***Observer 系を調べてたときに見つけて使ってみた記憶があるようなないような なのですが 64 で実装されたようです
気のせいだったのか Chromium で試したか Firefox で試したのか…… ResizeObserver という言葉に覚えはありますし どういう機能かも知ってるので使ったことあるのは間違いないと思うのですが

ついでなので他の ***Observer 系

  • MutationObserver (ツリーを監視して子要素の変更や属性変更をトリガーに関数を呼び出してくれる)
  • InteractionObserver (要素の一定の割合が画面内に入ったり出たときに関数を呼び出してくれる)
  • PerformanceObserver (通信や画面表示などの performance 系のイベントをトリガーに関数を呼び出してくれる)

バックグラウンドタブの alert

バックグラウンドタブで alert が実行されたときに そのタブがアクティブになるまで遅延するようになりました

<script>
setTimeout(_ => console.log(prompt("alert")), 5000)
</script>

このコードが書かれたページを開いて タブを切り替えて待ちます
alert が起きるとファビコンのところに青色の●がでます

deferred-alert

このタブをアクティブにすると alert が表示されます
今回の変更は alert のみで confirm の場合は変わらず関数呼び出しのタイミングでタブが強制的に切り替えられます
また prompt は 56 からバックグラウンドだと遅延もなくその場で null が変えるようになっています


現時点のをまとめると
alertタブがアクティブになるまで遅延してアクティブになったら alert が出る
confirmconfirm を実行したタブに強制的に切り替え
promptprompt は出ないで null が結果になる (キャンセルや×で閉じたときと同じ返り値)

ポップアップブロック

前から迷惑な広告をブロックする機能が 64/65 で導入されると聞いていたのですが いまいち詳しい条件がわかりませんでした

説明では tab-under というタイプの広告をブロックできるようです
これは 別タブのポップアップと同時に元タブも別ページに移動するタイプのものみたいです

とりあえずそういう動きをするページを作ってみました

<!doctype html>

<div><a id="a1" href="https://www.google.com">Link</a></div>
<div><a id="a2" href="https://www.google.com" target="_blank">Link</a></div>
<div><a id="a3" href="mal.html" target="_blank">Link</a></div>


<script>
document.querySelector("#a1").onclick = ev => window.open("https://www.yahoo.co.jp")
document.querySelector("#a2").onclick = ev => location.href = "https://www.yahoo.co.jp"
</script>

mal.html
<!doctype html>

<p>mal.html</p>

<script>
window.opener.location.href = "https://www.google.com"
</script>

a1, a2 はそのページ側で両方のページを開きます

a1 は普通のリンクで Google に移動します
JavaScript のクリックリスナで同時に別タブで YahooJapan のページを開きます

a2 は target="_blank" つきなので別タブで Google のページを開きます
JavaScript のクリックリスナでは自身のページを YahooJapan へ遷移します

これでそれぞれクリックしてみましたが どちらもそのタブと別タブ両方でページが開かれました


そのページが 2 つを開く処理をしているならページ製作者の意図したもので ブロックする必要はない と判断したのかもしれません
そう思ってつくったのが a3 です

クリックすると mal.html を開いて mal.html 側から開いた元のページを遷移させます
これまででも noopener 付きで開くことでブロック可能な方法です

これもクリックしてみましたが 両方ともページが開かれました


「閲覧中タブと別タブの両方でページを開くこと」 じゃなくて 意図しない広告に飛ばされることを避けるために導入された機能らしいので Chrome がブラックリストを持っていて そこにマッチしたらブロックするとかなのかもしれません

iframe からの遷移

対処する予定があるらしい iframe の中から親のタブを遷移させるタイプの広告の対処も一応確認してみました

<!doctype html>

<iframe src="mal2.html"></iframe>

mal2.html
<!doctype html>

<script>
window.parent.location.href = "https://www.google.com"
</script>

こっちも特にブロックされませんでした

Unicode

やっと Unicode のプロパティが使えるようになりました
const regexp = /\p{ID_Start}|\p{ID_Continue}/u

63 まではこれはエラーになります


もうひとつ名前付きキャプチャにも対応しました
こういうのです
const regexp = /^(?<scheme>.+?)\:\/\//
regexp.exec("http://var.blog.jp")
// [ ]
// 0: "http://"
// 1: "http"
// groups: {scheme: "http"}
// index: 0
// input: "http://var.blog.jp"
// length: 2


ただでさえ長くてわかりづらい正規表現が長くなるし 名前つけないとわからないような複雑なのは使うべきじゃないと思うので 個人的はなくても良かったと思う機能です
あんまり好きじゃなく使える言語でも使ったことないので 使えるようになっても使わないような気がしてます

text-decoration-skip-ink

CSS のプロパティが実装されました

これのデフォルト値がこれまでの動きと異なる影響で 「y」 や 「/」 などの文字のところで下線が途切れるようになりました
フォントサイズが小さいと線がちゃんと表示できてないように見えて 大きくても途切れていて気持ち悪い見た目になりました

別記事

chrome://discards

discard 対象の優先順位を確認できる画面が見やすくテーブル表示になりました

別記事

Ctrl-F の見た目

これまでは画面の右上 拡張機能のボタンの下にボックスが出ていました

ctrl-f-63


それが 64 ではお気に入りのように URL が表示される部分の内側にアイコンがでるようになっていました

ctrl-f-64


常に出ているわけではなく検索バーを表示しているときのみアイコンが表示されます
アイコンを押しても閉じることもなく何も起きません

変に真ん中寄りになるより右上の端にいた昔のほうでよかったのに

その他

大きいもの 気になるものだとこんな感じです
他にも コンソールにサイドバーが増えたとか 要素の .focus メソッドに {preventScroll: true} を渡せばスクロールせずフォーカスできるようになったとか色々ありますが 残りは省略します