为什么我在单击 chrome 扩展程序时收到错误消息？

Question

我正在尝试创建一个简单的 chrome 扩展。我能够加载扩展程序，但是当我单击地址栏旁边的扩展程序图标时出现错误：Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist. 为什么？

我的manifest.json文件：

{
    "name" : "Test",
    "version" : "0.1",
    "permissions" : ["<all_urls>", "tabs", "activeTab"],
    "content_scripts" : [
        {
            "matches" : ["<all_urls>"],
            "js" : ["content.js"]
        }
    ],
    "background" : {
        "scripts" : ["background.js"]
    },
    "browser_action" : {
        "default_popup" : "popup.html"
    },
    "manifest_version" : 2
}

popup.html :

<html>
    <head>
        <link rel="stylesheet" href="popup.css">
        <script src="popup.js"></script>
    </head>
    <body>
        <button>Click</button>
    </body>
</html>

popup.js

chrome.tabs.query({active : true, currentWindow : true}, (tabs)=>{
    chrome.tabs.sendMessage(tabs[0].id, {action : "button_click"}, response =>{
        console.log(response);
    })
});

content.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse)=>{
    if(request.action === "button_click"){
        console.log("You clicked the button");
        sendResponse("success");
    }
})

popup.js 工作正常，因为它正在记录响应，但是 content.js returns undefined 响应。 background.js 仍然是空的，所以我排除了它。这是我第一次深入研究 chrome API，所以我真的很困惑为什么它不起作用。

Answer 1

内容脚本运行仅当页面首次在选项卡中加载时，因此当您在 chrome://extensions 页面上安装或重新加载扩展程序时，您还需要重新加载选项卡或 reinject the script explicitly. Also, by default content scripts run after DOMContentLoaded so it may be still pending injection if the page is still loading (you can tell it to run at document_start).

请注意，在您的用例中，您可能不需要自动注入的内容脚本，因此您可以删除 content_scripts 部分，从 permissions 中删除 <all_urls>，然后切换到programmatic injection 即使没有消息也可以传递数据。

为什么我在单击 chrome 扩展程序时收到错误消息？

Why am I getting an error when I click chrome extension?

javascript

api

google-chrome-extension