Chromeの拡張機能を作成する：CopyTabTitleUrl

Firefoxで作成した拡張機能を流用して、Chrome拡張機能の作成から公開までを行います。

Chrome拡張機能の作成

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

作成する

作成したファイルは、以下の２ファイルです。基本的にFirefoxの流用ですが、配置場所などところどころ異なっています。

{
  "manifest_version": 2,
  "name": "CopyTabTitleUrl",
  "description": "コンテキストメニューを追加して、クリップボードへタイトルとURLをコピーします。",
  "version": "0.0.1",
  
  "background": {
    "scripts": ["js/background.js"],
    "persistent": false
  },
  
  "permissions": [
    "activeTab",
    "contextMenus",
    "clipboardWrite",
    "tabs"
  ]
}

function 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がエラーを表示したり、拡張機能の表示がエラーを表示するため、適時対応する
ファイルを変更した場合、リロードボタンで適応できる

参考資料

Chrome拡張機能の公開

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

ソース公開

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

逆に言えば、ストア公開以外の方法は、ほぼ皆無です。このあたりは、xpiさえあればどこからでもインストールできるFirefoxとは大きく異なります。

Chromeウェブストアで公開

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

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

参考

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

バグ取りの日々