Question

未捕获的类型错误：无法读取未定义的属性（读取‘sendMessage’）

2022-08-13

7942

javascript google-chrome-extension

当我单击购买按钮时，我试图将选定的文本更改为 popup.html 和 popup.js 中 id 为“ext”的 p 元素，但似乎未定义。

这是我的 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"]
        }
      ]
  
}

这是我的 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>

这是我的 background.js 服务工作者

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

这是我的内容脚本。错误位于 content.js:13（匿名函数）

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);
    }
}

最后，这是我的 popup.js 脚本

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
    chrome.runtime.sendMessage({text: "Hello"}, function(response) {
        document.getElementById('ext').innerHTML = response;
    
    }
    ); 
    })

Answer 1

当您的 backgroundScript 接收器从 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;

希望这有帮助？

Answer 2

好的，我只需要将 manifest.json 中的 service-worker 中的 - 替换为 _，一切就都完美了！不过，我在 background.js、content.js 和 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"]
        }
      ]
  
}

Answer 3

manifest.js 中的 service_worker 而不是 service-worker 是问题所在

Alex Ander

2024-05-30