Question

我的项目是Chrome扩展程序，可执行以下操作。

按下扩展程序图标。
将出现弹出窗口（来自popup.html）
弹出窗口中有5个按钮。
当您单击四个按钮之一时，将执行一个javascript代码。
关闭弹出窗口。

因此，根据这篇文章的回答

Detect a button click in the browser_action form of a Google Chrome Extension

（迈克尔的巨大帮助）

此示例仅适用于一个按钮。只使用我的一个JavaScript代码创建它并且工作完美。但是，当涉及到所有的5个按钮时，我试图进行这种编码，但它根本不起作用（我刚接触javascript代码所以不讨厌）

以下是代码

的manifest.json

{
   "background": {
      "scripts": [ "background.js" ]
   },
   "browser_action": {
      "default_icon": "img/icon.png",
      "default_title": "TITLE",
      "default_popup": "popup.html"
   },
   "icons": {
      "128": "img/icon_128.png",
      "19": "img/icon19.png",
      "38": "img/icon38.png",
      "48": "img/icon_48_2.png"
   },
   "manifest_version": 2,
   "name": " NAME",
   "description": " DESCR ",
   "permissions": [ "activeTab" ],
   "version": "2.0"
}

POPUP.HTML

<html>
    <head>
        <script src="popup.js"></script>
        <style type="text/css" media="screen">
            body { min-width:250px; text-align: center; }
            #click-me-l { font-size: 20px; }
            #click-me-f { font-size: 20px; }

        </style>
    </head>
    <body>
        <button id='click-me-l'>Click1</button>
        <button id='click-me-f'>Click2</button>

    </body>
</html>

POPUP.JS

    function clickHandler(e) {
        chrome.extension.sendMessage({directive: "popup-click-l"}, function(response) {
            this.close(); // close the popup when the background finishes processing request
        });
    }


 document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('click-me-l').addEventListener('click', clickHandler);

    })


     function clickHandler(e) {
        chrome.extension.sendMessage({directive: "popup-click-f"}, function(response) {
            this.close(); // close the popup when the background finishes processing request
        });
    }


document.addEventListener('DOMContentLoaded', function () {
        document.getElementById('click-me-f').addEventListener('click', clickHandler);

    })

BACKGROUND.JS

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) {
        switch (request.directive) {

             case 1 "popup-click-l":
            // execute the content script
            chrome.tabs.executeScript(null, { // defaults to the current tab
                file: "script1.js", // script to inject into page and run in sandbox
                allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
            });

        case 2 "popup-click-f":
            // execute the content script
            chrome.tabs.executeScript(null, { // defaults to the current tab
                file: "script2.js", // script to inject into page and run in sandbox
                allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
            });
            sendResponse({}); // sending back empty response to sender
            break;
        default:
            // helps debug when request directive doesn't match
            alert("Unmatched request of '" + request + "' from script to background.js from " + sender);
        }
    }
);

因此链接中的代码只有1个按钮才能正常工作。在这个例子中，我试图让它适用于2个按钮，但我无法找到我做错了什么。如果有人有任何想法，我会很感激。

非常感谢您的时间!!!

（更新2.更新了2个按钮的代码，但没有工作。）

Answer 1

您要定义clickHandler两次，所以只有第二个才算数。一个解决方案是：

function clickHandler(e) {
    chrome.extension.sendMessage({"directive": e.target.id}, function(response) {
        this.close(); // close the popup when the background finishes processing request
    });
}

一般来说，你是在重复自己。您可以将DOMContentLoaded个事件合并为一个：

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('click-me-l').addEventListener('click', clickHandler);
    document.getElementById('click-me-f').addEventListener('click', clickHandler);
})

但更好的方法是将所有按钮放入一个数组中，以便现在popup.js：

function clickHandler(e) {
    chrome.extension.sendMessage({"directive": e.target.id}, function(response) {
        this.close(); // close the popup when the background finishes processing request
    });
}

document.addEventListener('DOMContentLoaded', function () {
    var buttons = document.getElementsByTagName("button");
    for ( var i = 0 ; i < buttons.length ; i++ ) {
        buttons[i].addEventListener('click',clickHandler);
    }
})

（我建议您使用button { font-size: 20px; }而不是五个单独的ID。）

最后，您的switch声明有问题。一旦你开始一个案例，你将继续前进，直到你到达break，这样case "popup-click-l"就会遇到这两种情况。对于每种情况，您可以有一个单独的executeScript，但更好的方法是根据案例分配给fileName，并在最后进行单次注入。或者最重要的是让javascript对象定义哪些文件与哪些ID一起使用，以便background.js现在是：

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) {
        var injected = {
            "click-me-l": "script1.js",
            "click-me-f": "script2.js"
        };
        chrome.tabs.executeScript(null, {
            "file": injected[request.directive],
            "allFrames": true
        });
        sendResponse({});
    }
);

从根本上说，这回到了我在评论中提到的一点：浏览器扩展是学习javascript的一种不好的方式，因为你在同时学习两个不同的东西。您对switch，{}的困难以及通常遵循代码的问题是一个javascript问题。没有看到控制台何时告诉您语法错误更多的是浏览器扩展问题。而你最大的问题是你没有看到哪个错误。

使用弹出式HTML格式的Chrome扩展程序解决方法

1 个答案: