Пример прохождения сообщения из Chrome Extensions

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

Можете ли вы дать несколько советов о том, как передать простое сообщение и просмотреть его в журнале консоли или в сообщении?

manifest.json

{
  "manifest_version": 2,

  "name": "msg-test",
  "description": "message test",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

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

  "content_scripts": [{
     "matches": ["http://*/*","http://www.site.com/*"],
     "js": ["content.js"],
     "run_at": "document_end"
  }],  

  "permissions": [
    "tabs",
    "http://*/*"
  ]  
}

background.js

chrome.runtime.onConnect.addListener(function(port){
  port.postMessage({greeting:"hello"});
});

content.js

var port = chrome.runtime.connect({name:"content"});
port.onMessage.addListener(function(message,sender){
  if(message.greeting === "hello"){
    alert(message.greeting);
  }
});

popup.js

window.onload = function() {

    document.getElementById('btn2').onclick = function() {
       alert("button 2 was clicked");
     }; 

    document.getElementById('btn1').onclick = function() {
        alert("button 1 was clicked");
     }; 


}

* Примечание. В этом примере содержимое script будет срабатывать, когда страница будет соответствовать manifest.json и появится окно предупреждения.

Ответ 1

Во-первых, я не пропускал бы сообщение между вашим всплывающим окном и вашим контентом script. Я бы послал сообщение между вашей фоновой страницей и вашими скриптами контента. Ваша всплывающая страница должна использоваться только для отображения некоторых ui для взаимодействия с вашим приложением.

С учетом сказанного я покажу вам способ передачи сообщений между вашим фоном и вашим контентом script.

В вашем контенте script:

//This line opens up a long-lived connection to your background page.
var port = chrome.runtime.connect({name:"mycontentscript"});
port.onMessage.addListener(function(message,sender){
  if(message.greeting === "hello"){
    alert(message.greeting);
  }
});

На вашей фоновой странице (возможно, всплывающее окно, но я не рекомендую его)

chrome.runtime.onConnect.addListener(function(port){
  port.postMessage({greeting:"hello"});
});

Вот последовательность событий, которые будут иметь место:

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

В фоновом режиме script или в контенте script вы можете прослушивать сообщения с помощью port.onMessage.addListener(). при условии, что порт находится в зоне действия. Использование портов намного проще в использовании и позволяет простое двухстороннее общение!

Edit:

Если вы хотите передать сообщения на свою фоновую страницу из своего всплывающего окна script, используйте тот же самый метод:

var port   =   chrome.runtime.connect({name: "popup-port"});
port.postMessage({status:"poppedup"});

Изменить 2:

Чтобы перевести пользователя на новую страницу, сделайте следующее:

function navigateToPage(url){
    chrome.tabs.query({url: url}, function(tabs) {
        var tab = tabs[0];
        return tab ? chrome.tabs.update(tab.id, {active:true}) : chrome.tabs.create({url: url});
    });
}
});

Что делает эта функция, она проверяет, есть ли вкладка с URL-адресом, к которому вы хотите перейти, если есть, переключитесь на него, иначе создайте вкладку с этим URL-адресом и перейдите к ней.