Chromeの拡張機能を作成する

投稿日 2018/02/20 更新日 2020/10/06

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

Chrome拡張機能の作成

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

作成する

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

ソース公開

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

Chromeウェブストアで公開

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

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

CopyTabTitleUrl

参考

関連記事

  1. Firefox userChrome.js用ユーザスクリプトを作成する
  2. Firefox用WebExtensions拡張機能を作成する
  3. Chromeの拡張機能を作成する
  4. Firefox用WebExtensions拡張機能を国際化する
  5. Chrome、Firefox、Edgeの拡張機能を判定する
  6. Chrome、Firefox拡張機能のブラウザアクションでポップアップあり・なしを共存する
  7. Chrome、Firefoxの拡張機能にショートカットを実装

コメント

匿名 さんのコメント...

初めまして。ChromeのCopyTabTitleUrlを使っています
選択した複数タブのみリンクを作成する拡張機能が少ないので重宝しています
現時点ではフォーマット追加が二つのみですが、今後増やす予定はありますでしょうか?

toshi さんのコメント...

コード修正が多く、需要を想定できなかったため、増やす予定はありませんでした。需要があるようでしたら機能追加について考慮します。機能概要と使用用途を添えてGitHubのIssuesに起票して下さい。(GitHubがわからなければ、このコメントへの返信でも良いです)

本拡張機能が提供する機能と合致し、大多数の利用者が必要とする機能であれば機能追加する可能性があります。ただし、想定される利用数とコード修正量により開発者のやる気が違います。現状、開発者本人の需要は満たし、想定できる需要にも対応しているため、新機能を追加する意欲はあまりありません。

需要がわからないため、何個のフォーマットを追加すれば需要が満たせるのかなどがわかりません。3個必要なのか?4個必要なのか?それ以上必要なのか?何をどうやってコピーしたいのか?また、[補足]の理由により無制限に追加することはできません。

[補足]
キーボードショートカットは、動的な追加ができないため、フォーマットがキーボードショートカット対応する場合、事前に最大個数を決定しておく必要があります。

匿名 さんのコメント...

早々の返答ありがとうございます。

GitHubは不慣れですので、こちらでよろしいでしょうか

フォーマット追加については、現状の2枠から5枠までの拡張を希望していますが
難しそうなら3枠でも助かります

大変お手数ですが、検討いただけると嬉しいです

toshi さんのコメント...

5枠への拡張希望であることは認識しました。次のIssuesとして起票しました。
https://github.com/k08045kk/CopyTabTitleUrl/issues/19

ただし、私個人の理解力では、5枠分の拡張が「大多数の利用者が必要とする機能」であることが理解できていません。現時点で機能拡張の優先度はさほど高くはありません。

どのような需要(理由)によって5枠分のフォーマットが必要なのでしょうか?
あなたは何にその5枠を利用しますか?(マークダウン・リンク・etc)
あなたはどうやってその5枠を利用しますか?(キーボードショートカット・コンテキストメニュー・ブラウザアクション)
あなたが5枠分のフォーマットを必要としてる具体的な理由を教えて下さい。それは、本拡張機能がより良くなるために必要な情報です。何がほしいのかではなく、なぜほしいのかの理由を教えて下さい。

匿名 さんのコメント...

リンクをそのまま書いたのですがNGでしたので、以前firefoxで使っていた設定のハードコピーを張っておきます

https://i.gyazo.com/45b669498bf1ae87b34c5b8e3a29b37c.png

そのうち、既に設定されているリンクを除外しますと6つになります。画像関係は一つでも対応可能ですので、自由に設定できるフォーマットが4~5枠ほしいと考えました

現状の2枠からせめてあと1枠あれば・・・と思い連絡させていただきました。急ぎませんので、ご検討いただけると幸いです

toshi さんのコメント...

回答ありがとうございます。

HTML形式を複数パターンでフォーマット指定する使用方法について考慮できていませんでした。この使用方法だと爆発的に使用フォーマット数が増加することが推測できます。
(画像を見た限り最悪コンテキストメニューのみ対応すれば、問題ないものと邪推しました。選択タブ+ブラウザアクションコンテキストメニュー)

実装するとは確約できませんが、前向きに検討します。

補足として、(既に考えられているとは思いますが)上記の使用方法であれば、他拡張機能との重複使用で対応可能なのでは?と感じました。「単タブは他拡張機能」「選択タブは本拡張機能」とすれば無理やりではありますが対応できるものと考えます。