Обходное решение Chrome Extension с popup html

Мой проект - расширение Chrome, которое будет выполнять следующее.Обходное решение Chrome Extension с popup html

Нажмите на значок расширения.
Появится всплывающее окно (из 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-х кнопок, но не работает.)

источник

2015-03-10 Anonymous

Предупреждение: вы отредактировали свой вопрос таким образом, чтобы аннулировать существующий ответ. В общем, вы хотите этого избежать. – Xan

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

_Вы, вероятно, имеете в виду «начало». Это не не по теме, это просто рискованное редактирование, если вы делаете ответ показанным некорректным, пока это было. Если вы очистите его с автором ответа, тогда проблем нет. – Xan

Вы задающие 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; } в вашем стиле вместо пяти отдельных идентификаторов.)

И, наконец, ваш switch заявление неисправен. После того, как вы начнете дело, вы продолжаете идти, пока не дойдете до break, так что case "popup-click-l" попадет в оба варианта. У вас может быть отдельный executeScript для каждого случая, но даже лучше было бы назначить fileName на основе футляра и иметь одну инъекцию в конце. Или лучше всего было бы иметь JavaScript Object определить, какие файлы идут с какими идентификаторами, так что 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. Не видя, когда консоль сообщает о синтаксических ошибках, это больше проблема с расширением браузера. И ваша самая большая проблема заключается в том, что вы не видите, какая именно ошибка.

источник

2015-03-10 15:32:48 Teepeemm

Я полагаю, что уродливым способом исправить ситуацию было бы переименование одной из ваших функций 'clickHandler'. Но вам не нужно пять отдельных определений функций, которые все делают одно и то же. – Teepeemm

Спасибо за ваш ответ, но ваш ответ мне не помог. Его правда, что у меня есть 2 раза clickHandler, и я проверил ваш 1-й код для этого. Но все равно даже не работал только на 1 кнопку. предположим, что что-то не так на «background.js», но и ваш код не заставил работать 2 кнопки. Но почему «случай» - проблема? в моей логике я говорю: «В случае« popup-click-l »сделайте это, в случае« popup-click-f »сделайте это» .... почему его проблема здесь и она поражает все кнопки ??? –

Я также пробовал случай 1 и случай 2 ... все еще не работал. –

Обходное решение Chrome Extension с popup html

ответ

Смежные вопросы