Как передать функцию контент скритпу из backgound.js?

Рейтинг: 0Ответов: 1Опубликовано: 19.01.2023

Я разрабатываю расширение для chrome, и когда я пытаюсь передать функцию контент скрипту из background.js, я получаю ошибку:

Uncaught (in promise) TypeError: response.sayHi is not a function

Файл background.js:

function sayHi() {
  alert('hi')
}

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "GET_CURRENT_TAB") {
    sendResponse({ sayHi: sayHi });
  }
});

Файл content-script.js:

(async () => {
  const response = await chrome.runtime.sendMessage({
    action: "GET_CURRENT_TAB",
  });

  response.sayHi();
})();
javascript chrome-extension расширения
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

background.js:

let port = chrome.runtime.connect({ name: "my-channel" });

function sayHi() {
  alert('hi');
}

port.onMessage.addListener(function (msg) {
  if (msg.action === "GET_CURRENT_TAB") {
    port.postMessage({ sayHi });
  }
});

content-script.js:

let port = chrome.runtime.connect({ name: "my-channel" });

port.postMessage({ action: "GET_CURRENT_TAB" });

port.onMessage.addListener(function (msg) {
  msg.sayHi();
});

Есть ещё один способ - использовать chrome.storage API, для хранения и извлечения пары ключ-значение:

background.js

chrome.storage.local.set({'sayHi': sayHi}, function() {
  console.log('Function is set');
});

content-script.js

chrome.storage.local.get(['sayHi'], function(result) {
  let func = result.sayHi;
  func();
});