Reactを用いてブラウザ拡張機能を作成する際に、サクッと作り始められる目的でテンプレートを作ったので紹介します。 基本の構成としては、React + TypeScript + esbuildを使ったものとなっており、@htlsneさんのテンプレートをベースに、開発を始める際に個人的にそろっていてほしい環境を追加で導入したものになります。 zenn.dev ※ベースの段階でbuild周りの実装など綺麗にまとまっており素晴らしいテンプレートとなっていますので、環境周りは自分でやるから最低限でいいよという方にはベースのこちらをお勧めします。 成果物 github.com 想定する利用場面 Reactで環境構築を考えずにブラウザ拡張機能を作り始めたい時にお使いいただけます。 それ以外の場合は... Vueで作りたい時はvitesse-webextが便利そう モジュールバンドラー 冒頭でも説明しま
NotHub -Notification Client for GitHub- What is NotHub? NotHub is a Chrome Extension for GitHub notification. NotHub provides you to notify events that you are just interested. Furthermore, you can take notifications in realtime. You can have a list different from GitHub. NotHub helps you to enjoy social coding more comfortably! Installation Install from here How to use 1) Create your following li
4/22から4/23にかけての24時間、クックパッド主催の「第2回 開発コンテスト24」というのに参加しました。 エンジニア向け「第2回 開発コンテスト24」開催 | クックパッド株式会社 がいよう 「半径3メートル以内の世界でもっと もっとひっついてたいのさ」というコンセプトで、ブラウザのタブをみんなでリアルタイムに共有するというサービス、"1/2 Real-time Tab Sync" を作りました。 1/2 - Real-time Tab Sync 作ったサービスの解説もあるけどそれより何より、つくっていた24時間がとても楽しい時間だったので、わたしが「第2回 開発コンテスト24」をどのように過ごしたかをメインに紹介します。 一緒に作ってた @darashi さんと @june29 さんもまた別の視点から同じ24時間を記録してくれていて、神の視点的に眺めると面白いかもしれません。最後
Chat Everywhere! Everywhere! enables you to chat on any webpage! Howto Install the Chrome Extension. Click the extension icon and Allow Everywhere! to access your Twitter account. Go to any webpage. Click the number icon at bottom right corner on the page. Send a message. The message will be send to the people on the same page and tweeted automatically with a short URL. About Everywhere! is devel
node.js で Web Socket の実験をしていて、いちいちテスト用の HTML を作るのが面倒なので作ってみました。 Chrome Extension は初めて書いたので、「こんなソースで大丈夫か？」なのですが、とりあえず自分の目的である Web Socket の開発テストには使えているので良しとしています。 Chrome Web Store - Simple WebSocket Client ソースはこちら hakobera/Simple-WebSocket-Client · GitHub なお、お気づきの方もいるかも知れませんが、名前もデザインも Simple-Rest-Client のパクリ にインスパイアされています。 おまけ node.js で以下のようなコードを書くと、Simple-WebSocket-Client を利用してチャットができます。 var sys =
ウェブサイトの制作に役立つGoogle Chrome用の機能拡張をCSS Reflexから紹介します。 15 Must Have Google Chrome Extensions for Web Development [ad#ad-2] Pendule HTML, CSS, WAIなどの検証をはじめ、CSSの無効化、リンクチェック、カラーピッカー、ルーラーなど。 Chrome Sniffer そのサイトで使用しているCMSとJavaScriptのライブラリを表示。 Chrome Web Developer Tools FirefoxのWeb Developer toolbar（日本語版）のクローンを目指して開発。 IE Tab ChromeでIEのレンダリングで表示。 Window Resizer ウインドウのサイズをワンクリックで任意の値に変更。 Chrome SEO 各種検索エンジン
Should Install these extensions! google chromeエクステンションの記事は、いくつか書いていますが、本日はウェブデベロッパーがインストールすべきchromeエクステンションを紹介したいと思います。 Speed Tracer Webページ表示測定ツール（参考:Google、Webアプリの性能分析ツール「Speed Tracer」を公開 – ITmedia エンタープライズ） Eye Dropper 画面上の色のカラーコードを調べる（詳細:Chrome エクステンション ナビ : Eye Dropper） Firebug Lite 言わずと知れた人気No1エクステンション HTML&CSS修正（使いかた:MOONGIFT: » Google ChromeでもFirebug「Firebug Lite for Google Chrome」:オープンソ
この間のHTML5とか勉強会で、先行して発表しましたが、先日DaVinciPadというWebサービスをリリースしました。 3月に起業したということもあって、初の自社製品と言うことになります！（感涙） 自分では、ちょっぴりユニークで、結構便利なサービスじゃないかと思っています。 次のような人たちにオススメです。 TwitterやFacebookと言った複数のWebサービスを使い分けている人 さくっとメモをとるための良いWebサービスがないなー、と感じている人 テキストベースの作業に慣れ親しんでいる開発者 DaVinciPadは、プライベートなメモ機能と、TwitterやFacebookへのマルチポスト機能を統合した、シンプルなWebサービスです。 現在のところGoogle Chrome Extensionによるクライアントのみが公開されています。 拡張機能をインストールしてさえあれば、気が向
Chromeのスタートページは、サムネイルウィンドーや履歴表示など他のブラウザーに比べて多彩で使いやすい。とはいえ、こだわり派のユーザーなら、さらに使いやすいスタートページにカスタマイズしたいもの。そんなあなたにオススメなのがこの『Incredible StartPage』だ。 デフォルトでのCoolなデザインに加えて、独自のメモ専用スペースとウィンドーの背景画像を変更できるFlicker API連動機能が追加されている。他にもフォントや色などを変更可能だ。ガンガンカスタマイズして自分好みのスタートページを作り上げよう。 ■インストール Google Chromeのエクステンション配布サイトにアクセス。サイト上で“Incredible StartPage”を検索して、ダウンロードページに進もう。
Google Chrome：「Chrome Notepad」は、Chromeのビルトインブックマーク同期機能を使って、複数のパソコン上でのノートや最後に作業した状態の文書を同期してくれる便利アドオン。 ノート同期アドオンでも、最後のカーソルポジションまで記録してくれるアドオンは多くありませんが、「Chrome Notepad」は、そんな情報まで同期可能です。ノートパッドの大きさも調整可能。同期を有効にするには、ブックマーク同期をオンにし、新規作成されるBSyncというブックマークフォルダを削除しないで下さい。同期は約5分ごとに行われます。 「Chrome Notepad」はGoogle Chrome環境で使用可能な、フリーダウンロード。 Chrome Notepad [Google Chrome Extensions via Addictive Tips] Erica Ho (原文／まいる
Safari拡張をいくつか作って大体感覚は掴めたので、ざっくりと拡張の作成手順を解説してみます。 なお、Windows版で作業していますが、Macでもほとんど同じだと思います。 Safari拡張とは 最初に、Safari拡張とはなにか、について。Safari拡張はHTML/CSS/JavaScriptをベースに、ブラウザ側が用意したAPIを使ってブラウザを便利にするモジュールです。通常、JavaScriptだけではクロスドメインの問題など、実現できることに制限がありますが、その点を拡張用に用意されたAPIで補います。そのため、APIが用意されていない部分については対応できないという制限があります。しかし、開発のし易さ、ウェブとの親和性の高さからアイディア次第で便利で強力なツールとなるのがSafari拡張・Chrome拡張です。 なお、現状のAPIは暫定的なもので、ここで紹介するのもあくまで
Chrome拡張をとりあえず3つだけSafari拡張に移植というか、どちらでも動くようにしてみました。以下からインストールできると思いますが、今のところ拡張は頻繁にクラッシュしますし、正式リリースされてないということは色々と問題が残っているということですから、そのあたりをご理解の上、ご利用は自己責任でお願いします。 http://ss-o.net/safari/extension/AutoPatchWork.safariextz AutoPatchWorkのSafari拡張版。いわゆるAutoPagerizeクローン。アイコンの色がおかしい？アイコンの色は制限されているみたいです。ちょうどいい機会なのでアイコンを廃止してページの下にラインを出すようにしました。 http://ss-o.net/safari/extension/SocialCounter.safariextz SocialC
出ましたね！ Safari 5！ 何と言っても目玉機能は拡張 (extension) 機能です。Firefox のアドオンみたいなもんですね。Safari → Chrome に浮気をしていた理由がこの拡張機能だったので、元サヤに収まれそうです。 早速、習作としてニコニコ動画のプレイヤーをコントールするツールバーを作ってみました！ Play を押すと再生、Pause を押すと一時停止… のようになります。 ダウンロード: nicontroller.safariextz ソースコード: http://github.com/kotas/nicontroller 使い方 まずは Safari 5 をダウンロード＆インストールします。 Safari 5 を起動してメニューから環境設定を開きます。（Mac だと Cmd+,） 詳細タブを開いて、「メニューバーに''開発''メニューを表示」にチェックを入
この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。 そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。 色々試した結果残ったExtension そもそも。 「これだけは入れておきたいGoogleChromeExtension50」とか、「はずせないお勧めExtension75」とか、お前らは本当にそれだけ全部入れてやっているのかと問いただしたい。 とりあえず60近く入れると、ボタンが隠れて恐ろしく使いにくくなる上、起動してもすぐクラッシュするようになった。なにより、いちいち起動のたびにわけのわからないローディングが走ったり、カクカクする。 皆さんもひとまず入れすぎには注意しよう。 あと、例えば愛用しているdeliciousのExtensi
Google Calendar for TodayはGoogle Chrome向けのオープンソース・ソフトウェア。スケジュール管理をWebベースで行っている人は多い。特にGoogleカレンダーを使って個人、仕事を問わず予定を管理している人は多いのではないだろうか。 直近の予定が素早く確認できる そんなスケジュール管理は、実のところ1週間後の予定が分かったとしてもあまり意味はない。月表示で今月の予定など分かった所で、どんどんアップデートされてしまうはずだ。必要なのは今日と明日程度、そう割り切れる人はGoogle Calendar for Todayを使ってみよう。 Google Calendar for TodayはGoogle Chrome機能拡張であり、アドレスバーの横に表示されるアイコンからGoogleカレンダーの予定をチェックできる。Google Appsには対応していないようで、G
13 Useful Google Chrome Extensions for Web Developers | Tools WEB開発者が便利に使えるGoogle Chromeエクステンションがまとまったエントリのご紹介です。 最近盛り上がりを感じるChrome のエクステンションですが、かなり便利なものが多くなってきているようですね。 FireBug Lite FireBugのChrome版 Speed Tracker ページの読み出しの速度をグラフ化 Resolution Test ブラウザの解像度を変える Aviary Screen Capture ページのスクリーンキャプチャを取得 IE Tab Chrome内で動作するIEエンジン Color Picker カラーピッカー すべて見る という感じで必要そうなものはどんどんできていってる感じです。Firefoxにあって、Chrome
こんにちは、太田です。今回はGoogle Chrome拡張のローカライズ対応とギャラリーでの公開手順について、拡張の作り方を総まとめしつつお送りします。 今回ローカライズする拡張はこれまで連載の中で何度か取りあえげてきたSBMカウンタをベースとして使用します。SBMという略称は（そもそもソーシャルブックマークと言う呼び方も？）日本語圏以外ではあまりポピュラーではないので、Social Counterと言う名称を用います。というのも、英語圏でのはてなブックマークに相当するサービスとしてdeliciousやdiggなどがありますが、ブックマーク中心のdeliciousと、ソーシャル中心のdiggと違いがはっきりしており、はてなブックマークはその間に位置しています。というわけで、ソーシャルカウンターとややくくりを大きくしました。 i18nとl10n i18nはInternationalizati
シンプルで軽い操作が魅力のブラウザ、「Google Chrome」。登場以来順調にシェアを伸ばし続けていますが、中でも注目なのが昨年12月にベータ版が公開されてから、既に2000種類以上登場している「拡張機能」ですよね。今回は「たくさんありすぎて何から入れていいか分からない！」という人のために、はてなブックマークでも人気の「Google Chromeの拡張機能」についてのエントリーをご紹介します。 ■仕事の効率アップにも使える！オススメ拡張機能いろいろ まずは最初に入れたいものから仕事や趣味に役立つものまで、オススメの拡張機能をまとめたエントリーです。 ＜最初に入れておくと便利な拡張機能は？＞ ▽Google Chrome に最初に入れた６つのエクステンション – ライフハック心理学 「とりあえず、最初に入れておくと便利なものを知りたい！」という人には、筆者が最初に入れた拡張機能についてま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
