Demo

Description

• When clicking on the default top right iCloud menu, the image selector will not open when clicking the icon in the bottom right. Instead the default top right iCloud menu opens.

Blocks

• Blocking progress to create a second dropdown to allow you to input your own custom image URL.

Fix

• I don't think I'll be fixing this bug as such, instead I believe I will be rewriting the frontend in JS instead of plain CSS.

Hey bud, I saw you pinged me in another post, so I peeked through some code. Since you're going to be doing some changes with your JS, I'd probably start with trying to wean yourself off of jQuery (or kill it entirely). Also, in the code snippet below I saw you kind of mixed JS and jQuery, which you could technically do with just JS.

Also, I saw that you were changing the body background, and then doing some weird regex replace on it, but doesn't the result in value end up being the same as img1?

Here's an example of the same code with just JavaScript and no regex replace (assuming it's not doing something that I missed).

$(css1).click(function() {
  $('body').css('background', 'url('+img1+')');
    var value = document.querySelectorAll("body")[0].style.background.replace(/(url\(|\)|")/g, '');

    chrome.storage.sync.set({'background': value}, function(){
      // alert('Success!');
    });
});

Becomes

// I've also used a few ES6 things here you may want to check out:
// https://webapplog.com/es6/

// This method becomes partially applied, so you pass the image url in
// then once the second method is called, the appropriate cached variable
// would be set
const setBackground = (background = '') => {
  return () => {
    body.style.background = `url('${background}')`; // Template Literal (ES6)
    chrome.storage.sync.set({ background }, () => {
      console.log(`background set to ${background}`);
    });
  };
};

// Typically these would be generated from some sort of config
css1.addEventListener('click', setBackground(img1));
css2.addEventListener('click', setBackground(img2));
css3.addEventListener('click', setBackground(img3));

Just my two cents!