Chromeの拡張機能を作成する

2018/02/202020/10/067

Firefox拡張機能をChrome拡張機能で作成から公開まで行います。

Chrome拡張機能の作成

Firefoxで作成した拡張機能のChrome版を作成します。
Firefoxの拡張機能については、以下の記事を参照してください。

Firefox用WebExtensions拡張機能を作成する

作成する

作成したファイルは、以下の２ファイルです。Firefoxの流用ですが、一部異なります。

manifest.json{
  "manifest_version": 2,
  "name": "CopyTabTitleUrl",
  "description": "コンテキストメニューを追加して、クリップボードへタイトルとURLをコピーします。",
  "version": "0.0.1",

  "background": {
    "scripts": ["js/background.js"]
  },

  "permissions": [
    "activeTab",
    "contextMenus",
    "clipboardWrite",
    "tabs"
  ]
}

js/background.jsfunction copyToClipboard(text) {
    function oncopy(event) {
        document.removeEventListener("copy", oncopy, true);
        // Hide the event from the page to prevent tampering.
        event.stopImmediatePropagation();

        // Overwrite the clipboard content.
        event.preventDefault();
        event.clipboardData.setData("text/plain", text);
    }
    document.addEventListener("copy", oncopy, true);

    // Requires the clipboardWrite permission, or a user gesture:
    document.execCommand("copy");
}

chrome.contextMenus.create({
    id: "context-copytab-title-url",
    title: "タブのタイトルとURLをコピー",
    contexts: ["all"]
});
chrome.contextMenus.create({
    id: "context-copytab-title",
    title: "タブのタイトルをコピー",
    contexts: ["all"]
});
chrome.contextMenus.create({
    id: "context-copytab-url",
    title: "タブのURLをコピー",
    contexts: ["all"]
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "context-copytab-title-url") {
        copyToClipboard(tab.title+'\n'+tab.url);
    }
    if (info.menuItemId === "context-copytab-title") {
        copyToClipboard(tab.title);
    }
    if (info.menuItemId === "context-copytab-url") {
        copyToClipboard(tab.url);
    }
});

動作の説明

「タブのタイトルとURLをコピー」「タブのタイトルをコピー」「タブのURLをコピー」のメニューをすべてのコンテキストメニューに追加しています。

Firefoxでは、タブメニューにのみ追加しましたが、Chromeでは、タブメニューに追加することができないため、すべてのメニューに追加しました。そのため、通常のページ上で右クリックすると、「CopyTabTitleUrl」でグループ化したメニューが表示されるはずです。

デバッグ

Chromeのデバッグは、以下のように行います。

「chrome://extensions/」をアドレスバーに入力する
- デベロッパーモードをチェックする
- パッケージ化されていない拡張機能を読み込む...を選択する
  - ローカル上の拡張ファイルの配置してあるルートフォルダを選択する
成功していれば、すぐに動作を開始する
失敗している場合、DeveloperToolsがエラーを表示したり、拡張機能の表示がエラーを表示するため、適時対応する
ファイルを変更した場合、リロードボタンで適応できる
ファイルを変更した場合、リロードボタンで適応できる
バックグラウンドページから開くコンソールでコンソール出力を確認できる
- Firefoxと異なり、ポップアップやオプション画面は別のコンソールから出力する

参考資料

公開する

Chrome拡張機能を公開する場合、ソース公開とChromeウェブストアでの公開の２通りの方法が可能なようです。

ソース公開

ソースをすべて公開することで、拡張機能の開発と同様のことをユーザが行うことでユーザ環境で動作させることができます。

Chromeウェブストアで公開

Chromeウェブストアのデベロッパーダッシュボード（右上の歯車から移動）から拡張機能をストアに登録できます。登録には、5.00ドルが必要になります。（無料の拡張機能を登録する場合でも5.00ドルが必要になります）

記事作成時に作成したアドオンは、CopyTabTitleUrlです。

参考

独自のブラウザー拡張機能を作成する

バグ取りの日々