Отправить сообщение из popup.js в payload.js

ПРИМЕЧАНИЕ. ЭТО МОЕ ПЕРВОЕ ХРОМНОЕ РАСШИРЕНИЕ, И ЭТО УПРАЖНЕНИЕ, ЧТОБЫ ПОЛУЧИТЬ ЗНАКОМСТВО С РАЗРАБОТЧИВАЮЩИМИСЯ РАСШИРЕНИЯМИ.

Я делаю расширение Chrome, которое анализирует страницу. Когда пользователь нажимает кнопку расширения, payload.js выполняет синтаксический анализ страницы, и во всплывающем окне они могут выбрать параметр, который будет определять, как будет выводиться проанализированная информация.

Я хочу, чтобы после выбора параметра функция внутри payload.js выполняла и оценивала параметр и соответствующим образом форматировала проанализированную информацию. Наконец, он отправляет сообщение обратно в popup.js, содержащее отформатированную проанализированную информацию, и popup.js отображает его в текстовом поле внутри всплывающего окна.

Я могу нормально общаться с payload.js и popup.js, но, похоже, не могу сделать обратное.

Вот мой код и то, что я пробовал

popup.js

 // Inject the payload.js script into the current tab after the popout has loaded
    window.addEventListener('load', function (evt) {
        chrome.extension.getBackgroundPage().chrome.tabs.executeScript(null, {
            file: 'payload.js'
        });;
    });

// Listen to messages from the payload.js script and write to popout.html
chrome.runtime.onMessage.addListener(function (message) {
    document.getElementById('output').textContent = message;
});

document.addEventListener('DOMContentLoaded', function() {
        var opt = document.getElementById('generate_type');
    opt.addEventListener('click', function() {
            chrome.runtime.sendMessage(opt.value); //contains value of selection
    });
});

payload.js

console.info("executed");
var parsed_info = [];
parse_info();

function parse_info()
{
  //CODE that parses page
}

function generate_html()
{
  //CODE that generates html output in var html
  chrome.runtime.sendMessage(html);
}

function generate_reddit()
{
  //CODE that generates MARKUP for reddit in var reddit
  chrome.runtime.sendMessage(reddit);
}

function eval_opt(opt)
{
  //evaluate if we should call generate_reddit or generate_html based on opt
}

chrome.runtime.onMessage.addListener(function (message) {
    alert(message);
    eval_opt(opt);
});

manifest.json

{
    "manifest_version": 2,

    "name": "Hello World",
    "description": "A simple page-scraping extension for Chrome",
    "version": "1.0",
    "author": "@Gabriel",

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

    "permissions": [
        "tabs",
        "http://*/",
        "https://*/"
    ],
    "browser_action": {
        "default_icon": "logo.png",
        "default_popup": "popup.html"
    }
}

В вашем popup.js используйте chrome.tabs.sendMessage вместо chrome.runtime.sendMessage и попробуйте еще раз.

elegant-user 19.09.2018 07:39

... и укажите идентификатор вкладки в качестве первого параметра ^

wOxxOm 19.09.2018 08:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
129
0

Другие вопросы по теме

Повлияет ли использование jQuery со сценарием содержимого в расширении Chrome на страницы / сайты, уже использующие jQuery?
Можно ли создать расширение Google Chrome, которое может устанавливать сетевые настройки моего компьютера?
Кнопка cc видео HTML 5
Chrome показывает тонкую линию, если таблица имеет фоновое изображение TD
В чем причина того, что одно и то же приложение React APP отображает анимацию с разной скоростью в разных браузерах?
Высота строки сетки не вычисляется правильно в Chrome, если для параметра justify-content установлено значение space-between. Это ошибка?
Поддержка нелатинских символов в Chrome без головы
Использование RSelenium для открытия браузера Chrome, получение сообщения и ошибки «Невозможно создать новую службу: ChromeDriverService»
Как использовать профиль Chrome в Selenium Webdriver Python 3
Как выполнить функцию только при нажатии на перезагрузку, а не на отмену события beforeunload в angular 2+?