Question

我正在构建一个简单的chrome扩展：的manifest.json

{

    "name": "Hello World",
    "version": "1.0",
    "manifest_version": 2,
    "background": {
        "scripts": ["js/background.js"]
    },
    "description": "My First Chrome Extension",
    "browser_action": {

        "default_icon": "icon.png",
        "default_popup": "popup.html"

    },
    "permissions": ["tabs", "activeTab", "<all_urls>"],
    "content_scripts": [
        {
            "matches": ["http://*/*"],
            "js": ["js/script.js"]
        }
    ]

}

background.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
        console.log(response.farewell);
    });
});

scripts.js中

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        console.log(sender.tab ?
        "from a content script:" + sender.tab.url :
            "from the extension");
        if (request.greeting == "hello") {
            sendResponse({farewell: "goodbye"});
            document.write(request.greeting);
        }
    });

popup.html

<script src="js/script.js"></script>

新的按钮正确显示在我的Chrome窗口中，但是当我点击它时会创建一个空对话框，虽然我希望它能说“你好”。有什么建议吗？

Answer 1

如果您在清单中设置了"default_popup": "popup.html"，Chrome会打开一个窗口来显示您的html页面。所以从清单中删除这一行（不需要popup.html文件），在background.js中执行以下操作：

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
            console.log(response.farewell);
        });
    });
});

Answer 2

虽然我希望它能说“你好”
，但会创建一个空白对话框

您正在从内容脚本调用document.write，而不是弹出代码 - 因此它正在写入实际的活动选项卡，而不是弹出窗口。

要在弹出窗口中显示内容，您需要从弹出窗口的代码中与其document进行交互。

简单的镀铬扩展

2 个答案: