Project Tab Manager is an extension for Google Chrome that helps you focus on a single project. Project Tab Manager is an extension for Google Chrome that helps you focus on a single project. It preserves each windows as projects, not only you can restore them anytime, you can synchronize projects across different devices using same Chrome profile. * In order to preserve window status for later us
Next.jsを使用してGoogle Chromeの拡張機能を作るとレイアウトとルーティングができるので結構楽に拡張の開発ができる。ReactNext.jsアドベントカレンダー2019 はじめに @yushimatenjinです。Next.jsアドベントカレンダー4日目ですね。 Next.jsを使うと簡単にGoogle Chromeの拡張機能が作れるんじゃないかなと思ったら簡単に作ることが出来たのでその紹介を今回しようかなと思います。 このときに得た知見をもとに書いています。 Google Chrome 78にアップデートされたところ、今まであった、現在開いているタブ以外を閉じる機能がなくなっていて作業がはかどらなかったため、Chrome Extensionsを作ってみました。 アイコンを押すとすべてのタブを閉じるだけです ↓ダウンロードhttps://t.co/oBt2S62m9F pi
あらゆるサイトにダークテーマを。夜間や毎日のブラウジングにDark Readerで目を気遣います。 このアイ・ケアの拡張機能は、オンザフライでウェブサイトのためのダークテーマを作成し、ナイトモードを有効にします。 Dark Readerは鮮やかな色を反転させてコントラストを高め、夜間に読みやすくします。 明るさ、コントラスト、セピアフィルター、ダークモード、フォント設定、無視リストを調整することができます。 寄付でアプリの開発をサポートするようお願いする場合があります。設定ポップアップにDarkReaderに関するニュースが表示される場合があります。経験豊富なユーザー向けの開発ツールがあります。 Dark Readerは広告を表示せず、ユーザーのデータをどこにも送信しません。 また完全にオープンソースです https://github.com/darkreader/darkreader イ
Chrome拡張を長年造ってきたなかで 手法や自作ライブラリが充実してきたのでこの辺で公開します。 Chrome拡張は本当に効果的に改善できて、すばらしい仕組みです。 これで皆さんが簡単に現場改善が進んだら嬉しい限りです。 (なお、これは 2017-08-05 Builderscon Tokyo 2017 でのトーク用に作成した資料です) わりと ウケた 改善 どんなことができるのか、ざっと見てみましょう。 サンプルページ ※各項目ごと、「拡張を有効化」をクリックすることで拡張が入った状態を見ることができます。 Chrome拡張を作るのに必要な 環境 必要な環境はシンプルです。 Google Chrome Text Editor or IDE(UTF-8 が扱えるなら何でもいい) （公開するなら）Zip 圧縮ができるソフトウェア （公開するなら）クレジットカード これだけ。 あとは、ソース
run-snippets 任意のスニペットを実行するChrome Extensionです。 v0.3.0からContent Scriptsによる自動実行も対応しています。 ただし、実行するスニペットは自身の手で書き、ビルド、パッケージを読み込む必要があります。 即座に使える拡張機能ではなく、スニペットをまとめるのに役立つboilerplateという感じです。 Firefoxでも同様に使用可能です。 デモ run-snippets 作ったきっかけ ブックマークレットを作成&修正するのはだるい Chromeのスニペット機能を使おうにもjQueryとかを呼べるようにするのはだるい 簡単にnpm packagesを利用したい 利点 npm packagesが利用できる スニペットをコード管理できる スニペットを実行可能なドメインを指定できる(github.com以外では実行不可など) チームでスニ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは。Sansan Android エンジニアの @rockwillj です。前回は Android アプリ向けにライセンス文書自動生成プラグインをフォークした 話でしたが、今回は Android は全く関係なくて GitHub を少しだけ使いやすくする Chrome 拡張を作ってみた話になります。 はじめに 非常に多くのエンジニアが仕事でもプライベートでも GitHub を使っていると思います。ですが長時間 GitHub を使っていると時々イラッとすることがありますよね。例えば幅固定レイアウトとか差分に空白が含まれてるとか8タブ
筆者が「Qiitaにこういう機能があったらもっと使いやすいのに」 と思っていた機能をChrome拡張機能として実装しました。 ぜひインストールしてみてください。 Q Acceleratorと名付けました。 Qiitaでの活動を加速させるもの、といった感じです。 ※Accelerator（アクセラレーター）は「加速装置」「加速器」などの意味があります。 2017/03/03 時点ユーザー数 910ユーザーの方が使われています。 TL;DR インストールはChrome ウェブストアから https://chrome.google.com/webstore/detail/mheleidccioamimekojienbdfclcbaan/ 現在(2018/4/29)提供している機能 行番号を表示 記事の更新時間を表示 コピーアイコンを表示 自動いいね/自動ストック ヘッダー固定機能 新規投稿時のテ
つい最近、初めて作った Google Chrome エクステンション「Feedly をはてブ対応させる Chrome エクステンション」をブログで紹介したので、その時の技術的なメモなどを Qiita に残しておきたいと思います。まあ検索すればすぐに集まる程度の情報ではあるものの、一箇所にまとまってなかったので、自分用の備忘録でもあります。 全てのソースコードは github 上で公開しているので、気になる方は参考にしてみて下さい。実際に書いたスクリプトの簡単な解説もこの記事の最後に付録として付けています、 超最低限な Chrome エクステンションの作成 Chrome エクステンションは基本的に、一つのフォルダに保存された複数のファイルからなります。エクステンションのルートに必要な最初のファイルは、manifest.json というファイルで、これがエクステンションの基本的な情報を含んでい
ゴール 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オブジェクトにオブジェク
先に言っておくと、IE11は死ぬ。 何がしたいか 前提として、現代では ES Modules を除けばほとんどのモダンブラウザ(IE11を除く)でES2015は実装が終わりつつあり、IE11のような特定の環境を除けばほんのすこしの変換でES201xのコードが動く。うまくやれば、コンパイル時間もbabelの起動時間も短縮できる。何度も言うがIE11は死ぬ。 それと、先週リリースされたChrome55でasync/awaitがデフォルトで有効になった。これで何ができるかというと、babel で async/await をコンパイルすると、CPS変換で巨大なスイッチ文に変換してとにかくコードが読みづらいという問題があって、それをネイティブの機能を使うことで解決できる。(ソースマップもよくわからんところに吹っ飛んで使えなかった) このアプローチを試みた際の問題 browserify/webpack
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拡張を作る方には是非知っておいて欲しい機能、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
Chromeの拡張機能のリソース消費を抑える仕組みであるEvent Pagesを紹介します。 Chromeの拡張機能では、Background Pageというページを裏に常時開いておき、外からのイベントやメッセージに応じて処理を行うという構成が一般的です。すなわち、ブラウザを起動してから終了するまでの間ずっとページを開いたままということになり、拡張機能の数が増えるとプロセス数やメモリ使用量はかなりのものになります。 そこで導入されたのがEvent Pagesです。Event Pagesを利用すると、ページが常駐しなくなるため、リソース消費が削減されます。イベントやメッセージを処理する必要がある時には自動的にEvent Pageが開かれ、処理が終わってしばらくするとまた閉じられます。 導入方法 Event Pagesの仕組みは勝手に適用されるわけではなく、拡張機能側の対応が必要です。 まず、
const {BrowserWindow} = electron; const os = require('os') const path = require('path') const fs = require('fs') function createWindow() { : : // react dev toolのID const id = "fmkadmapgofadopljbjfkapdkoienihi" // extensionの場所、"~/Library"だとダメだった const extensionDir = path.resolve(os.homedir(), "Library/Application Support/Google/Chrome/Default/Extensions/") // version指定 const versions = fs.readdirSy
Zoom images/videos on all your favorite websites (Facebook, Amazon, etc). Simply hover your mouse over the image to enlarge it. Hover your mouse over any image on the supported websites and the extension will automatically enlarge the image to its full size, making sure that it still fits into the browser window. This is an open source version of the original HoverZoom extension which is now overr
This blog site has been archived. Go to react.dev/blog to see the recent posts. A month ago, we posted a beta of the new React developer tools. Today, we’re releasing the first stable version of the new devtools. We’re calling it version 0.14, but it’s a full rewrite so we think of it more like a 2.0 release. It contains a handful of new features, including: Built entirely with React, making it ea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
