会社のグループウェアの内容をプリザンターへも登録したくなったので、ブラウザの拡張機能をつくってみました！
プリザンターをメインに使用しているのですが、一部別システムを使っていてその内容をプリザンターにまとめたいので。
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になってどこが間違ってるのか分からなかった
→プリザンターの入力制限されている内容に対して、おかしな内容を追加しようとしていただけで、コードが間違っているのではなかった！