Fine tune click-to-load widget

Notably, add clickable link to open the widget
in its own tab. Also, allows the URL to be text-
selected so that it becomes possible to use the
selection in a browser contextual menu's "Open
in a new tab" option.

src/css/click2load.css

@@ -42,6 +42,9 @@ body {
     overflow: hidden;
     word-break: break-all;
     }
+#frameURL > a {
+    font-size: 1rem;
+    }
     
 #clickToLoad {
     cursor: default;

src/js/click2load.js

@@ -34,7 +34,8 @@ const url = new URL(self.location.href);
 const frameURL = url.searchParams.get('url');
 const frameURLElem = document.getElementById('frameURL');
 
-frameURLElem.textContent = frameURL;
+frameURLElem.children[0].textContent = frameURL;
+frameURLElem.children[1].href = frameURL;
 
 const onWindowResize = function() {
     document.body.style.width = `${self.innerWidth}px`;
@@ -47,7 +48,7 @@ self.addEventListener('resize', onWindowResize);
 
 document.body.addEventListener('click', ev => {
     if ( ev.isTrusted === false ) { return; }
-    //if ( ev.target === frameURLElem ) { return; }
+    if ( ev.target.closest('#frameURL') !== null ) { return; }
     vAPI.messaging.send('default', {
         what: 'clickToLoad',
         frameURL,

src/web_accessible_resources/click2load.html

@@ -6,6 +6,7 @@
 <title>uBlock Origin Click-to-Load</title>
 <link rel="stylesheet" href="../css/themes/default.css">
 <link rel="stylesheet" href="../css/common.css">
+<link rel="stylesheet" href="../css/fa-icons.css">
 <link rel="stylesheet" href="../css/click2load.css">
 </head>
 
@@ -13,8 +14,9 @@
 
 <span class="logo"><img src="../img/ublock.svg"></span>
 <span id="clickToLoad" data-i18n="clickToLoad"></span>
-<div id="frameURL"></div>
+<div id="frameURL"><span></span>&nbsp;<a class="fa-icon" href="" rel="noreferrer noopener" target="_blank">external-link</a></div>
 
+<script src="../js/fa-icons.js"></script>
 <script src="../js/vapi.js"></script>
 <script src="../js/vapi-common.js"></script>
 <script src="../js/vapi-client.js"></script>