Question

我正在尝试制作一个google-chrome扩展程序，该扩展程序从网页中提取所选文本并在弹出窗口中显示。我已经阅读了google-chrome文档并且已经关注了很多问题，但我无法解决此问题。所选文本无法发送到background.js，而是发送到popup.js。

的manifest.json：

    {
    "name": "Wordomania",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Displays word on popup",
    "icons": {
        "16": "images/W.png"
    },
    "background": {
        "scripts": [
            "jquery-3.3.1.js",
            "background.js"
        ],
        "persistent": false
    },
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "background",
        "tabs",
        "http://*/*",
        "https://*/*",
        "activeTab"
    ],
    "browser_action": {
        "default_icon": "images/W.png",
        "default_title": "Wordomania"

    }
}

background.js：

    chrome.browserAction.onClicked.addListener(function (tab) {
    console.log('Extension button clicked');
    chrome.tabs.sendMessage(tab[0].id, {
        action: 'sendWord'
    }, function (wordObject) {
        console.log('Word received');
        let obj = {
            word: wordObject.word,
            from: 'back'
        };
        chrome.runtime.sendMessage(obj, function (status) {
            console.log(status);
        });
    });
});

content.js：

    function getSelectionText() {
    let text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type !== 'Control') {
        text = document.selection.createRange().text;
    }
    return text;
}

    chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    if (message.action === 'sendWord') {
        let text = getSelectionText();
        sendResponse({word: text});
    }
});

popup.html：

    <!DOCTYPE html>
<html>
<head>
    <title>Wordomania</title>
    <script src="popup.js"></script>
</head>
<body>
<h1><p id="word"></p></h1>
<div id="body-of-popup"></div>
</body>
</html>

需要帮助！

Answer 1

基本上，您需要对方法进行一些更改。因为，我们一次只能有一个事件与browserAction相关联，弹出或chrome.browserAction.onClicked。在您的情况下，您有一个相关的弹出窗口，因此您无法使用chrome.browserAction.onClicked。

但是你仍然可以使用下面的代码实现你想要的目标。

//在popup.js中添加以下代码

document.body.onload = function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {greeting: "sendWord"}, function(response) {
            alert(response.word);
        });
    });
};

让您的content.js文件保持原样。

的manifest.json

 "browser_action": {
        "default_icon": "images/W.png",
        "default_popup": "popup.html",
        "default_title": "Wordomania"

    }

希望这能解决您的问题。

内容脚本，background.js和popup.js之间未交换的消息

1 个答案: