😡webのスクロールでふわっと出てくるやつ絶対粉砕するマン【クソアプリ】 - Qiita
おひさしぶりです。この記事はクソアプリ Advent Calendar 2021の13日目です 突然ですが皆さんは「スクロールに合わせてふわっと出てくるwebページ」ってどう思います？ 最近多いですよね、あれ。 確かにオシャレだし楽しいしゲームとか作家さんのギャラリーサイトとかなら全然OK。でも情報が欲しくてアクセスしてるページで「ふわっ」ってされるとちょっとイラッとする。 ちょっと？...イラッと？...いや、 許さない、絶対 よろしい、ならば粉砕だ よそ様のサイトを粉砕する都合上、今回の実装はChrome機能拡張です。機能拡張はViteにChrome機能拡張用のプラグインvite-plugin-chrome-extensionを入れて作りました。今回は解説しないけど、これ超楽。フレームワークは無し、言語はTypeScriptです。 とは言え、クソアプリのためにChromeに機能拡張をイ
すべての開発者が知るべきGoogle Chromeの隠れた機能5選 - Qiita
試した方がいいGoogle Chrome experiments はじめに Chromeデベロッパーツールは、ウェブ開発者間で最も使われているツールの1つです。しかし、ほとんどの開発者が知らない素晴らしい機能があります。 この記事では、すべての開発者が試すべきChromeデベロッパーツールの実験的機能トップ5について説明します。 1. CSS Overview - すべてのスタイルの詳細情報を表示する CSS Overviewは、ウェブページで使われているすべてのスタイルの概要を表示します。 この機能は、色、フォント、メディアクエリ、未使用の宣言に関する詳細情報を含んでいます。UIにCSSの修正を加える時に便利で、カラーピッカーなどのサードパーティツールを使う必要がなくなります。 ChromeデベロッパーツールのCSS Overviewタブ この機能を有効にするには Google Chro
WebTransportでもプロトコル理解がしたい! - Qiita
前回のechoサンプルを少し改良しました。 前回はechoサンプルを動くようにしましたが、 今回はHTML側に切断処理を入れ、WebTransportのセッションが閉じられた時にQUICのイベントログを出力するようにしました。 今回はそのログも合わせてプロトコルを理解していきます。 ソースコードはこちら WebTransport? HTTP/3?? QUIC??? 何それおいしいの? WebTransportに何となくワクワクと闇の気配を感じている皆様こんにちは。 今回は前回のechoサンプルとドラフトを睨めっこしながらプロトコルについて理解していきたいと思います。 ここではChrome M97に実装されている WebTransport over HTTP/3について調べていきます。 どうしてWebTransportが必要なの? ブラウザで双方向通信がしたい けどWebSocketはTCP
WebTransportとWebCodecsを組み合わせてビデオチャットを実装してみる - Qiita
この記事は？ こんにちは。NTTコミュニケーションズのyuki uchidaです。普段はSkyWayというWebRTCプラットフォームの開発やWebRTCリサーチャー(見習い)をしています。 この記事は NTTコミュニケーションズ Advent Calendar 2020 10日目の記事です。昨日はy-i さんの記事、 「グループ内プログラミングコンテストをオンライン上で開いた件」でした。 前回、 NTT コミュニケーションズのアドベントカレンダー3日目の記事として、「WebSocketの次の技術！？WebTransportについての解説とチュートリアル」という記事を投稿しました。 WebTransportが出てきた背景や、双方向通信の歴史について解説しているため、興味があれば是非ご覧ください。 今回の記事は、そのWebTransportとWebCodecsを組み合わせてビデオチャットを実
開発体験を変える! Chrome DevTools Tips 7選 - Qiita
最近Chrome DevToolsについて調べていて発見した便利機能を紹介します。 誰もが使える最高便利な開発マシンChrome DevToolsを使いこなして開発体験を変えましょう！ 1. $0で選択中のDOM要素の取得 特定の要素に何かしたいという時には、要素のIDやclassを確認してConsoleでdocument.querySelector("#xxx")で取得するというのが一般的だと思います。実はそれはカーソル選択と$0で代替できます。 Classや、IDがついていない特定のDOMを取得したい時とかにも使えるので地味に便利です。 手順 カーソルで取得したい要素を選ぶ Consoleタブで$0を入力 最近知ったChrome DevToolsの便利機能① $0 での選択中のDOM要素取得 Elementsタブで選択状態のDOM要素は、Console上で $0 を入力することで取得で
ダークウェブをChromeから覗く闇のワンライナー Welcome to Underground - Qiita
ダークウェブ（.onionドメイン）にアクセスする場合、ブラウザはTorを使う必要がありますが、docker内でTorを建ててプロキシとして使えば、どのブラウザ、またはCURL、pythonスクリプト等でもアクセスできちゃいます。 ワンライナーはこちらです。 networksetup -setsocksfirewallproxy Wi-fi localhost 9150 && networksetup -setsocksfirewallproxystate Wi-fi on && cd $(mktemp -d) && echo -e "FROM alpine:3.12\nRUN apk add tor" > Dockerfile && docker build . -t torproxy && docker run -p 9150:9150 torproxy sh -c "chown -R
Chromeの拡張機能を2つ使うだけでブラウザの操作を自動化！？ - Qiita
「ブラウザの操作を自動化したい」 仕事中にこういう風に考えることがありました。 なぜこういう風な事を思ったのか。 それは申し込みのテストを毎回手動で行なってるOPさんに申し訳ないと思ったから。巷では自動テストだの言っていますが、人間でテストしなきゃいけない部分も沢山あります（ブラウザ操作が伴う物は余計に）。 そして自分も面倒くさがりなので基本的に手動でテストなんかしたくない。って事で上記に思い立ちました。 自動化といっても大層なことじゃなく、軽い条件でブラウザ操作したい人向け。 何せChromeの拡張機能を使うだけで出来るので。 複雑な事をしようと思えば、PythonとSeleniumで出来ますが、今回はそんな難しいことは望みじゃないです。 必要な入力項目に入力したり、特定のチェックボックスにチェックを入れてsubmitボタンを押すとか軽い感じ。 ブラウザの自動操作で使用するChromeの
Chrome 80が密かに呼び寄せる地獄 ～ SameSite属性のデフォルト変更を調べてみた - Qiita
Chrome 79以下や他ブラウザのデフォルト値。 Chrome 80からこの値を設定する場合、Secure属性も必須となる。 Aサイトに対し、Bサイトからどのようなリクエストがあっても、発行したサイトでCookieヘッダーに含める (Cookieを使用する) 図にすると以下のようになります。 Strict 外部サイトからのアクセスではCookieを送らない。 Lax 外部サイトからのアクセスはGETリクエストのときだけCookieを送る。 None 従来通りの動き。 【追記】なおChrome 80以降でSecure属性を付けずSameSite=Noneを指定した場合、set-cookie自体が無効になります。 セキュリティ上の効果 CSRF対策になります。 CSRF (クロスサイト・リクエスト・フォージェリ) とは、 WEBサイトがユーザー本人の意図した動作であることを検証していないため
Chrome App で最小限のテキストエディタを作る - Qiita
Chromebook を入手したのでちょっとしたテキストエディタを作る。ローカルのファイルを開いて、編集して、保存するだけの最小限のもの。こんな感じのやつ。Chrome 75.0 で作成。 GoogleChromeLabs が開発しているシンプルな text-app を参考にした。こちらはエディタ部分に CodeMirror を使っておりシンタックスハイライトが出来、また複数ファイルを同時に開く程度のことはできる。 https://github.com/GoogleChromeLabs/text-app まずマニフェストファイル。テキストエディタなのでファイルの書き込み許可が必要。 { "manifest_version": 2, "name": "MinimalEditor", "version": "0.1", "app": { "background" : { "scripts":
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
JavaScript の console がすごいことになっているらしい。 本日、以下の記事を見つけました。 Getting creative with the Console API! この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。 console.log() 本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。 %o / %O - for objects; %d / %i - for integers; %s - for strings; %f - for floating-point numbers; マジすか・・・ そんなわけで以下のコード console.log("Object value:
GPKI(apca)のSSL証明書は安全ではない？？ - Qiita
1.はじめに 予てからChrome68がリリースされた際に記事にしようと決めていた題材です。 Chrome68からSSL化されていないサイトの場合、「保護されていません」と警告が出る様になりました。 Googleは常時SSL化を提唱しており、SSL化されているWebサイトは検索順位が優遇されているにも関わらず、2018年07月28時点においてもGoogleの検索結果の最上位に非SSLサイトが表示されることがあります。 そう、官公庁のサイトです。 今回はなぜ官公庁のサイトで非SSLサイトが検索結果として表示されるか考察致しました。 2.官公庁サイトのSSL化について 多くの官公庁では政府認証基盤(GPKI)のApplicationCA2 Root(apca)という認証局が発行したSSL証明書を使用してSSL化しておりました(過去形)。 以下が証明書です。 ApplicationCA2 Roo
JavaScriptの { } を理解する - Qiita
結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc
Qiitaをより便利にするChrome拡張機能をつくりました - Qiita
筆者が「Qiitaにこういう機能があったらもっと使いやすいのに」 と思っていた機能をChrome拡張機能として実装しました。 ぜひインストールしてみてください。 Q Acceleratorと名付けました。 Qiitaでの活動を加速させるもの、といった感じです。 ※Accelerator（アクセラレーター）は「加速装置」「加速器」などの意味があります。 2017/03/03 時点ユーザー数 910ユーザーの方が使われています。 TL;DR インストールはChrome ウェブストアから https://chrome.google.com/webstore/detail/mheleidccioamimekojienbdfclcbaan/ 現在(2018/4/29)提供している機能 行番号を表示 記事の更新時間を表示 コピーアイコンを表示 自動いいね/自動ストック ヘッダー固定機能 新規投稿時のテ
Qiita:Team と比較して esa.io の方が圧倒的に優れてる機能3点 (\\( ⁰⊖⁰)/) - kakakakakku blog
プロダクトで CQO を担当していて，Qiita:Team をこよなく愛す僕ですが，食わず嫌いは良くないなということで，esa.io をトライアルで使ってみた． 実際にポストしてみたり，ヘルプを見てみて，基本的なところは Qiita:Team と似てるなーという印象を受けたんだけど，Qiita:Team と比較して esa.io の方が圧倒的に優れてるなと思う機能を3点を知ってしまったので，熱量高くまとめてみた．まぁ圧倒的は言い過ぎたかもwww 1. カテゴリーという概念があること esa.io のポストは，タグ以外にカテゴリーというメタ情報を付けることができて，これは便利． Qiita:Team だとタグしかないので，例えば日報のように時系列に沿った情報を探したりすることができず，結構ポストが埋没する傾向にあるという課題はどこのプロダクトでもあるんじゃないかなと思う． ちなみに Qiit
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
