New Custom Script option #3144

Background

As stated in the project's readme

We're happy to receive suggestions and contributions, but be aware this is a highly opinionated project. There's a high bar for adding features. Users will always disagree with something. That being said, we're open to discussing things.

Some suggestions or feature requests might never see the light of day because it's too specific or never reaches consensus. In this case, the user left with no choice but to abandon the idea or fork the project and use their fork version of the extension and misses out exciting updates from the upstream.

Proposal

Like Custom CSS option to undo unwanted styles, I'd like to propose one more option to add Custom Script.

<img width="665" alt="Screenshot 2020-05-26 at 20 59 35" src="https://user-images.githubusercontent.com/1259814/82944854-d7567d80-9f93-11ea-8456-35871aa10c2f.png">

The extension can expose APIs that this Custom Scripts can use. This will allow users to create their features without pushing it upstream.

POC

I've made a rough POC: https://github.com/sindresorhus/refined-github/compare/master...tejanium:custom-script

The script that I've tried. This script filters out "unwanted" people when selecting "Reviewers" for a pull request, this is useful when you're in an organization and have lots of people.

const element = '#reviewers-select-menu [data-filterable-for="review-filter-field"]';
const showUsers = [
    'fregante',
    'sindresorhus',
    'tejanium'
]

// transpile and copy paste
function observeElement(element, listener, options = { childList: true }) {
    if (typeof element === 'string') {
        element = document.querySelector(element);
    }
    // Run on updates
    const observer = new MutationObserver(listener);
    observer.observe(element, options);
    // Run the first time
    listener.call(observer, [], observer);
    return observer;
}

function filterUsers() {
  const users = select.all(`${element} label`);

  for (const user of users) {
    var userName = select('.js-username', user)?.textContent;

    if (userName && !showUsers.includes(userName)) {
      user.remove();
    }
  }
}

var init = function() {
    observeElement(element, filterUsers);
}