раскрывающиеся меню и при передаче сообщений (js chrome расширение (

Question

У меня есть раскрывающееся меню, и его значение определяет поведение моего расширения chrome. Мне нужно использовать его значение в моем файле content. js, и, следовательно, мне нужно передать его значение из всплывающего окна. js в content. js. Об этом есть несколько подобных сообщений, но, похоже, ни один из них не решил мою проблему. Ниже мой код, а закомментированные части - это разные версии моих попыток. Пожалуйста, дайте мне знать, что я делаю не так или что мне нужно сделать по-другому.

всплывающее окно. html

<select id="language-dropdown" data-placeholder="Choose a Language...">
  <option value="English">English</option>
  <option value="French">French</option>
  <option value="German">German</option>
  <option value="Spanish">Spanish</option>
</select>

всплывающее окно. js

/*chrome.runtime.onMessage.addListener( function ( msg, sender, sendResponse ) {
    if ( ( msg.from === 'content' ) && ( msg.action === 'getLanguage' ) ) {
        var language = document.getElementById("language-dropdown").value;
        //var language = $('#language-dropdown').find(":selected").text();
        sendResponse({ language: language }); 
        return true;
    } else {
       return false;
    }
});*/

chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) {
    if ((request.from === 'content') && (request.action === 'getLanguage')) {
        sendResponse({
            language: document.getElementById("language-dropdown").value });
    };
});

содержимое. js

var word_dict;

/*chrome.runtime.sendMessage({ from: 'content', activate: true });
setTimeout(function () {
    chrome.tabs.sendMessage(tabs[0].id, { from: 'content', action: 'getLanguage' }, languageDict);
}, 100);*/

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, { from: 'content', action: 'getLanguage' }, languageDict);
});

function languageDict (language) {
    var lang = language.language;
    console.log('Language:' + language);
    if (lang === "English") {
        word_dict = window.english_word_dict;
    } else if (lang === "German") {
        word_dict = window.german_word_dict;
    } else {
        Error; //other languages must be filled in here once available
    }
}

/*var ddm = document.getElementById("language-dropdown");
//var selectedLanguage = ddm.options[ddm.selectedIndex].value;

if (ddm.value === "English") {
    word_dict = window.word_dict;
  } else if (ddm.value === "German") {
    word_dict = window.german_word_dict;
} else {
    Error;
}*/

Answer 1

• Скрипты содержимого не могут использовать chrome.tabs API: разрешены только chrome.runtime, chrome.i18n, chrome.storage API.

• chrome.tabs.sendMessage цель - отправить сообщение на скрипт содержимого, поэтому он должен может использоваться во всплывающем скрипте browser_action или в фоновом скрипте.

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

Решение двоякое:

1. сохранить выбор языка в chrome.storage, чтобы сценарий содержимого использовал его при загрузке веб-страницы.

2. прослушайте событие хранилища onChanged в сценарии содержимого и примените новый выбор языка на всех вкладках, где запускаются экземпляры сценария содержимого.

manifest. json:

"permissions": ["storage"]

всплывающее окно. html:

  <script src=popup.js></script>
</body>

всплывающее окно. js:

document.getElementById('language-dropdown').onchange = function () {
  chrome.storage.sync.set({language: this.value});
};

содержимое. js:

let language = 'English';
chrome.storage.sync.get('language', data => {
  renderLanguage(data.language);
});
chrome.storage.onChanged.addListener(changes => {
  if (changes.language) {
    renderLanguage(changes.language.newValue);
  }
});
function renderLanguage(lng) {
  if (!lng || lng === language) return;
  language = lng;
  // update DOM using the new language
  // ..............
}