Google Chrome 88正式版リリース、拡張機能の新たな仕様「マニフェストv3」がついに到来
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン88.0.4324.96がリリースされました。拡張機能の新たな仕様「マニフェストv3」がサポートされたほか、CSSでアスペクト比が指定できるようになったり、JavaScriptのタイマー機能が乱用されているサイトのせいでChromeの動作が重くなりすぎないように変更されたりしています。 New in Chrome 88 | Web | Google Developers https://developers.google.com/web/updates/2021/01/nic88 New in Chrome 88: Manifest v3, aspect-ratio, digital goods API, and more! ◆マニフェストv3で作成された拡張機能をサポート マニフェストはChrome拡張機能の
ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar | DevelopersIO
ヘッドレスChromeでシンプルに自動テストを行う Google Chromeのバージョン59から標準搭載された、ヘッドレスモード（GUIがないモード）。コマンドラインからヘッドレスブラウザを立ち上げることができ、スクリーンショットの撮影を行ったりDOMを出力したりすることができます。自動化の可能性に満ち溢れた機能です。 ヘッドレスChromeの導入については、次の公式ドキュメントが詳しいです。 ヘッドレス Chrome ことはじめ | Web | Google Developers ドキュメントを読んでいただくと分かると思いますが、様々なことが可能なため指示の記述が少し冗長な面があります。 そこでヘッドレスChromeを用いた自動化処理をシンプルにすることに特化した便利ツール「Chromeless」を紹介します。 なお、今回実装したソースコードはGitHubで公開しています。わせ
Headless Chromeでデザイン変更履歴を追える魚拓を作ってみた - pixiv inside
はじめに こんにちは、普段はPawooの開発を担当している新卒エンジニアのabcangです。 最近話題のHeadless Chromeを使って魚拓を作ってみましたので、その話をします。 結論から言うと、こういうものができました。 以下、詳しくお話していきます。 日々行われるデザイン変更をどう把握するか pixivには毎日新機能やUIの変更がデプロイされており、どんどんページが変わっていきます。 ある日、ディレクターから「デザインの変更履歴を追うための魚拓ツールがほしい」と相談されました。魚拓ツールがあると、なにか数値の変動があったときにデザインの崩れを確認したり、過去のデザインを振り返ったりするときに便利とのことです。 ちょうどそのタイミングでHeadless Chromeが利用できるGoogle Chrome 59がリリースされていたので、試すいい機会だと思い引き受けました。 Headl
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
「AngularJS」と「はてブAPI」で作るChromeアプリの作り方を完全公開！ -
どうも、まさとらん（@0310lan）です。 今回は、Googleが提供する「Chromeブラウザ」で動作するアプリケーションを作ってみたいと思います。 「なんだか難しそう…」と思うかもしれませんが、ざっくり言ってしまうと普通に「Webページ」を作るのと変わりません。 そこで、簡単なサンプルアプリを作りながら、自分だけのChromeアプリ開発に挑戦してみましょう！ ■Chromeアプリとは？ 開発を始める前に、まずは予備知識としてChromeアプリの「種類」についてご紹介しておきます。 実は、「Chromeアプリ」と言っても、いくつか異なる種類があります。 例えば、「Appspector」というChromeアプリは、ブラウザの機能を拡張することで、表示されているWebページがどんな技術を利用して作られているのかを表示できるようになります。（https://chrome.google.com
Electron(旧atom shell)基礎+入門
The document discusses an Electron (formerly Atom Shell) meetup. It provides links to documentation on the differences between Electron and Node-webkit. If time permits, an Electron demo may be shown. Electron allows building cross-platform desktop apps using JavaScript, HTML, and CSS by embedding Chromium and io.js. It also references a presentation on embedding Node.js into the Atom editor.
Chrome’s Console API: Greatest Hits
Mitch Robb 14 Jul 2014 Chrome’s Console API: Greatest Hits The Chrome debugger is the best tool for locating problematic code in a JavaScript application, but there are times that diving into your code line-by-line isn’t the fastest or most convenient means to that end. We all know about console.log(), but I thought I’d write about a few of its lesser-known cousins that are more refined, and can
連休なので、はてなNGフィルターを作ったらクソ快適になった話
Chromeの拡張機能としてリリースしましたよ！ はてなNG - Chrome ウェブストア https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AAng/mbgdnfmdelffjdhkdggilmphfdihnmcj 機能NGアドレスのエントリーをブロックします。NGワードを含むエントリーをブロックします。NGアカウントのコメント、はてなスター、ブログをブロックします。同一アカウントの連打による複数のスターをひとつのスターにして表示します。[対象サイト] はてな（http://www.hatena.ne.jp/） はてなブックマーク内ページ（http://b.hatena.ne.jp/） 結果はてなの閲覧がめちゃくちゃ快適になりました！ 目障りなサイトやアカウントは見なくて済むし、ブコメページのノイジーな
JavaScriptでzip,unzipするライブラリjsziptools
作った。 ukyo/jsziptools - GitHub chrome,firefoxあたりで動きます。コードをちょっと変えればIE10でも動くかも。 実はStringベースでzip,unzipできるライブラリというのはすでにあります。 JSZip: JavaScript zip class zip inflate on javascript jsziptoolsはBlobBuilder,TypedArrayなどHTML5のAPIをつかった割とモダンな実装です。 これらを使うことによって、より巨大なファイルを扱えたり、より高速に実行できたりします。 inflate,deflateに関してはMasanao Izumo氏が作成したライブラリを stringから配列(逆も)に変換している部分を排除して全体を無名関数でラップしたものを使用しています。 http://www.onicos.com/
こてさきAjax:[Google I/O 2013 速報] Chrome Packaged Apps v2 凄いことに!! - livedoor Blog（ブログ）
いよいよ、Google I/O 2013 が始まりました！！今年は、初めてのI/O参加で、サンフランシスコに来ています。 基調講演は、昨年のダイブ w/ Google glassに比べると堅実な印象で、大半をAndroidとChromeに時間を割きつつ、一番派手だったのが、Google Maps w/ WebGL。まぁ、Maps GLの流れからすると、「ついに来たか」って感じなので、あまりサプライズという感じではありませんでした。まぁ、基調講演のレポートは各所から出ると思うので、今回の僕の記事では取り上げません。 Chrome/HTML5について、keynoteではそんなにサプライズな感じではなかったのですが、"The Chrome Packaged Apps State of the Nation" というセッションでかなりのサプライズがあったので、今日はそれの速報記事です。 このセッシ
Google ChromeでJavaScriptのデバッグをする際にはぜひインストールを！·JS Runtime Inspector MOONGIFT
JS Runtime InspectorはGoogle ChromeのJavaScriptデバッグを強力にサポートしてくれるソフトウェアです。 最近はJavaScriptを徹底的に活用したWebアプリケーションも増えてきました。そんな中デバッグは非常に困難になってきています。そこで使ってみたいのがJS Runtime Inspectorです。 インスペクタにJS検索フィールドが追加されます。 検索結果です。 そこから定義されている場所に簡単に飛べます。 利用例。 JS Runtime Inspectorを使えばJavaScriptを掘り下げて調べるのがとても簡単になります。関数名の他、値でも検索できるので目的の処理を見つけるのが簡単になるはずです。 JS Runtime InspectorはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
『JavaScript開発時に便利なツールたち』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバ事業本部でディベロッパーをしています、平木(id:Layzie)です。 先日2/9に行なわれたFrontrend Vol.4で"JavaScript Development Tools – JavaScript開発の効率アップ"というテーマで登壇させていただいたのですが、セッションでは時間の都合でお話できなかった補足や、その他のツールのご紹介をしていきたいと思います。公式サイトで各講演のスライドと動画を見ることができますので、残念ながらイベントにいらっしゃらなかった方は、ぜひご覽になってください。 Chrome Canaryビル
次世代JavaScript、ECMAScript6の話を聞いてきたからサンプルコードとかメモしときます。 | Ginpen.com
これ行って来ました。 Web先端技術味見部#15 （今回は「ECMAScript6をそろそろ触る」！） : ATND 楽しかった！ JavaScript (JS)とECMAScript (ES)の違いとか、そういうのはググってください。 Firefox Auroraが現状ES6最先端ぽい。次点Chromeは chrome://flags から「JavaScript の試験運用機能を有効にする」を有効にして再起動でES6の機能が使えたりするらしい。 Firefoxで メニューのツール＞Web開発＞スクラッチパッド でスクラッチパッド。なんかコンソールより便利なやつ。 配列内包表記も使えるように。でも見づらいので三項演算子（?:演算子）みたいな扱いになりそうに思った。 サンプルコードいろいろ let ブロックスコープになる。varと有効範囲が異なる。
WEB+DB PRESS Vol.72のJavaScript連載でChrome Developer Toolsの解説を書きました - はてブロ@ama_ch
連載「JavaScript活用最前線」第5回目でChrome Developer Toolsの解説を書きました。 WEB+DB PRESS Vol.72 作者: 近藤宇智朗,生井智司,久保達彦,道井俊介,飯田祐基,中村知成,規世やよい,後藤秀宣,天野祐介,奥野幹也,Dr.Kein,tokuhirom,森田創,中島聡,堤智代,A-Listers,はまちや2,竹原,川添貴生,WEB+DB PRESS編集部出版社/メーカー: 技術評論社発売日: 2012/12/22メディア: 大型本 クリック: 3回この商品を含むブログ (1件) を見る console.log()や簡単なJSのデバッグ、レイアウト調整くらいはやったことがあるけど、それ以上の使い方はよく分からないという方のために、次の一歩を進んでもらいたいと思って書きました。実践的なJSのデバッグ方法を中心に解説し、Timelineパネルを使っ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptフレームワークで作成されたランサムウェア登場、SaaS型で身代金額や感染時のコメントなど攻撃者がカスタム可能 
加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜