您的目标

Question

如此简单的事情怎么这么不可能？

我想要做的就是点击我的扩展程序的browser_action按钮，打开一个包含几个设置的表单，然后单击表单上的按钮开始一个过程。

我不能为我的生活让按钮点击后台窗体工作。

我试图让http://developer.chrome.com/extensions/contentSecurityPolicy.html#H2-3的例子起作用，但事实并非如此。 browser_action和背景的规则之间有区别吗？这就是我的事件监听器没有解雇的原因吗？

有人可以提供一个有效的例子吗？

的manifest.json：

{
    "name": "Convert",
    "version": "0.1",
    "description": "Converts the current page",
    "browser_action": {
        "default_icon": "exticon.png",
        "default_popup": "background.html"
    },
    "content_scripts": [{
        "matches": ["*://*/*"],
        "js": ["contentscript_static.js"]
    }],
    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ]
}

background.html：

<html>
    <head>
        <title>Converter</title>
        <script src="background.js"/>
        <script>
        // Initialize the localStorage
        if (null == localStorage["htmlImport"])
           localStorage["htmlImport"] = false;

        // Called when the user clicks on the browser action icon.
        chrome.browserAction.onClicked.addListener(function(tab) {
            console.log('in listener');
                 // execute the content script
                 chrome.tabs.executeScript(null, 
                    {
                       file: "contentscript.js",
                       allFrames: true   // It doesn't work before 4.0.266.0.
                    });
              });

        // Listen to the requests from the content script
        chrome.extension.onRequest.addListener(
              function(request, sender, sendResponse)
              {
                 switch (request.name)
                 {
                    case "getPreferences":
                       sendResponse(
                          {
                             prefIgnoreLinks : localStorage["htmlImport"]
                          });
                       break;

                    case "PressShortcut":
                       sendResponse({});  // don't response.

                       // execute the content script
                       chrome.tabs.executeScript(null, 
                          {
                             file: "contentscript.js",
                             allFrames: true   // It doesn't work before 4.0.266.0.
                          });

                       break;

                    default:
                       sendResponse({});  // don't response.
                       break;
                 }
              });


        </script>
    </head>
    <body style='min-width:250px;'>
        Link depth: <input type='text' name='depth' value='3'/><br/>
        <input type='checkbox' name='changedomain'>Include external domains</input><br/>
        <button id='beginConvert'>Convert</button>
    </body>
</html>

background.js：

function awesome() {
  // Do something awesome!
  console.log('awesome')
}
function totallyAwesome() {
  // do something TOTALLY awesome!
  console.log('totallyAwesome')
}

function awesomeTask() {
  awesome();
  totallyAwesome();
}

function clickHandler(e) {
  setTimeout(awesomeTask, 1000);
}
// Add event listeners once the DOM has fully loaded by listening for the
// `DOMContentLoaded` event on the document, and adding your listeners to
// specific elements when it triggers.
//document.addEventListener('DOMContentLoaded', function () {
//  document.querySelector('button').addEventListener('click', clickHandler);
//});

// Add event listeners once the DOM has fully loaded by listening for the
// DOMContentLoaded event on the document, and adding your listeners to
// specific elements when it triggers.
document.addEventListener('DOMContentLoaded', function () {
//  console.log('event listener for button connected to beginConversion()');
    //document.querySelector('button').addEventListener('click', beginConversion);
    document.getElementById('beginConvert').addEventListener('click', clickHandler);
});

Answer 1

您的目标

点击扩展程序按钮
将打开扩展弹出窗口，其中包含控件
根据扩展程序弹出窗口中的控件

提示

将后台页面视为控制中心。它接收来自Chrome扩展程序中各种脚本的传入请求，提升了执行跨域请求（如果在清单中定义）等操作的权限，等等。
您应该使用manifest version 2，因为版本1已弃用。
Manifest版本2不允许内联脚本，因此需要将所有脚本作为自己的文件加载。

实施例

的manifest.json

{
    "name": "Stackoverflow Popup Example",
    "manifest_version": 2,
    "version": "0.1",
    "description": "Run process on page activated by click in extension popup",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "tabs", "http://*/*", "https://*/*"
    ]
}

background.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        switch (request.directive) {
        case "popup-click":
            // execute the content script
            chrome.tabs.executeScript(null, { // defaults to the current tab
                file: "contentscript.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);
        }
    }
);

popup.html

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

popup.js

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

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

contentscript.js

console.log("chrome extension party!");

运行示例屏幕截图

点击扩展按钮，浏览器窗口打开到exampley.com

Clicking extension button with browser window opened to exampley.com

点击“Click Me！”后扩展弹出窗口中的按钮

After clicking 'Click Me!' button in extension popup

zip

中的示例文件

http://mikegrace.s3.amazonaws.com/stackoverflow/detect-button-click.zip

Answer 2

之前的答案不再适用了，我花了几个小时来了解如何管理一项工作。我希望这能让你比我更快。

首先，您是this页面中的最后一个方法（位于页面底部）并且它是异步的，所以请记住给它一个回调。您需要的代码是这样的smtg：

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.query({'active': true}, getActiveTabCallback);
});

第二次，您需要了解一件花了我一些时间的事情：如果您没有使用背景html页面，您将无法在主页中看到任何console.log Chrome窗口。您需要转到扩展程序页面chrome://extensions），然后点击您的扩展程序background page链接（是的，您没有后台页面，但Chrome会为您提供虚假页面）。这种类型的扩展（基于事件）应该包含包含smtg的manifest.json，如下所示：

"background": {
    "scripts": ["background.js"],
    "persistent": false
},

问候！

检测Google Chrome扩展程序的browser_action表单中的按钮点击

2 个答案:

您的目标

提示

实施例

的manifest.json

background.js

popup.html

popup.js

contentscript.js

运行示例屏幕截图

zip