Обнаружение нажатия кнопки в форме browser_action расширения Google Chrome

Как можно так просто сделать так просто?

Все, что я хочу сделать, это нажать кнопку browser_action моего расширения, открыть форму с несколькими настройками, а затем нажать кнопку в форме, чтобы начать процесс.

Я не могу на всю жизнь получить нажатие кнопки в фоновом режиме для работы.

Я попытался получить пример http://developer.chrome.com/extensions/contentSecurityPolicy.html#H2-3 для работы, но это не так. Есть ли разница между правилами для браузера и фоном? Вот почему мой слушатель событий не стреляет?

Может ли кто-нибудь предоставить рабочий пример, пожалуйста?

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);
});

Ответы

Ответ 1

Ваша цель

  • Нажмите кнопку расширения
  • Открывается всплывающее окно расширения с элементами управления.
  • Выполнить script на текущей вкладке на основе элементов управления во всплывающем окне

Советы

  • Подумайте о фоновой странице в качестве концентратора. Он принимает входящие запросы из разных сценариев в вашем расширении Chrome, имеет повышенные права на выполнение таких действий, как междоменные запросы (если они определены в манифесте) и т.д.
  • Вы должны использовать манифест версии 2, поскольку версия 1 устарела.
  • Манифест версии 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

Ответ 2

Предыдущий ответ больше не работает, и мне потребовалось несколько часов, чтобы понять, как управлять работой. Я надеюсь, что это может заставить вас двигаться быстрее, чем меня.

Первый, вы последний метод в этой странице (внизу страницы) и он асинхронный, поэтому не забудьте дать ему обратный вызов. Код, который вам нужен, это smtg:

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

Второй, вам нужно понять одно, что заняло у меня некоторое время: если вы не используете фоновый html-страницу, вы не сможете увидеть какой-либо console.log в главном окне Chrome, Вам нужно перейти на страницу расширения (chrome://extensions) и нажать на ссылку расширения background page (да, у вас нет фоновой страницы, но Chrome дает вам фальшивый). Этот тип расширения (основанный на событиях) должен иметь manifest.json, содержащий smtg, как это:

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

Привет!