ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome は Chrome 59 でリリースされます。Chrome ブラウザをヘッドレス環境で実行する方法です。基本的には Chrome を使わずに Chrome を実行しますこれにより、Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォーム機能がすべてコマンドラインに組み込まれます。 なぜこれが有用なのでしょうか ヘッドレス ブラウザは、UI シェルを表示する必要のない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、そのウェブページを PDF 化したりできます。また、ブラウザが URL をどのようにレンダリングするかを検査することもできます。 Headless（CLI）の起動 ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くこと
Web App ManifestでWebアプリをインストール可能に - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを冬休みに作った際に、Web App Manifestを登録することで、このWebアプリを簡単にインストール(ホーム画面に追加)できるようにした。このWebアプリはService Workerを使ってオフラインでも動くようにしているので、ホーム画面から起動し、ネイティブアプリと同等の体験を提供できる。もちろん、Manifestを使っていない通常のページでも、メニュー画面から「ホーム画面に追加」を選ぶことで同様のことはできるが、下の動画のように、下から出てくるAppインストールバナーのボタンを一回タップするだけ登録できるのは利便性が高い。 Appインストールバナーの出し方 Google Developersのこの記事によるとAppインストールバナーを出すには下記の条件を満たす必要がある。 Web App
Making Fullscreen Experiences
We have the ability to easily make immersive fullscreen websites and applications, but like anything on the web there are a couple of ways to do it. This is especially important now that more browsers are supporting an "installed web app" experience which launch fullscreen. Getting your app or site fullscreen #There are several ways that a user or developer can get a web app fullscreen. Request th
任意のスニペットを実行するChrome Extensionを作りました - Qiita
run-snippets 任意のスニペットを実行するChrome Extensionです。 v0.3.0からContent Scriptsによる自動実行も対応しています。 ただし、実行するスニペットは自身の手で書き、ビルド、パッケージを読み込む必要があります。 即座に使える拡張機能ではなく、スニペットをまとめるのに役立つboilerplateという感じです。 Firefoxでも同様に使用可能です。 デモ run-snippets 作ったきっかけ ブックマークレットを作成&修正するのはだるい Chromeのスニペット機能を使おうにもjQueryとかを呼べるようにするのはだるい 簡単にnpm packagesを利用したい 利点 npm packagesが利用できる スニペットをコード管理できる スニペットを実行可能なドメインを指定できる(github.com以外では実行不可など) チームでスニ
AndroidおよびiOSでWebApp化するためのメタタグ・リンクなど - Qiita
<!-- WebAppモード --> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- アイコン --> <link rel="shortcut icon" sizes="196x196" href="icon-196x196.png"> <link rel="apple-touch-icon" href="apple-touch-icon.png" /> //フルスクリーン navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)
「ホーム画面に追加」からはじめる『PWA(Service Worker)』 - Qiita
Android ChromeでService Workerが使えるようになり、徐々に盛り上がりを見せそろそろ使ってみても良いんじゃ・・・という匂いも感じ始めています。 ブラウザプッシュでの通知やキャッシュなどの機能にService Workerの注目が集まりがちですが、これらの実装はかなり複雑でやっかいです。 その中でも一番実装が簡単なService Worker(?)がホーム画面に追加の機能です。 この機能はService WorkerのJSは１文字書く必要がないので、Service Workerの実装を始める前にやっておくのも良いと思います。 実際に実装してみると、下からにゅるっと出てきます 条件 HTTPS接続（または localhost） Android Chrome 42以上 が必要です。SSLは https://letsencrypt.org/ で無料で入れられるので入れましょ
Chromeのアプリケーションのショートカットを作成が消えた？デスクトップにショートカットを作成する方法 - ジブンライフ
「アプリケーションのショートカットを作成」が消えた？ Google Chromeのウェブページをアプリ化してショートカットを作成する機能は、バージョン44.0あたりから従来の方法では使えなくなってしまっています。 今まではメニューの「その他のツール」から「アプリケーションのショートカットを作成」を選べば、簡単にアプリ化されたウェブページのショートカットが作成できていました。 しかし、知らないうちにそれができなくなってしまっていたんです。 おそらく気づかないうちに行われているアップデートによって、仕様が変わったものと思われます。 今回はウェブページをアプリケーション化する新しい方法を見つけたので、それをご紹介します。 ※バージョン 59.0移行の場合の設定方法も追記しました。 「アプリケーションのショートカットを作成」が消えた？ 【追記】バージョン 59.0前後の場合 バージョン 44.0前
GitHub が少しだけ使いやすくなる Chrome 拡張を作ってみた - Qiita
こんにちは。Sansan Android エンジニアの @rockwillj です。前回は Android アプリ向けにライセンス文書自動生成プラグインをフォークした 話でしたが、今回は Android は全く関係なくて GitHub を少しだけ使いやすくする Chrome 拡張を作ってみた話になります。 はじめに 非常に多くのエンジニアが仕事でもプライベートでも GitHub を使っていると思います。ですが長時間 GitHub を使っていると時々イラッとすることがありますよね。例えば幅固定レイアウトとか差分に空白が含まれてるとか8タブとかです そんな「イラッとする GitHub あるある」の解消に役立つのが GitHub Cheat Sheet (日本語訳) だったり Chrome ウェブストアで公開されている Chrome 拡張だったりするのですが、いちいち個別に対応していくのは結構面
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)提供している機能 行番号を表示 記事の更新時間を表示 コピーアイコンを表示 自動いいね/自動ストック ヘッダー固定機能 新規投稿時のテ
超最低限の Chrome エクステンションを開発しウェブストアで公開するまでの手順 - Qiita
つい最近、初めて作った Google Chrome エクステンション「Feedly をはてブ対応させる Chrome エクステンション」をブログで紹介したので、その時の技術的なメモなどを Qiita に残しておきたいと思います。まあ検索すればすぐに集まる程度の情報ではあるものの、一箇所にまとまってなかったので、自分用の備忘録でもあります。 全てのソースコードは github 上で公開しているので、気になる方は参考にしてみて下さい。実際に書いたスクリプトの簡単な解説もこの記事の最後に付録として付けています、 超最低限な Chrome エクステンションの作成 Chrome エクステンションは基本的に、一つのフォルダに保存された複数のファイルからなります。エクステンションのルートに必要な最初のファイルは、manifest.json というファイルで、これがエクステンションの基本的な情報を含んでい
ECMAScript 6 compatibility table
V8 SpiderMonkey JavaScriptCore Chakra Carakan KJS Other ⬤ Minor difference (1 point) ⬤ Small feature (2 points) ⬤ Medium feature (4 points) ⬤ Large feature (8 points) Compilers/polyfills Desktop browsers Servers/runtimes Mobile Feature name Current browser ES6 Trans- piler Traceur Babel 6 + core-js 2 Babel 7 + core-js 2 Babel 7 + core-js 3 Closure 2020.06 Closure 2020.09 Closure 2021.08 Closure 20
Chrome拡張開発: 拡張からページにJavaScriptを送り込みたい - Qiita
ゴール Google Chrome拡張から、閲覧中のページにJavaScriptを送り込んで、そのページのWindowオブジェクトにオブジェクトを追加する拡張を作る。なお、今回の成果物はGitHubで見ることができる。 1. 拡張を作る ファイル構成は、マニフェスト、アイコン画像、2つのJavaScriptからなる。 ├── content-script.js ├── embeded-script.js ├── icons │ ├── icon128.png │ ├── icon16.png │ ├── icon19.png │ └── icon48.png └── manifest.json content-script.js ページを開いた時に実行するスクリプト。このスクリプトはChrome拡張の閉じた環境で実行されるので、ページの Windowオブジェクトにオブジェク
Webpack2 と 最小限の babel transform で Chrome で動くJSを - Qiita
先に言っておくと、IE11は死ぬ。 何がしたいか 前提として、現代では ES Modules を除けばほとんどのモダンブラウザ(IE11を除く)でES2015は実装が終わりつつあり、IE11のような特定の環境を除けばほんのすこしの変換でES201xのコードが動く。うまくやれば、コンパイル時間もbabelの起動時間も短縮できる。何度も言うがIE11は死ぬ。 それと、先週リリースされたChrome55でasync/awaitがデフォルトで有効になった。これで何ができるかというと、babel で async/await をコンパイルすると、CPS変換で巨大なスイッチ文に変換してとにかくコードが読みづらいという問題があって、それをネイティブの機能を使うことで解決できる。(ソースマップもよくわからんところに吹っ飛んで使えなかった) このアプローチを試みた際の問題 browserify/webpack
Electron アプリをつくる時に便利なパッケージ - はやくプログラムになりたい
この記事は Electron アドベントカレンダー2016 の13日目の記事です． 本記事では，僕が Electron アプリをつくる上で便利だったり，ほしかったのでつくったりしたパッケージを7つほど紹介します． electron-about-window electron-dl electron-in-page-search electron-window-state menubar node-auto-launch electron-mocha electron-about-window electron-about-window は 'このアプリについて' ウィンドウを簡単にクロスプラットフォームにつくるためのパッケージです．下記のように関数を1つインポートして呼び出すだけで「このアプリについて」ウィンドウを生成することができます．（example） import openAbout
Optionally inject Content Script
You cannot run code on a site without the appropriate permissions. Fortunately, you can add the host permissions to optional_permissions in the manifest file to declare them optional and still allow the extension to use them. In response to a user gesture, you can use chrome.permission.request to request additional permissions. This API can only be used in extension pages (background page, popup p
終わってしまうChromeアプリ
既に2ヶ月前の2016年9月8日、Google Developers Japan Blogに、僕にとって非常に興味深いブログが掲載されました。 Chrome アプリからウェブアプリへ 簡単にまとめると、「Chromeアプリは（ChromeOSを除いて）終了します」という内容でした。薄々感じ取ってはいたものの、改めて正式に言われてしまうと、とてもショックです。まあ、でも、確かに仕方のないことなんですけど、特に日本においてはChromebookを目にする機会はほとんどありませんし、そのためChromeアプリ開発者の数も非常に少なかったと思います。OpenSocialといい、Chromeアプリといい、そろそろ僕も「お前が注目した技術は数年後になくなる」とか声が聞こえてきそうですが、2年近く、かなり本気を出して取り組んできたChromeアプリの世界だけに、立ち直れるまでかなりの時間がかかったという
Chrome拡張では、Background pages よりも Event pages を使用したほうが良い - よんちゅBlog
これからChrome拡張を作る方には是非知っておいて欲しい機能、Event pages についての話です。 Event pages は、作成したChrome拡張によっては、必ずしも使用できるわけではありませんが、もし可能なら積極的に使用してほしいと思います。 公式ドキュメントでも、Background pages のページ冒頭には、以下の様な注意書きがなされています。 Caution: Consider using event pages instead. Learn more. via: Background Pages - Google Chrome なぜ Event pages なのか 理由を詳しく説明すると、 Background pages を使用している拡張は、Chrome起動時にプロセスが起動され、以降Chromeが終了するまで生き続けます。 よって、例え Backgroun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://developers.google.com/web/tools/setup/workspace/setup-devtools
GitHub - zalmoxisus/browser-redux-sync: Keep redux states in sync for browser extensions and apps.
GitHub - zalmoxisus/crossbuilder: Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.
