3

I am trying to make the selected text change into the p element of id 'ext' in popup.html and popup.js when I click the buy button but I seem to get undefined.

This is my manifest.json

{ "name": "hoko's ext", "description": "my ext", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab" ], "background": { "service-worker": "background.js" }, "content_scripts": [ { "matches": ["https://*/*"], "js": ["content.js"] } ] }

This is my popup.html

<!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> <h1>I am the popup</h1> <button id="btn">Buy</button> <p id="ext">Hello</p> <script type="text/javascript" src="popup.js"></script> </body> </html>

This is my background.js service worker

chrome.runtime.onMessage.addListener(receiver); window.word = 'Hello'; function receiver(request, sender, sendResponse) { if (request.text === 'Hello') { sendResponse(request); }}

This is my content script. The error is at content.js:13 (anonymous function)

console.log('yo'); window.addEventListener('mouseup', word); function word() { console.log('word selected'); let select = window.getSelection().toString(); console.log(select); if (select.length > 0) { let message = { text: select }; chrome.runtime.sendMessage(message); } }

And lastly this is my popup.js script

const btn = document.getElementById('btn'); btn.addEventListener('click', () => { chrome.runtime.sendMessage({text: "Hello"}, function(response) { document.getElementById('ext').innerHTML = response; } ); })
Improve this question
1
  • 1
    You probably opened popup.html as a file:// or http:// page. It's wrong. Click the extension's icon in the browser toolbar to open the popup. Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. Commented Aug 13, 2022 at 22:48

3 Answers 3

Reset to default
1

Your backgroundScript receiver isn't doing anything when it gets the message (selected word) from the contentScript.

//backgroundScript.js var selectedWord; chrome.runtime.onMessage.addListener( function(request,sender,sendResponse){ if(request.text === 'Hello'){ //send saveWord variable to popup sendResponse({word:selectedWord}); } else { //save request.text selectedWord = request.text } return true; //for async reasons i dont get either } ); //popupScript.js ... document.getElementById('ext').innerHTML = response.word;

I hope this helps?

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I tried this and the 'ext' just stayed the same. I switched up my code a bit and now it is saying Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
1

Okay, I just had to replace - with _ in service-worker in manifest.json and everything worked perfectly! I edited my code however in background.js, content.js and popup.js.

manifest.json

{ "name": "hoko's ext", "description": "my ext", "version": "1.0", "manifest_version": 3, "action": { "default_popup": "popup.html" }, "permissions": [ "activeTab" ], "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["https://*/*"], "js": ["content.js"] } ] }
Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
0

service_worker instead of service-worker in the manifest.js was the problem

Improve this answer

2 Comments

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
I think that it is intended to answer the question but does so unclearly. The clause matches the words in the opening sentence of Hoko's own answer, to replace - with _ in service-worker.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.