Chrome版チャットワークにて、ブックマークレットからワンクリックでメッセージを送信させたい。

相談内容

Chrome版チャットワークにて、
ブックマークレットからワンクリックでメッセージを送信させたい。

前提

Chrome版チャットワークにて、
ブックマークレットを使用し、
以下の仕組みを作ろうとしています。

実現したいこと

自作ブックマークレットをクリック
↓
現在のチャット画面のフォームに「お疲れ様でした」と自動で入力
↓
そのまま「送信」まで押される
↓
メッセージが送信され完了

現在のブックマークレットのコード

javascript
1javascript: (function () {
2  const el = document.getElementById('_chatText'); // チャット入力フォームを取得
3  el.value += 'お疲れ様でした';
4
5  const button = document.querySelectorAll('.VUxnn')[0]; // 送信ボタンを取得
6  button.removeAttribute('disabled'); // disabled属性がついているので外す
7  button.click(); // 送信ボタンをクリック
8})();

発生している問題

「送信ボタン」を押してもメッセージが送信されません。
consoleLogで確かめると、たしかに「クリック」はされたことになっているようです。

しかし「送信」はされません。

ちなみに、、、

今回はjsで無理やり「disabled」を外していますが、
「通常のdisabledの外し方」、つまり「テキストフォーム上で実際に何かのテキストを打つ」として送信ボタンを解放した場合、
コンソール上の .click()でメッセージも送信できます。

このことから、removeAttributeで「disabled」を無理やり外すのが根本的に良くないのかなと考えています。

試したこと（あきらめた事）

「キーボードで何かのキーを入力したことにする」を試してみたかったのですが、
今現在グーグル検索でヒットするページのコードでは、どれもキーの入力代行が実行できず、あきらめました。

相談内容

Chrome版チャットワークにて、
ブックマークレットからワンクリックでメッセージを送信させたいです。

追記：回答で頂いたconsole.logを追加した結果

以下のコードをChatwork上で実行しました。

javascript
1(function () {
2  const el = document.getElementById('_chatText');
3  el.value += 'お疲れ様でした';
4
5  const inputEvent = new Event('input', { bubbles: true });
6  el.dispatchEvent(inputEvent)
7
8  const button = document.querySelectorAll('.VUxnn')[0]; // 送信ボタンを取得
9  button.click(); // 送信ボタンをクリック
10
11  console.log("----- el:", el);
12  console.log("----- button:", button);
13})();

↓コンソールです。

行動規範の内容に同意します

回答1件

コード上で input イベントを発生させるとどうなりますか？

diff
1  javascript: (function () {
2    const el = document.getElementById('_chatText'); // チャット入力フォームを取得
3    el.value += 'お疲れ様でした';
4
5+   // input イベントを送信
6+   const inputEvent = new Event('input', { bubbles: true });
7+   el.dispatchEvent(inputEvent)
8
9
10    const button = document.querySelectorAll('.VUxnn')[0]; // 送信ボタンを取得
11-   button.removeAttribute('disabled'); // disabled属性がついているので外す
12    button.click(); // 送信ボタンをクリック
13  })();

投稿2022/12/14 07:56

shinoharat

総合スコア1685

mindPracticePra

2022/12/16 06:10

ご回答いただきありがとうございます！いただいたコードをそのまま何度か実行してみましたが、結果に変化はありませんでした。また、頂いたコードにはまだまだ自分が知らぬ処理がありましたので、こちらを自分の方で理解、応用してみたいと思います。もし共有が必要な情報、スクショなどあれば、ご指示いただければお送りいたします！