[Feature] Custom domain support #85

Closed mikeydevelops closed 2 weeks ago

Why?

I've always wanted support for custom domains and I was thinking of contributing, and I've been bored in the past few days, so I decided to try and implement the feature. I think it turned out alright.

36 and #84 are now done.

Added updated selectors for GitLab (#76) and Azure DevOps (#82).

Important notes

I installed a polyfill, mozilla/webextension-polyfill, for cross browser api support and every reference to chrome. I refactored to Browser. I installed it because I had problems when testing on Firefox and the storage.sync api wouldn't work.

Changed the url matching to work with the host and not with domain name only. This allows domains with ports to have different implementations. i.e localhost:8080 is different from localhost which is different from localhost:80. But browser redirects all requests of ports 80 and 443 to the main domain anyway.

On chromium browsers the user will be asked to allow access to currently open tab if it is a domain not supported by default. On firefox the content script will run on every page. This is required for provider detection.

Every provider now exports a function instead of an object, that is so custom providers can extend the providers instead of just getting a reference to the original provider.

The provider object now has new properties:

name - The name of the provider, should be the same as provider filename and function name.
canSelfHost - Boolean indicating if the provider allows self hosted instances, to be used for options when adding custom domain.
isCustom - Boolean indicating that the provider is custom. Should be false in provider config. Will be set to true when custom domains are loaded.
selectors.detect - A selector for an element that is unique to the provider. Used to guess which provider should be auto selected when custom domain is added.
domain is now domains - and it is an array of objects. Each object has two properties:
- host - The domain of the provider.
- test - A regex which will be used to select a provider based on the host.

How does it work?

When you open the popup, it asks the active tab if any of the providers which can be self hosted detect the provider element with the selector from selectors.detect. If no matches are found, the original message, that it is not supported, is shown. If there is a match a select with self hosted providers is shown with the match from previous step is preselected, allowing you to override the provider, if you want for some reason.

Popup	Popup w/ select open

When you click Add custom provider, the popup tells the page to add the icons, and reloads, showing the settings for the domain.

The options page now shows each host instead of each provider. Azure provider had two domains, now they are shown separately. Custom domains show at the end of the table.

Changing to draft because I found you can request domain access with optional_host_permissions.

Later today will try and add it.

Okay so, I added permission requesting in chromium browsers, but for firefox currently asks for access to all sites. The background script will not run like in chrome and edge. If you have a suggestion how to implement permission requests in firefox, please share.

@mikeydevelops Thanks a lot for opening this PR, and I'm sorry I'm horribly late to attending to it. I'm just catching up on the (very reasonable) fork and figuring out how to best move forward. I saw that the PR was already merged into the fork so I'll close this PR here to avoid drift.

Thanks!!

@PKief hey, since the pull is merged, you can close the referenced issues.

This has been merged, but I still can't see the option to define custom domains on the latest published version.

Does not work like that, maybe should add it to Todo for future versions.

It works like this: You open the website you want to use icons on. Then you click on the extension icon. Popup will open to ask you if you want to add this domain as custom domain. When you click add, the browser will ask for permission for the extension to modify the website. If you approve, you have to return to the extension popup to confirm the new custom domain. The extension will try and detect if you have any of the supported git providers. And that's it.

material-extensions / material-icons-browser-extension