【ソースコード有り】閲覧中のページタイトルとURLをトゥートするfirefox向けアドオンを作った。

プログラミング

作ったもの

アドオンのポップアップに、
今見てるページのタイトルとURLが本文としてセットされて、
postボタンを押したら投稿される。

本文は書き換えたり加筆しても投稿できる。

作り方

作らないといけないファイル

  1. manifest.json
    作ったアドオンのタイトルと説明。実行するときに参照するファイル名。とか
  2. popup.html
    アドオンのアイコンをクリックしたときに表示されるポップアップ内のレイアウト
  3. popup.js
    小窓でアクションが起きたら動く関数たち
  4. background.js
    popup.jsから細かい仕事を頼まれる関数たち
  5. icon.jpg
    アドオンのアイコン画像

1.manifest.json

{
  "manifest_version": 2,
  "name": "Mastodon Share",
  "version": "1.0",
  "description": "現在のページのタイトルとURLをマストドンに投稿します",
  "icons": {
    "48": "icon.png"
  },
  "permissions": [
    "activeTab",
    "tabs"
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "content_security_policy": "script-src 'self'; object-src 'self'"
}

それぞれ説明

“manifest_version”
なんだこれ。とりま2でいいらしい。

“name”
アドオンの名前。↓アドオン一覧のところに表示される。

“version”
バージョン。適当に決めてOK。

“description”
アドオンの説明。↓アドオン一覧のところに表示される。

“icons”
アイコンの解像度と画像ファイル名

“permissions”
必要な権限。
今回はアクティブなタブを取得するactiveTabと、
タブのタイトルとURLを取得するtabs

“browser_action”: {
“default_popup”
アイコンをクリックしたときに表示するhtml
“default_icon”:
アイコンの画像ファイル名。なんで2ヶ所に書くんだろうね。
}

“background”: {
“scripts”:
popup.jsからもっと細かい仕事を頼まれるjavascriptのファイル名
}

“content_security_policy”: “script-src ‘self’; object-src ‘self'”
これはなんなんだ。なくてもいいかもしれん。

2.popup.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 400px;
      height: 200x;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    button {
      width: 80%;
      padding: 10px;
      margin-top: 10px;
    }
    textarea {
      width: 90%;
      padding: 10px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <label id="tootErrorLabel" style="color: red; display: none;">※トゥートに失敗しました。</label>
  <button id="postButton">post</button>
  <textarea id="postContentTextarea" rows="5"></textarea>
  <script src="popup.js"></script>
</body>
</html>

めっちゃ簡素。

3.popup.js

//コンストラクタ
//※アイコンがクリックされたら実行される
document.addEventListener('DOMContentLoaded', function() {
  try{
  //本文の作成
  makeTootBody();
  //postボタンがクリックされたら、トゥートが送信されるように設定
  document.getElementById('postButton').addEventListener('click', toot);
  } catch(error) {
    console.error(error);
  }
});

//トゥートを送信する関数
function toot() {
  try{
  var tootContent = document.getElementById('postContentTextarea').value;
  browser.runtime.sendMessage({content: tootContent});
  } catch(error) {
    var tootErrorLabel = document.getElementById('tootErrorLabel');
    tootErrorLabel.style.display = block;
  }
  //ポップアップを閉じる
  window.close();
}

//テキストエリアにトゥートの本文をセットする関数
function makeTootBody(){
  browser.tabs.query({active: true, currentWindow: true}).then((tabs) => {
    let activeTab = tabs[0];
    let title = activeTab.title;
    let url = activeTab.url;
    let postContent = `${title}\n${url}`;

    document.getElementById('postContentTextarea').value = postContent;
  });
}

4.background.js

browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.content) {
    let mastodonInstance = 'https://mstdn.jp';  // マストドンのインスタンスURL(仮)
    let accessToken = 'xxxxxxxxxxxxxxxxxx';  // アクセストークン(マスク済み)　書き換えて使ってね。

    fetch(`${mastodonInstance}/api/v1/statuses`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${accessToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        status: request.content,
        //公開範囲を「フォロワーだけ」に設定
        visibility: 'private'
      })
    })
    .then(response => {
      if (response.ok) {
        console.log('投稿が完了しました');
      } else {
        response.text().then(text => {
          console.log('投稿に失敗しました: ' + text);
        });
      }
    })
    .catch(error => {
      console.log('エラーが発生しました: ' + error.message);
    });
  }
});

5.icon.jpg

GIMPでササっと作ったやつ。48*48ならどんなのでもOK。

使い方

background.jsのインスタンス名とアクセストークンを書き換えて使ってね。
↓一応アクセストークンの取得方法を

設定ボタンをクリック、開発ボタンをクリック、新規アプリボタンをクリック

アプリの名前だけ入力して、その下のアクセス権はwriteにだけチェックして送信すれば、
アクセストークンが発行されるよ。

公開範囲はbackground.jsのvisibility: ‘○○○○’で変更できる。
○○○○のところにpublicとかfollowers_onlyとか入れればいいんだと思う。
↓公式ドキュメント

見た目を変えたかったらpopup.htmlを変えてね。

終わりに

このくらい小規模だと、ソースを通読できてなんとなく手順がわかるし、なにより簡単に動いてモチベ上がるね。

タイトルとURLをコピーしました