トップページ > コンテンツ > プログラミング入門 > Ajax入門 > JavaScript入門 > アドオン作成とか

Firefoxのアドオン作成

アドオンとかGreasemonkeyのjsだとかUserchrome.jsだとか、
はたまたCustom Buttonsを自作するだとか言っても、
Firefox自体の構造が分からなくて断念することはありそうだ。

そこで、Firefoxの構造について知りたいときにどうすれば良いかを記述してみる。
まず、DOM Inspectorなるものを入れてみる。
ソフトでもアドオン(https://addons.mozilla.org/ja/firefox/addon/6622)でも良いだろう。
Firefoxの外観は
chrome://browser/content/browser.xul
に書かれているので、上を入力しInspectボタンを押すと(アドオンの場合)、
IDを知ることができる。

というわけで、試しにFirefoxでお気に入りボタンを作ってみた。
Customsボタンアドオンをインストールし、Editボタンのコードに

toggleSidebar('viewBookmarksSidebar');

と書くだけ。
ツールバーのオンオフも、

var tmp = document.getElementById("ツールバーのID");
tmp.collapsed = !tmp.collapsed;

でOK。楽すぎるｗ

Chromeの拡張機能作成

以下の順で作成することができる。

1.フォルダを準備
2.該当フォルダにmanifest.jsonを準備

{
  "manifest_version":2, //おまじない
  "name":"拡張機能の名前",
  "version":"拡張機能のバージョン(1.0等)",
  "description":"拡張機能の説明文",
  "permissions":["使いたい機能等"],
  "icons":{
    "XXX":"アイコン画像.png"
   },

■開いているページの挙動を変える場合
  "content_scripts":[
  {
    "matches":["http://適用したいURLを指定"],
    "css":["該当URLで実行したいcss"],
    "js":["該当URLで実行したいjavascript"],
  }],

■開いているページとは別にポップアップhtmlを出すような場合
  ケース１：ブラウザアクション(ブラウザ全体に作用する拡張機能)を使う
  "browser_action": {
    "default_icon": {
      "XXX":"アイコン画像.png"
  },
  "default_title": "タイトル",
  "default_popup": "ポップアップ用html"
  },
  
  ケース2：ページアクション(特定のページのみに作用する拡張機能)を使う
  "page_action": {
  "default_icon": {
    "XXX":"アイコン画像.png"
  },
  "default_title": "タイトル",
  "default_popup": "ポップアップ用html"
  },
}

3.該当フォルダにmanifest.jsonに記載したファイル群を格納
4.chrome://extensions/でデベロッパーモードを有効にし、「パッケージ化されていない拡張機能を取り込む」をクリック
5.1で作成したフォルダを指定