WebExtensions до chrome.runtime.onMessage.addListener не доходят сообщения

105

13 июня 2019, 05:00

Пытаюсь заставить общаться свой testScript.js с background.js. sendMessage выполняется в background, в его колбэк падает сообщение об ошибке следующего содержания:

ERROR: Could not establish connection. Receiving end does not exist.

Перебрал уже все варианты, найденные в интернете, помогите, плиз, Как заставить chrome.runtime.onMessage.addListener в testScript.js принимать отправленные сообщения? Код ниже:

manifest.json

{
  "name": "Zendesk penetration into CRM",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Search user in crm by email from zendesk",
  "permissions": [ "activeTab", "https://*.zendesk.com/" ],
  "externally_connectable": {
    "matches": [
      "https://*.zendesk.com/*"
    ]
  },
  "browser_action": {
    "default_title": "ZEN + CRM"
 },
  "content_scripts": [
    {
      "matches": [ "https://*.zendesk.com/*" ],
      "js": [ "testScript.js" ],
      "run_at": "document_end"
    }
  ],
  "background": {
    "page": "background.html"
  },
  "web_accessible_resources": [ "zen-crm.js" ],
  "content_security_policy": "script-src 'self' https://apis.google.com    'sha256-Aj3lF3yqOWt2EKSfVUS8UgPrU+bPlrtNUrAGWX5ONQk='; object-src 'self'"
}

background.js

// Скрипт запускается только после клика по иконке расширения на панеле Хрома
chrome.browserAction.onClicked.addListener(() => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', chrome.extension.getURL('zen-crm.js'));
    xhr.onload = () => {
        if (xhr.status === 200) {
          chrome.runtime.sendMessage({ status: 'sended', mess: xhr.responseText }, response => {
              if (chrome.runtime.lastError) {
                  // Вот здесь я и получаю ошибку
                  console.error(`(Zen + CRM) Whoops.. ${chrome.runtime.lastError.message}`);
              } else {
                  console.log(`message from content: ${JSON.stringify(response)}`);
              }
          });
        }
        else {
            console.eror(`(Zen + CRM) Request failed.  Returned status of ${xhr.status}`);
        }
    };
    xhr.send();
});

testScript.js

chrome.runtime.onMessage.addListener((req, sender, response) => {
    // Вот эта консоль не выводится
    console.warn('Somthing')
    if (req.status == 'sended') {
      const script = document.querySelectorAll('script[binomo-crm]')[0]
          || document.createElement("script");
      script.setAttribute("type", "text/javascript");
      script.setAttribute("binomo-crm", "");
      // script.innerHTML = xhr.responseText;
      document.getElementsByTagName("head")[0].appendChild(script);
      document.getElementsByTagName("body")[0].setAttribute("onLoad", "initPeneration();");
      response({ result: 'Script was added'})
    } else {
        console.warn(req)
        response({ result: 'It is all shit' })
    }
    // Если верить документации, нужно для асинхронной работы сообщений
    return true;
});

zen-crm.js

// Файл для проверки
function initPeneration() {
    getEmail();
    openCrm();
}
function getEmail() {
    console.warn(123123);
}
function openCrm() {
    console.warn('pojsldjnvc')
}

background.html

<html>
  <head></head>
  <body>
    <script src="background.js"></script>
  </body>
</html>

Answer 1

Вы отправляете сообщение в контент-скрипт, и для этого необходимо использовать метод chrome.tabs.sendMessage вместо chrome.runtime.sendMessage.

UPDATE
Небольшое дополнение - чтобы использовать chrome.tabs.sendMessage, нужно знать id таба, который отправляет сообщение. Так как сообщение может уходить и с нескольких табов, нам нужно получить массив этих самых табов с помощью метода chrome.tabs.query. В результате скрипт будет выглядеть следующим образом

chrome.browserAction.onClicked.addListener(() => {
  chrome.tabs.query({ active: true, url: '*://*.zendesk.com/*' }, tabs => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', chrome.extension.getURL('zen-crm.js'));
    xhr.onload = () => {
      if (xhr.status === 200) {
        chrome.tabs.sendMessage(
          tabs[0].id,
          { status: 'new', mess: xhr.responseText },
          response => {
            void chrome.runtime.lastError;
          });
      } else {
          console.eror(`(Zen + CRM) Request failed.  Returned status of ${xhr.status}`);
      }
    };
    xhr.send();
  });
});