テキストボックスに自動で文字を入力するchrome拡張機能を作りたい

Question

前提・実現したいこと

livedoorの記事のページ内のコメント欄に特定の文字列を自動で入力するChrome拡張機能「入力くん」をつくりたいと思っています

livedoorのページ内で右クリックし、コンテクストメニュー内の「入力くん」をクリックしたら作動するように作ったつもりです
しかし実際はクリックしても何も起こりません
何がおかしいのでしょうか？
(初心者でコードの意味もわからぬままコピペしまくって作ったので冗長的で見にくいかもしれませんがよろしくおねがいします)

発生している問題・エラーメッセージ

Error in event handler: TypeError: Cannot set property 'value' of null

該当のソースコード

manifest.json

{
  "name": "nyuryokukun",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Sample Chrome Extension",
  "icons": {
  "16": "icon16.png",
  "48": "icon48.png",
  "128": "icon128.png"
  },
  "background": {
    "scripts": ["content.js"],
    "persistent": false
  },

  "permissions": [
    "activeTab",
    "contextMenus",
    "tabs",
    "storage"
  ],
  "content_scripts": [{
    "matches": ["http://*/*" , "https://*/*" , "ftp://*/*"],
    "js": [
      "content.js"
    ]
  }]
}

content.js

chrome.runtime.onInstalled.addListener(() => {
  const parent = chrome.contextMenus.create({
    id: 'parent',
    title: 'コメントを挿入',
    contexts:["all"]
  });
});  
chrome.contextMenus.onClicked.addListener(item => {
document.getElementById("comment-form-textarea").value = '挿入したい内容';
//comment-form-textareaはlivedoorのコメント欄のテキストボックスのID
});

補足情報（FW/ツールのバージョンなど）

chromeのバージョン: 89.0.4389.90（Official Build） （64 ビット）

Answer 1

background から 表示しているページの document は参照できません。
document は background の document です。

なので、document.getElementById("comment-form-textarea") が null になり、
null に value を呼んでいるので

Error in event handler: TypeError: Cannot set property 'value' of null

background では右クリックメニューの登録を行います。

chrome.runtime.onInstalled.addListener(() => {
  const parent = chrome.contextMenus.create({
    id: 'parent',
    title: 'コメントを挿入',
    contexts:["all"],
    onclick (info, tab) {
      // tab で contextMenu.js を実行する
      chrome.tabs.executeScript(tab.id, { file: 'contextMenu.js' })
    }
  });
});  

contextMenu.js

document.getElementById("comment-form-textarea").value = '挿入したい内容';

manifest.json に "content_scripts" は不要です。

追記

background.persistent が true じゃないと onclick は無理みたいですね。

代わりに chrome.contextMenus.onClicked に登録して、
どのメニューがクリックされたのか id で判断する必要があるみたいです。

chrome.contextMenus.create({
  id: 'parent', // これ
  title: 'コメントを挿入',
  contexts:["all"]
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  const id = info.menuItemId
  if (id === "parent") {
    chrome.tabs.executeScript(tab.id, { file: 'contextMenu.js' })
  }
})

Comments

[junjun11]

回答ありがとうございます
しかしbackgroundの chrome.contextMenus.create内に
onclick (info, tab) {
// tab で contextMenu.js を実行する
chrome.tabs.executeScript(tab.id, { file: 'contextMenu.js' })
}
という要素を加えたらなぜか右クリックしてもコンテクストメニューが表示されなくなってしまいました
これはどういうことでしょうか？
エラーメッセージ
Unchecked runtime.lastError: Extensions using event pages or Service Workers cannot pass an onclick parameter to chrome.contextMenus.create. Instead, use the chrome.contextMenus.onClicked event.