DevTools Extensions For Web App Developers
March 26, 2013 The past year has seen many leaps made to improve developer productivity through better tooling. We're paying increasing attention to our workflow and many of us have spent time optimising our usage of tools like Grunt, Bower, Yeoman and the terminal. Another important area worth spending time on is your debugging workflow - if you're like me, this starts with the Chrome DevTools. W
僕が考えたChrome拡張機能を作るときのデザインパターン
最近いくつかのChrome拡張機能を作っていて、すでに数千人のユーザを獲得できているものが出てきてたりします。 Image collector extension goo.gl URL Shortener extension mixi Check button extension Semantic inspector これだけ作ってると、何となく自分でのChrome拡張機能を作り出す際のデザインパターン・・・っていう大それたものじゃないけど、ようはテンプレが確立されてきます。全く褒められない書き方をしているかもしれませんが、ここでそのテンプレ達を晒しておこうかな、と思います。 manifest.json まずはChrome拡張機能の要であるマニフェストファイルです。これは誰が書いてもさほど変わらない記述内容となるでしょう。 { "manifest_version": 2, "name":
Google Chromeエクステンションのセキュリティ確保
Nov 15, 2011 さて、ずいぶんと日が経ちましたがVichromeにセキュリティの脆弱性があるとのご報告を頂きました。 http://twitter.com/#!/teramako/status/127357023242289154 つまり、コンテンツに要素を追加すると、コンテンツ側のスクリプトがその要素に対してアクセスできてしまうわけです。 Chrome Extensionとセキュリティというのは、以前から議論されている話ではありますが、エクステンションの開発者を含めて一般的に浸透されているとは言い難い状況なので簡単にまとめておきます。 まずはChrome Extensionはどのような仕組みなのかから始めましょう。 Chrome Extensionってどうやってできてるの？ 一般的なChrome Extensionは主に3つのコンポーネントから構成されていて、それはConten
Chromeの隠し機能にアクセスできる「Service Pages for Google Chrome」が便利！開発者向けの特殊URL早見表付き - Chrome Life
Chromeでは、アプリケーションやエクステンションを開発する人のために、ブラウザのメモリ状況やキャッシュ・ネットワーク通信状態などの内部情報を確認できる仕組みを提供しています。 ブラウザの内部情報は、chrome://xxx のような特殊なURLでアクセスすると確認ができます。 例えば、ブラウザで下記のアドレスを入力します chrome://net-internals/ ネットワークに関する様々な情報が確認できるページが開きます。 他にもこのような特殊URLはたくさんあるのですが、開発者向けの隠し機能なのでアドレスを直接入力しなければいけなく面倒です。 しかし、最新のChromeでは特殊URLの一覧ページがちゃんと用意されていました。 chrome://chrome-urls/ をアドレスバーに入力すると、特殊URLの一覧が表示されるので、そこからアクセスできるようになります。 どのUR
一つのコードから各Webブラウザに対応した機能拡張（アドオン）を生成·Kango MOONGIFT
Kangoは多数のWebブラウザに対応したWebブラウザ機能拡張（アドオン）フレームワーク。 KangoはPython製、Google Chrome/Safari/IE/Firefox/Opera用のフリーウェア（ライセンスは独自）。スマートフォンの世界が広がるにつれて、iOSではObjective-C、AndroidではJavaと言語を選択するのに苦痛を覚えるようになった。そのためTitaniumのような統一言語のフレームワークに注目が集まる。 サンプルをGoogle Chromeで実行 同様のことがWebブラウザでも起こっている。IEのシェアは低下しつつもまだまだ高く、さらにFirefox、Google Chrome、Safari、OperaといったWebブラウザが存在する。これら全てに機能拡張を提供するのはとても大変なことだ。そこで注目したいのがKangoだ。 Kangoは一つのコー
はじめてのGoogle Chrome Extension
はじめてのGoogle Chrome Extension Google Chrome Extensionを作成したので、Google Chrome Extensionの作成方法について解説したいと思います。 今回作成したのは、ページがRSSを配信している場合はアドレスバーの右側にRSSアイコンを表示して、アイコンをクリックするとFastladderの登録ページに移動するというもの。ちょっとしたカスタマイズでお使いのRSSリーダー用に改造できる思います。 非常にざっくりとした解説ですが、一連のフローはわかると思います。また、Chromeの各種APIはChrome Extensions API リファレンスを参考にしてください。 最初の準備 まずは、Google Chrome のメニューにあるレンチアイコン→Tools→拡張機能 から拡張機能管理を開きます。 拡張機能管理の右上にある『デベロッ
Safari Extension 三分クッキング！ - こたにき
Safari Extension 作りたい！ という方にお届けする、三分クッキング！ HTML5 + JavaScript を使って簡単な機能拡張（extension）を作ってみます。 本日のメニュー ツールバーで動く時計 完成予定図: 最大の難関 Safari Extension を作るにあたって、最大の難関は Apple ID の登録と、Safari Developer Program への登録です。 三分クッキングとしては、「既に登録されたアカウントがこちらになります」と別のお鍋を取り出す場面です。 軽く要所要所だけ説明しますので、フィーリングとリーディングとやる気で乗り切ってください。 Safari Developer Program のページを開いて「Join now」を押します。 次のページでは登録状況によってチェック先が変わります。 Apple ID を持っていない人：左上の
Safari拡張の自動更新方法 - os0x.blog
次のようなXMLを拡張子.plistで適当な名前で保存して、サーバーにアップします。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>Extension Updates</key> <array> <dict> <key>CFBundleIdentifier</key> <string>net.os0x.autopatchwork</string> <key>Developer Identifier</key> <string>LAM47A73AC</string> <key>CFBundl
Zudolab -
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
Chrome HTML検証エクステンション登場 | エンタープライズ | マイコミジャーナル
Robert’s talk Robert Nyman氏がHTML Validator - Robert's talkにおいてChrome向けのHTMLバリデータエクステンションを公開した。同氏はこれまでにいくつもFirefox向けのエクステンションを開発している。HTML Validatorは簡単に扱うことができて便利。紹介されている内容をまとめると次のとおり。 HTML Validatorの特徴 自動または手動でHTMLの検証を実施可能。W3C Validatorを使い、インラインで処理することもW3C Validatorへ処理を飛ばすこともできる。 HTML Validatorのアイコンはアドレスバーの右側に表示される。ページにエラーがなければ緑色で0と表示され、エラーがあれば赤色でエラー数が表示される。エラー一覧はページ下にダイアログがポップアップする。 HTML Validator
Chrome Extensions の開発環境、Tipsについて書いてみる - 自堕落な投資ずきSEの日記
このエントリの目的 Chrome Extensionsの概要は知っている人向けに開発効率を上げるためにTipsを紹介します。Chrome ExtensionsのHello world レベルは作ったことがある人向けです。下記は、自分が作る際に参考にしている記事になります。作られたことのない方、これからちょっと作ってみようと思っているかたは、下記の記事を読まれてからがいいかなと思います。 Chrome拡張のお勧め記事 開発環境について Eclipse(Javaの開発ツール)にAptana JS エディターを入れて使っています。下記のサイトよりダウンロード可能です。 http://mergedoc.sourceforge.jp/ Eclipseは、デフォルトの設定だと英語なのですが、便利なツールをセットにし、かつ、日本語化して配布しているプレアデスが導入が簡易でしょう。 ここでは、Aptana
Latest topics > Google Chrome Extensions - outsider reflex
Latest topics > Google Chrome Extensions 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « カード配り問題 Main 画面の描画内容を一時的にロックしておいて、裏であれこれして最後にまとめて描画させる方法 » Google Chrome Extensions - Dec 16, 2009 GoogleChromeの拡張を作る上でFirefoxアドオン作者が知っておくべきやればできること « kuでFirefoxアドオンの自由度は奇跡的です。millennium | Google Chrome Extensionsを読んでその奇跡を噛み締めましょう。と紹介されていたエントリを勝手に翻訳してみました。原文の著者は
FirefinderはJavaScriptプログラマ以外も使うべき - monjudoh’s diary
Firefinderとは何か？ https://addons.mozilla.org/en-US/firefox/addon/11905/ CSSセレクタやXPathで要素を検索出来るFirebugの拡張です。 どんな人にお勧めか？ hiddenフィールドの値を閲覧したり、 formのどの要素のnameが何かとかさくっと見たくなることないですか？ あるならお勧めです。 Firebugには既に$$というCSSセレクタで要素を検索出来る関数があるんだが？ CSSセレクタのサポートの度合いが違います。 $$関数では基本的なCSSセレクタしかサポートされていないので、 例えば、ここなら、http://images.google.co.jp/advanced_image_search?hl=ja $$('input'); // [input, input ja, input Google 検索, i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Engineering insights Articles, Page 1 | Zapier Blog
Google Code Archive - Long-term storage for Google Code Project Hosting.
https://developers.google.com/web/tools/setup/workspace/setup-devtools
Extensions | Chrome for Developers