Q&A
実現したいこと
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);
回答1件
0
json
1 "run_at":"document_start",
content.js が実行されるタイミングで document.body がまだ存在しないのでしょう。この値を document_end にでも変えるとよいかもしれません。
投稿2023/04/16 22:17
総合スコア21929
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/04/19 01:53