読者です 読者をやめる 読者になる 読者になる

tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

chrome extensionsの登録〜実行してみる

はじめに

chrome extensionでやりたいことがあったのでテストでサンプルを作ってみました
contextMenusを使ってみるテスト1
こちらはソースしかないので、これを例に登録〜実行するまでもメモっておきます

ながれ

1.フォルダとファイルを用意
2.chrome拡張機能で登録
3.実行してみる
4.修正〜実行

1.フォルダとファイルを用意

chrome extensionsでcontextMenusを使ってみるテスト1で書いたサンプルを例に使います
適当なところに以下のようなディレクトリとファイルを作ります

test_ex1
|-- background.js
|-- icon16.png
`-- manifest.json

2.chrome拡張機能で登録

chromeの右上のやつ>ツール拡張機能」で拡張機能画面を開きます


こんな画面

デベロッパーモードにチェックが入ってないと拡張機能の登録はできません

「パッケージ化されていない拡張機能を読み込む」

フォルダの参照画面が表示されるので作ってあった「test_ex1」フォルダを選択

こんな感じで拡張機能として登録されます


※manifest.jsonとか間違ってるとエラーが表示されたりします

余談でエラーの場合

manifest.jsonが間違ったりしてるとこんな感じのエラーが出ます

  • 無駄にカンマで終わってみる
{
  "name": "context menus test",
  "version": "0.1",
  "manifest_version": 2,
  "description": "test context menus",
  "permissions" : [
    "tabs", "http://*/*", "https://*/*", "contextMenus"
  ],
  "icons" : {
    "16" : "icon16.png"
  },
  
  // カンマで終わってみる("background":{},←のところ)
  "background" : {
    "scripts" : ["background.js"]
  },
}

結果

  • 無駄にキー名を間違ってみる
{
  "name": "context menus test",
  "version": "0.1",
  "manifest_version": 2,
  "description": "test context menus",
  "permissions" : [
    "tabs", "http://*/*", "https://*/*", "contextMenus"
  ],
  "icons" : {
    "16" : "icon16.png"
  },
  
  // キー名を間違ってみる
  "backgrounddddddddddddddddddddd" : {
    "scripts" : ["background.js"]
  }
}

結果

編集と削除

・編集…manifest.jsonとかbackground.jsとか編集したら「リロード」押さないと反映されません
・削除…「ゴミ箱アイコン」押せば消えます