github-stories/content-script.js at master · martrend33/github-stories · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
const DEFAULT_CHAT_URL = 'https://github-chat.com/';
const STORAGE_KEY = 'githubChatUrl';
const ROOT_ID = 'github-chat-extension-root';

function buildChatUrl(baseUrl) {
    const url = new URL(baseUrl);
    url.searchParams.set('source', 'extension');
    url.searchParams.set('github_url', window.location.href);
    return url.toString();
}

function shouldUseFallback(baseUrl) {
    try {
          return new URL(baseUrl).hostname === 'github-chat.com';
    } catch (error) {
          return true;
    }
}

function createChatFrame(chatUrl) {
    const useFallback = shouldUseFallback(chatUrl);
    const root = document.createElement('div');
    root.id = ROOT_ID;
    root.className = 'github-chat-extension is-collapsed';

  const toggle = document.createElement('button');
    toggle.type = 'button';
    toggle.className = 'github-chat-extension__toggle';
    toggle.setAttribute('aria-expanded', 'false');
    toggle.setAttribute('aria-controls', 'github-chat-extension-panel');
    toggle.textContent = 'Chat';

  const panel = document.createElement('section');
    panel.id = 'github-chat-extension-panel';
    panel.className = 'github-chat-extension__panel';
    panel.setAttribute('aria-label', 'GitHub Chat');

  const header = document.createElement('div');
    header.className = 'github-chat-extension__header';
    header.textContent = 'GitHub Chat';

  const close = document.createElement('button');
    close.type = 'button';
    close.className = 'github-chat-extension__close';
    close.setAttribute('aria-label', 'Close GitHub Chat');
    close.textContent = 'x';

  const iframe = document.createElement('iframe');
    iframe.className = 'github-chat-extension__frame';
    iframe.src = buildChatUrl(chatUrl);
    iframe.title = 'GitHub Chat';
    iframe.loading = 'lazy';
    iframe.referrerPolicy = 'strict-origin-when-cross-origin';
    iframe.setAttribute('allow', 'clipboard-read; clipboard-write');

  const fallback = document.createElement('div');
    fallback.className = 'github-chat-extension__fallback';

  const fallbackMessage = document.createElement('p');
    fallbackMessage.textContent = 'This chat endpoint cannot be embedded on GitHub.';

  const fallbackLink = document.createElement('a');
    fallbackLink.className = 'github-chat-extension__fallback-link';
    fallbackLink.href = buildChatUrl(chatUrl);
    fallbackLink.target = '_blank';
    fallbackLink.rel = 'noopener noreferrer';
    fallbackLink.textContent = 'Open Chat';

  fallback.append(fallbackMessage, fallbackLink);

  if (useFallback) {
        fallback.classList.add('is-visible');
  }

  const fallbackTimer = window.setTimeout(() => {
        fallback.classList.add('is-visible');
  }, 2500);

  iframe.addEventListener('load', () => {
        if (!useFallback) {
                window.clearTimeout(fallbackTimer);
        }
  });

  function setOpen(isOpen) {
        root.classList.toggle('is-collapsed', !isOpen);
        toggle.setAttribute('aria-expanded', String(isOpen));
  }

  toggle.addEventListener('click', () => {
        setOpen(root.classList.contains('is-collapsed'));
  });

  close.addEventListener('click', () => {
        setOpen(false);
  });

  header.appendChild(close);
    panel.append(header, fallback, iframe);
    root.append(toggle, panel);
    document.body.appendChild(root);
}

function init() {
    if (document.getElementById(ROOT_ID)) return;

  chrome.storage.sync.get({ [STORAGE_KEY]: DEFAULT_CHAT_URL }, (items) => {
        createChatFrame(items[STORAGE_KEY] || DEFAULT_CHAT_URL);
  });
}

init();