twitterでシェアするボタンは多くのサイトにあるが、misskey.io用のはほぼ無いので、
手軽にシェアできるようChrome拡張を作ってみた。
同様のものはすでにTwishare to Misskeyというのがストアにあったが、セキュリティ的に権限を必要最低限に抑えたいというのと、画面内にボタンを常時表示させとくのはちょっと気になるので別途作ることにした。
Chrome拡張は以前から気になってはいたが、まじめに作ったことがなかったので色々と調べるところから。
開発準備
環境
- Windows 11
- vscode
リポジトリ
仕様
misskeyの仕様で（twitterと同様に） https://misskey.io/share?text=hoge のようなURLでアクセスすると共有ページが表示され、メッセージを投稿できる。
この機能を利用するとして、あとはページタイトルとURLを取得して画面遷移できれば実現できそうである。
Chrome拡張の実行タイミングはページ表示時やボタンを押した時などがあるが、わかりやすく、かつセキュリティ的に安全そうなのはボタンを押した時に実行するタイプなのでこれで実装してみる。
開発
とりあえずmanifest.jsonとHTMLとJavaScriptファイルがあれば動作はするらしい。
extensionフォルダを作成し、その中にファイルを作成する。
jquery-3.7.0.min.jsはjQuery公式からダウンロードして保存する。
+extension
|-manifest.json
|-popup.html
|-jquery-3.7.0.min.js
|-popup.js
manifest.json
最低限必要な記述は以下になる。
action/default_popupで指定したHTMLファイルが、拡張機能を実行したときに表示される。
JavaScriptファイルはフォルダ内にあればよく、manifest.jsonで個別に指定する必要はないらしい。
{
"name": "Share2misskey.io",
"version": "0.2",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
}
}
popup.html
HTMLの記述は普通のWebページと大差ない。
<html>
<body>
<h1>Share to misskey.io</h1>
<div>
<textarea id="message"></textarea>
</div>
<div id="button-area">
<button id="close">Close</button>
<button id="share">Share</button>
</div>
</body>
<script src="jquery-3.7.0.min.js"></script>
<script src="popup.js"></script>
</html>
jQueryなどJavaScriptを使う場合はフォルダに入れておけばよい。scriptタグでJavaScriptファイル名（ディレクトリなし）を指定すれば読み込んでくれる。
popup.js
JavaScriptファイルも普通のWebページと変わらず記述できる。
shareボタンをクリックしたら、window.openで新しいページを開き、misskeyの共有ページを開く。
jQuery書くのも久しぶりなので少し思い出すのに時間がかかった。
$(function () {
(async () => {
$("#message").val("hoge");
})()
$("#share").on("click", () => {
const message = $("#message").val();
window.open("https://misskey.io/share?text=" + encodeURIComponent(message), "_blank");
})
$("#close").on("click", () => {
window.close();
})
});
ここまででとりあえず画面表示するだけの拡張機能は作成できる。
Chromeの拡張機能のページを開き、デベロッパー モードをオンにした後、一度拡張機能のページをリロードする。
再度Chromeの拡張機能のページを開き、extensionフォルダをドラッグアンドドロップで放り込むと拡張機能が追加される。
（もしくは、パッケージ化されてない拡張機能を読み込むでextensionフォルダを指定する）
ページタイトルとURL取得
タブの情報にアクセスするにはchrome.tabsで提供されるAPIを使用する。
一部のAPIはmanifest.jsonでpermissionsを指定しないと使用できない。今回はタブの情報取得のためactiveTabと、設定フラグの保存のためstorageを指定する。
"permissions": [
"activeTab",
"storage"
],
開いてるタブ以外へのアクセス等は別途権限が必要となるようなので、
chrome.tabsからタブを取得する際にactive: trueを指定する。
const queryOptions = { active: true, currentWindow: true };
const [tab] = await chrome.tabs.query(queryOptions);
タブからはタイトルとURLがそれぞれtitle, utlで取得できる。
取得した値はmessageに設定する。
const message = tab.title + " - " + tab.url
$("#message").val(message);
あとはCSSで見た目を整えたり、アイコンや説明を追加したり、オプションページを追加して完成である。
配布・インストール
作成した拡張機能はchromeの拡張機能のページから拡張機能をパッケージでパッケージ化(.crxファイルに)できるのだが、このファイルを配布してもストア経由でないと実行できないらしい。
ストアに登録するまでのものでもないので、とりあえずフォルダごとzipで配布することにした。
インストール手順は開発時と同じくである。
ダウンロード
https://github.com/betarium/share2misskey-io/releases/download/0.2/share2misskey-io-0.2.zip
- Chromeの拡張機能のページを開き、デベロッパー モードをオンにした後、一度拡張機能のページをリロードする。
- zipファイルを展開したあとに、extensionsフォルダを拡張機能のページにドラッグする。
- お好みで、拡張機能のボタンから固定に設定する。