2017/10/27-編集中

水色背景文字は未確認の部分

annotate-page

https://github.com/mdn/webextensions-examples/tree/master/annotate-page

manifest.json

"sidebar_action": {
  "default_icon": "icons/star.png",
  "default_title" : "Annotator4",
  "default_panel": "sidebar/panel.html",
  "browser_style": true
}

sidebar_action

default_icon:サイドバーを開閉するためのアイコンがブラウザのUIに表示されます。

サイズ別アイコンを複数設定する場合はサイズに応じた整数；パスで指定する。

"sidebar_action": {
  "default_icon": ｛
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
　}
}

default_title:UI上に表示されるタイトル

browser_style:ブーリアン型

これを使用してポップアップにスタイルシートを含めると、ブラウザのUIやbrowser_styleプロパティを使用するその他の拡張機能と一貫性があります。

対応ブラウザがまだ少ない。

manifest.json

"permissions": ["storage", "tabs"]

permissions:アドオンに必要なパーミッションのリスト

https://developer.mozilla.org/ja/Add-ons/WebExtensions/manifest.json/permissions

host パーミッション

host パーミッションは match patterns として指定します。それぞれのパターンによって、アドオンの要求する権限が有効となる URL の範囲を指定

API パーミッション

API パーミッションは使用したい WebExtension API の名前をキーワードとして指定

この場合storageとtabsのAPIを要求している。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs

manifest.json

  "commands": {
    "_execute_sidebar_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y"
      }
    }
  }

commands:拡張機能のショートカットキーを設定する

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/commands

各ショートカットは、名前、キーの組み合わせ、および説明で定義されます。 manifest.jsonでいくつかのコマンドを定義したら、JavaScript API commandsを使用して関連するキーの組み合わせを聞くことができます。

“_execute_sidebar_action”:コマンド名？一覧はどこにあるのか？

“toggle-feature”などカンマ区切りで複数登録可能

“suggested_key”:ショートカットキーの組み合わせ。各環境に合わせて登録詳しくはリファレンスを参照。

panel.js

var myWindowId;
const contentBox = document.querySelector("#content");

window.addEventListener("mouseover", () => {
  contentBox.setAttribute("contenteditable", true);
});

window.addEventListener("mouseout", () => {
  contentBox.setAttribute("contenteditable", false);
  browser.tabs.query({windowId: myWindowId, active: true}).then((tabs) => {
    let contentToStore = {};
    contentToStore[tabs[0].url] = contentBox.textContent;
    browser.storage.local.set(contentToStore);
  });
});

function updateContent() {
  browser.tabs.query({windowId: myWindowId, active: true})
    .then((tabs) => {
      return browser.storage.local.get(tabs[0].url);
    })
    .then((storedInfo) => {
      contentBox.textContent = storedInfo[Object.keys(storedInfo)[0]];
    });
}

browser.tabs.onActivated.addListener(updateContent);

browser.tabs.onUpdated.addListener(updateContent);

browser.windows.getCurrent({populate: true}).then((windowInfo) => {
  myWindowId = windowInfo.id;
  updateContent();
});

1,31-34

var myWindowId;

browser.windows.getCurrent({populate: true}).then((windowInfo) => {
myWindowId = windowInfo.id;
updateContent();
});

getCurrent({populate: true})

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/windows/getCurrent

populate オプションboolean型

trueの場合、 ウィンドウ内のタブを表すtabs.Tabオブジェクトのリストを含むtabsプロパティがあります。 “tabs”パーミッションが含まれている場合、 Tabオブジェクトにはurl 、 title 、およびfavIconUrlプロパティのみが含まる。

全てのtabs.queryでactive: trueを送っているのにmyWindowIdを取る必要はあるのか不明。どのようなバグに遭遇するのどうか・・・。

17-25

storageAPIを使って<div id = “content”></div>へ入力されたデータを書き出しする関数。

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage/local

ついでにtextareaを使わずcontenteditableを使うのは何故なんだろう？4-6がそれ

8-15

マウスアウトで入力された内容を保存する関数。

browser.tabs.query({windowId: myWindowId, active: true})

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/query

やっぱりwindowIdを指定する理由が分からないけどアクティブの認識さえも間違えているのかもしれない。

処理の確認デバッグにはショートカットキーを利用してやるのが便利かも

manifest.json

"commands": {
  "toggle-feature": {
    "suggested_key": {
      "default": "Ctrl+Shift+O"
    }
  }   
}

操作は"toggle-feature"がいいでしょう。

browser.commands.onCommand.addListener((command) => {
    console.log()
});

デバッグには「about:debugging」のアドオンのデバッグを有効化しましょう。

とりあえずメモとして書き出しましたが誰かの役に立つにはもっと知識をつけてから再編集する必要がありそうです。とにかく次へいこう。