带有弹出 html 的 Chrome 扩展解决方法答案

【问题标题】：Chrome Extension workaround with popup html带有弹出 html 的 Chrome 扩展解决方法
【发布时间】：2015-05-11 17:12:30
【问题描述】：

我的项目是一个 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 个按钮的代码，但不起作用。）

【问题讨论】：

警告：您以一种使现有答案无效的方式编辑了您的问题。一般来说，您希望避免这种情况。
@Xan 我对 Teepeemm 说我会编辑它......我不是故意这样做的，所以答案将是题外话。我只是从我的问题的乞求开始。
你的意思可能是“开始” 这不是题外话，如果你让答案看起来不正确，这只是一个冒险的编辑。如果您与答案的作者一起清除它，那么没有问题。
是的，这是一个错字。无论如何，他的代码让我有点困惑，因为它们似乎都不适用于我的问题。
由于您的目标是五个按钮，我的建议是回到尝试两个按钮的原始版本。让一个按钮起作用，然后问“我如何获得更多”似乎不是一个有趣的问题。

标签： javascript google-chrome google-chrome-extension

【解决方案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 问题。看不到控制台何时告诉您语法错误更多的是浏览器扩展问题。而你最大的问题是你没有看到哪个错误是哪个。

【讨论】：

我想解决问题的一种丑陋方法是重命名您的 clickHandler 函数之一。但是你不应该需要五个单独的函数定义来做同样的事情。
感谢您的回复，但您的回答对我帮助不大。确实，我有两次 clickHandler 并且我为此检查了您的第一个代码。但仍然只为 1 个按钮工作。猜测“background.js”上还有其他问题，但您的代码也没有使 2 个按钮工作。但是为什么“案例”有问题？在我的逻辑中，我说“在“popup-click-l”的情况下这样做，在“popup-click-f”的情况下这样做”....
我不确定这些事件会出现什么问题（javascript 也不是我的强项）。您的案例逻辑是错误的，因为它说“在“popup-click-l”的情况下执行此操作，然后执行“popup-click-f”的内容。当您执行一个案例时，您会继续执行案例，直到您点击 break .
我发现我的两个拼写错误：(1) addEventListenter 拼写错误，(2) injected' 的键现在与 id 一致。该扩展现在对我有用。但是，如果您在遵循代码时遇到问题，则可能需要查找 javascript 教程。浏览器扩展是学习 javascript 的坏方法，因为您还必须同时学习扩展 api。
@SteliosM。我已经明确说明了 javascript 文件中的内容。您的清单和 html 将按原样工作。不过，我更愿意回滚到您的原始帖子，因为您最近的编辑使其与我的答案不一致（甚至与它本身不一致，例如，clickHandler2）。