質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

1020閲覧

chrome拡張機能の実装

apple-apple

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2023/04/15 02:17

実現したいこと

chrome拡張機能の実装

前提

chrome拡張機能に初めて触っています。
https://yuki.world/how-to-develop-chrome-extension-basics/ を参考にプログラムを作成したのですが、ポップアップ中のgetボタンをクリックしても「Cannot Get! Try Reload First!」としか表示されません。

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

1つ目:
Uncaught TypeError: Cannot read properties of null (reading 'prepend')
コンテキスト
https://qiita.com/question-trend
スタック トレース
content.js:12 (無名関数)

2つ目:
Unchecked runtime.lastError: The message port closed before a response was received.
コンテキスト
popup.html
スタック トレース
popup.html:0 (無名関数)

該当のソースコード

manifest.json

json

1{ 2 "name": "HELLO WORLD", 3 "description": "chrome拡張機能の基礎", 4 "version": "1.0", 5 "manifest_version": 3, 6 "action": { 7 "default_popup": "popup.html" 8 }, 9 "content_scripts": [ 10 { 11 "js": ["content.js"], 12 "run_at":"document_start", 13 "matches": ["https://qiita.com/*"] 14 } 15 ] 16}

popup.html

html

1<html> 2 <body> 3 <h1>HELLO WORLD</h1> 4 <input type="text" id="title"> 5 <button id="btn">text change</button> 6 <button id="btn_get">get</button> 7 <script src="popup.js"></script> 8 </body> 9</html>

popup.js

javascript

1document.getElementById('btn').addEventListener('click', () => { 2 document.querySelector('h1').textContent = "CHANGED !!"; 3}) 4 5document.getElementById('btn_get').addEventListener('click', () => { 6 chrome.tabs.query( {active:true, currentWindow:true}, (tabs) => { 7 chrome.tabs.sendMessage(tabs[0].id, {message: 'getname'}, (content) => { 8 if(!content){ 9 alert('Cannot Get! Try Reload First!'); 10 return; 11 } 12 document.getElementById('title').value = content 13 }); 14 }); 15});

content.js

javascript

1let body = document.querySelector('body') 2let addElement = document.createElement('h2'); 3addElement.textContent = 'HELLO WORLD'; 4 5chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { 6 let title = document.querySelector('.css-1fhgjcy').textContent 7 sendResponse(title); 8}); 9 10body.prepend(addElement);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

json

1 "run_at":"document_start",

content.js が実行されるタイミングで document.body がまだ存在しないのでしょう。この値を document_end にでも変えるとよいかもしれません。

投稿2023/04/16 22:17

int32_t

総合スコア20661

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

apple-apple

2023/04/19 01:53

回答ありがとうございます。 ご指摘の箇所を訂正したところ、1つ目のエラーメッセージは消えましたが2つ目は出たままです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問