Chromeの拡張機能を作成する

投稿日 2018/02/20 更新日 2019/10/30

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

Chrome拡張機能の作成

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

Firefox用WebExtensions拡張機能を作成する
thumbnail
下記の記事で作成したuserChrome.js用ユーザスクリプトを拡張機能で作成します。 Firefox userChrome.js用ユーザスクリプトを作成する Firefoxを使いやすくする。タブのタイトルとURLをコピーしたかったけど出来なかったので自作してみた。...
https://www.bugbugnow.net/2018/02/firefoxwebextensionscopytabtitleurl.html

作成する

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

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

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

  "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がエラーを表示したり、拡張機能の表示がエラーを表示するため、適時対応する
  • ファイルを変更した場合、リロードボタンで適応できる
  • ファイルを変更した場合、リロードボタンで適応できる
  • バックグラウンドページから開くコンソールでコンソール出力を確認できる
    • Firefoxと異なり、ポップアップやオプション画面は別のコンソールから出力する

参考資料

公開する

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

ソース公開

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

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の拡張機能にショートカットを実装

コメント