0

I want to do the following in this order
 1. User clicks button (id='copyDetails') in the popup window
2. Text from specific elements (inc. name field) that are on the users page are stored in a hash and sent to background.js
3. The hash from step 2 is stored in chrome storage
4. Get the name value (which is a key in the hash from step 2) and insert it into element (id='firstName') in popup

The following code does all of the above steps, but in the wrong order (currently does it step 1, 4, 2, 3)

In 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.log("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.log("Step 2 - send message");
    });
  });

  chrome.storage.sync.get(['key'], function(result) {
    chrome.extension.getBackgroundPage().console.log("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
}

Here is the background.js file

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

I think I need to use a callback on the executeScript, but after a few hours of playing around with it I can't get it working.

Definition of done = I press the button (id='copyDetails') and in the background console I see printed Step 1, 2, 3, 4 in that order.

In case you need, 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>

And my 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
}
Robert Faldo
  • 11
  • 3
  • When a(), b(), c() are async you have to chain them to ensure the correct order. You can't do a();b();c() and hope the order is preserved. It's easiest to use WebExtensions polyfill and async/await keywords. – wOxxOm Oct 27 '18 at 11:54
  • Thank you for your response - I can't seem to get the WebExtensions polyfill to work. I don't have a package.json and I'm confused where I need to include the file (and if it's just 1 file) - and just to check, it's https://github.com/mozilla/webextension-polyfill ? – Robert Faldo Oct 27 '18 at 14:33
  • See [basic setup](https://github.com/mozilla/webextension-polyfill#basic-setup). – wOxxOm Oct 27 '18 at 14:42

0 Answers0