2018-07-05T20:27:22Z

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

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

Chrome拡張機能の作成

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

作成する

作成したファイルは、以下の2ファイルです。基本的に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ウェブストアでの公開の2通りの方法がかのうなようです。

ソース公開

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

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

Chromeウェブストアで公開

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

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

参考

 コメントを書く