Firefox拡張機能をChrome拡張機能で作成から公開まで行います。
Chrome拡張機能の作成
Firefoxで作成した拡張機能のChrome版を作成します。
Firefoxの拡張機能については、以下の記事を参照してください。
作成する
作成したファイルは、以下の２ファイルです。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です。
