会社のグループウェアの内容をプリザンターへも登録したくなったので、ブラウザの拡張機能をつくってみました！
プリザンターをメインに使用しているのですが、一部別システムを使っていてその内容をプリザンターにまとめたいので。

JavaScriptでつくった拡張機能

これを拡張機能として追加すれば、対象の箇所にプリザンターへの連携ボタンが追加されて、APIで内容を登録できる。

ボタンを追加.js

// プリザンターへの連携のためのボタンを追加
let inputbtn = document.createElement("input");
inputbtn.setAttribute("id", "btnp");
inputbtn.setAttribute("type", "button");
// 既存のボタンと同じclassにして見た目がそろうように
inputbtn.classList.add("xx");
inputbtn.classList.add("xxxxx");
inputbtn.value = "プリザンターへ連携";
inputbtn.onclick = RegistorPleasanter;
// 色を変える
inputbtn.style.background = "RGB(255, 230, 153)";

// ボタンを追加する場所を選択
let target = document.querySelector(
  "xxxxx"
);
// ボタンを追加
if (target !== null) {
  target.insertBefore(inputbtn, target.firstChild);
}

プリザンターへAPIで登録.js

// プリザンターへレコードを登録する
// Keys: ["DescriptionD"]をキーにして、
// すでにあれば更新、無ければ作成、複数あればエラー
async function RegistorPleasanter() {
  // ボタンを押した時の確認
  // キャンセルなら何もせずに終わる
  let confirmRecord = confirm("プリザンターへ登録しますか？");
  if (!confirmRecord) {
    return;
  }
    // http://{サーバー名}/api/items/{サイトID}/upsert
  let url = "http://xxxx/api/items/xxx/upsert";
  // 社内グループウェアから設定予定日時を取得
  let timeText = document.querySelector(
    "xxxxxxx"
  ).textContent;
  // 開始日時～終了日時となっているので分割する
  let timeArrya = timeText.split("～");
  let data = {
    ApiVersion: 1.1,
    ApiKey:
    "xxxxxxxxxxxxxxxxxx",
    // DescriptionDをキーにする
    Keys: ["DescriptionD"],
    // 社内グループウェアからタイトル、内容を取得
    Title: document.querySelector("xxxx")
      .textContent,
    Body: document.querySelector("xxxxxx")
      .textContent,
    StartTime: timeArrya[0],
    CompletionTime: timeArrya[1],
    Status: 100,
    ProgressRate: 0,
    DescriptionHash: {
      DescriptionA: "通常",
      // キーにするためのIDを取得_グループウェアのスケジュールID
      DescriptionD: document.getElementById("xxxxxx").value,
    },
  };

  // fetchでプリザンターAPI
  let response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json;charset=utf-8",
    },
    body: JSON.stringify(data),
  });

  if (response.ok) {
    // HTTP ステータスが 200-299 の場合
    // レスポンスの本文を取得(後述)
    let json = await response.json();
    console.log(json);
  } else {
    alert("しっぱいです！_HTTP-Error: " + response.status);
  }
  alert("プリザンターへ登録しました！");
}

プリザンターへのキーとする項目追加

キーにするための項目を追加する
DescriptionDとして、社内グループウェアの予定IDを反映する
APIのURLはupsertにしているので、既にあれば更新、無ければ作成、複数あればエラーとなる

拡張機能の設定

↑で作った.jsを適当な場所に保存して、開発者モードからブラウザの拡張機能へ読み込む（実際には一つのファイルにしている）
ブラウザはedgeです。

マニフェストファイルの設定

content_scriptsとしてマニュフェストの設定をします。
バージョンが現在はv3ですが、v2での記事が多く出てきてややこしかった。。。
これでページを読み込んだ時に、合わせてcontent_scripts.jsも読み込んでくれ、プリザンター登録へのボタンが追加される。

manifest.json

{
    "name": "content_scripts",
    "description": "プリザンターへの連携",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
      {
        "matches": [
          "*"
        ],
        "js": [
          "content_scripts.js"
        ],
        "run_at": "document_end",
        "all_frames": true
      }
    ]
  }

拡張機能の警告メッセージを表示しない

そのままだと、ブラウザを開くたびに警告メッセージが表示されてじゃまなので出ないようにする。
⇒こちらを参考に設定。
https://qiita.com/yokra9/items/75b4fcccf76eeab73325
上記URLの内容で警告メッセージが表示されなくなっていたのが、最近また表示されるようになってしまった。なぜ？
レジストリで設定しても反映がされない？
https://learn.microsoft.com/ja-jp/DeployEdge/microsoft-edge-policies#extensioninstallallowlist
グループポリシーが反映されないのか、よくわからず諦めました。。。

つまった所

400 bad requestsになってどこが間違ってるのか分からなかった
→プリザンターの入力制限されている内容に対して、おかしな内容を追加しようとしていただけで、コードが間違っているのではなかった！

プリザンターと別システムの連携