Chrome拡張の開発方法まとめ その1：概念編 - Qiita
Chrome拡張の開発に必要な知識とかの覚書です。 この記事では開発の前に知っておくべきChrome拡張の全容について解説していきます。 「実際に開発しながら学ぶ」形式の解説記事は多く見られるのですが、概念についてちゃんとまとめてある記事は見当たらず、そこらへんの理解で結構苦労した覚えがあるので、そういった人達の手助けになればと思います。 対象 Chrome拡張が作りたい人 Javascriptがまあまあわかる人 Chrome拡張の各概念がいまいちわかってない人 概要 まずはChrome拡張の大まかな構造について説明します。 Chrome拡張はHTMLとCSSとJavascriptで作られています。 必要なhtml,css,jsファイルなどと後述のManifest Fileを一つのフォルダにまとめたものが一つの拡張機能のまとまりとなり、zipで圧縮してアップロードすることでストアで公開する
Chrome拡張機能におけるエコ対策（Event pageへの移行方法）
いくつかChrome拡張機能を作ってChromeウェブストアに公開しているのですが、それを最初に公開したときはmanifest.jsonファイルのバージョンがまだ最初の頃でした。現在ではバージョン2が主流であり、そろそろ古いバージョンの拡張機能は撲滅される予定になっています。そのため、開発者はそろそろ急いで新しいバージョンに変更すべく、せっせと移行作業を進めなければなりません。これは何もGoogleの開発者いじめではなく、ちゃんとした理由があります。その理由は、どれも開発者およびユーザへのメリットがあるものばかりです。 このバージョンアップの中で、ユーザにとって大きなメリットとなるものがあります。それは「Event pageへの移行」です。Chromeはメモリを非常に大きく消費することで有名ですが、拡張機能がメモリを大きく使ってしまうことも問題視されていました。拡張機能は「常駐して機能する
コードDJ第9回 – Chrome Extensionに挑戦 - Fjord, Inc(株式会社フィヨルド)
毎週火曜日、Help me, hackers!に上がったコードを紹介していくコードDJ 第9回。 「あなだのコードがー しぬほどスキダカダー！」（＠チャン・ドンゴン） komagata a.k.a. DJです。 今回紹介するのはコレ。 Ham Cutlet Chrome Extension – Help me, hackers! HTMLのインデントを綺麗にする誰得サービスHam CutletのGoogle Chrome Extension。ブラウザの「このページのソースを見る」の代わりにインデントを綺麗にしたソースを表示するボタンをOmniBoxの右に追加するExtensionだ。 mongorian_chop a.k.a. 自由人が作ってくれた。ボタンのアイコンはmachida a.k.a. 漫★画太郎。軽いコラボ。 コードはココ。 mongorian-chop’s hamcutlet
Chrome拡張でContent ScriptとBackground Pageのメッセージのやり取りをする
を、ようやく実装できました。 Amazon to Rakuten Chrome拡張「Amazon to Rakuten」は当初下記の流れで作っていました。 1. chrome.tabs.getSelectedで今開いてるamazonのページのURLを取得 2. XMLHttpRequestで取得したURLのHTMLを取ってきて、本のタイトルを正規表現で取得 3. 楽天ブックス総合検索APIに取得したタイトルを投げる 4. 検索結果をPopupに表示。表示されたやつをクリックすると無事楽天ブックスの商品詳細ページにジャンプ 1. Content ScriptでDOM解析し、今開いているamazonの詳細ページから商品タイトルを取得 2. 取得したタイトルをMessageでbackground.htmlに送信 3. background.html上で楽天ブックス総合検索APIに、Content
僕が考えたChrome拡張機能を作るときのデザインパターン
最近いくつかのChrome拡張機能を作っていて、すでに数千人のユーザを獲得できているものが出てきてたりします。 Image collector extension goo.gl URL Shortener extension mixi Check button extension Semantic inspector これだけ作ってると、何となく自分でのChrome拡張機能を作り出す際のデザインパターン・・・っていう大それたものじゃないけど、ようはテンプレが確立されてきます。全く褒められない書き方をしているかもしれませんが、ここでそのテンプレ達を晒しておこうかな、と思います。 manifest.json まずはChrome拡張機能の要であるマニフェストファイルです。これは誰が書いてもさほど変わらない記述内容となるでしょう。 { "manifest_version": 2, "name":
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Quick Tabs
Chrome commands API