Порядок выполнения в расширении Chrome, использующем executeScript и SendMessage

Я хочу сделать следующее в этом порядке 1. Пользователь нажимает кнопку (id = 'copyDetails') во всплывающем окне
2. Текст из определенных элементов (включая поле имени), которые находятся на странице пользователя, хранится в хэше и отправляется в background.js
. 3. Хеш из шага 2 хранится в Chrome-хранилище
. 4. Получите значение имени (которое является ключом в хэше из шага 2) и вставьте его в элемент (id = 'firstName') во всплывающем окне.

Следующий код выполняет все вышеперечисленные шаги, но в неправильном порядке (в настоящее время это шаги 1, 4, 2, 3).

В popup.js

let copyDetails = document.getElementById('copyDetails');

// This gets the most recently stored name and inserts it into the firstName element (works fine) 
chrome.storage.sync.get(['key'], function(result) {
  document.getElementById('firstName').innerHTML = result.key.firstName;
});

copyDetails.onclick = function(element) {
  chrome.extension.getBackgroundPage().console.info("Step 1 - User clicks button");

  // the executeScript gets the DOM from the users current page, and extracts the relevant information for the different customer details (inc. name)
  chrome.tabs.executeScript({
    code: '(' + modifyDOM + ')();'
  }, (results) => {
    const customerDetails = results[0];

    chrome.runtime.sendMessage({customerDetails: customerDetails}, function(response) {
      chrome.extension.getBackgroundPage().console.info("Step 2 - send message");
    });
  });

  chrome.storage.sync.get(['key'], function(result) {
    chrome.extension.getBackgroundPage().console.info("Step 4 - retrieve name from storage and insert it into popup html element");
    document.getElementById('firstName').innerHTML = result.key.firstName;
  });
};

function modifyDOM() {
    const customerDetails = {
      firstName: document.getElementById('customer_first_name').innerHTML,
      lastName: document.getElementById('customer_last_name').innerHTML,
      email: document.getElementById('customer_email_address').innerText.split('Generate Email')[0].slice(0, -1),
      postcode: document.getElementById('customer_uk_postcode').innerHTML
    }
    return customerDetails
}

Вот background.js file

  function (request, sender, sendResponse) {
    chrome.storage.sync.set({key: request.customerDetails}, function() {
       chrome.extension.getBackgroundPage().console.info("Step 3 - save details in a hash in storage");
     });
  });

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

Определение done = я нажимаю кнопку (id = 'copyDetails'), и в фоновой консоли я вижу напечатанные шаги 1, 2, 3, 4 в указанном порядке.

В случае необходимости, popup.html

<!DOCTYPE html>
  <html>
    <head>
      <style>
        button {
          height: auto;
          width: auto;
          outline: none;
        }
      </style>
    </head>
    <body>
      <button id = "copyDetails">Copy Details</button>
      <div class='details-button'>First Name: <button id = "firstName">N/A</button></div>
      <script src = "popup.js"></script>
    </body>
  </html>

И мой manifest.json

{
    "name": "Copy customer details",
    "version": "1.0",
    "description": "Copy customer details from an rfq with the click of a button!",
    "permissions": ["contextMenus", "activeTab", "declarativeContent", "storage"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html"
    },
    "manifest_version": 2
}

Когда a (), b (), c () являются асинхронными, вы должны объединить их в цепочку, чтобы обеспечить правильный порядок. Вы не можете сделать a (); b (); c () и надеяться, что порядок сохранится. Проще всего использовать ключевые слова WebExtensions polyfill и async / await.

— 27.10.2018 13:54

Спасибо за ответ - кажется, мне не удается заставить работать полифилл WebExtensions. У меня нет package.json, и я не понимаю, где мне нужно включить файл (а если это всего один файл) - и просто для проверки, это github.com/mozilla/webextension-polyfill?

— 27.10.2018 16:33

См. базовая настройка.

— 27.10.2018 16:42

javascript google-chrome-extension asynccallback

27.10.2018 13:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

176

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

Переменная не определена после включения сторонней библиотеки в расширение Chrome

CSS-инъекция расширения Chrome с сохраненными пользователем значениями?

Расширение Chrome - как песочница получает доступ к данным из хранилища?

Как заставить мое расширение Chrome работать во всех браузерах?

Puppeteer-web: «Кукольник - не конструктор»

Удалить расширение неактивной учетной записи разработчика Google из Интернет-магазина Chrome

Uint8Array работает слишком медленно в Chrome

Расширение Chrome React

Связанное Webextension не видит JQuery

Геолокация W3C возвращает кешированные координаты

Порядок выполнения в расширении Chrome, использующем executeScript и SendMessage

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

Похожие вопросы