Backlogで「リンク付きの課題キーと件名」を取得するボタンを追加するChrome拡張機能を作ってみた

my_extension
 ├ css
 | └ style.css
 ├ icons
 | ├ icon16.png
 | ├ icon48.png
 | └ icon128.png
 ├ js
 | └ content.js
 └ manifest.json

{
  "name": "BacklogLinkCopy",
  "version": "0.1.0",
  "manifest_version": 3,
  "description": "For Backlog Link Copy",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "host_permissions": [
    "https://<クラメソのサブドメイン>.backlog.jp/*"
  ],
  "permissions": [
    "clipboardWrite",
    "activeTab"
  ],
  "content_scripts": [{
    "matches": [
      "https://<クラメソのサブドメイン>.backlog.jp/*"
    ],
    "css": [
      "css/style.css"
    ],
    "js": [
      "js/content.js"
    ],
    "run_at": "document_end",
    "all_frames": true
  }]
}

.new-button {
    position: absolute;
    margin-left: 7px;
    background-color: #3ea8ff;
    color: white;
    line-height: 1;
    height: 32px;
    width: 32px;
    text-align: center;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

.new-button:active{
    background-color: #0f83fd;
    color: white;
}

console.log("[DEBUG] load extension");

window.addEventListener('load', main, false);
window.addEventListener('popstate', main);
window.addEventListener('pushstate', main);
window.addEventListener('replacestate', main);

const loadFontAwesome = () => {
    let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://use.fontawesome.com/releases/v5.13.1/css/all.css';
    document.head.insertAdjacentElement('beforeEnd', link);
};

function main(event) {
    const jsInitCheckTimer = setInterval(jsLoaded, 100);

    // fontawesomeのロード
    loadFontAwesome();

    function jsLoaded() {
        if (document.querySelector('#copyKey-help') != null) {
            clearInterval(jsInitCheckTimer);

            // ボタンを追加する場所を選択
            let existingButton = document.querySelector('#copyKey-help');

            // ボタン要素を作成
            let newButton = document.createElement('button');
            // ボタンのテキストを設定
            newButton.innerHTML = '<i class="far fa-copy"></i>';
            newButton.classList.add('new-button');

            // ボタンを追加
            existingButton.appendChild(newButton);

            // ボタンが押された時の処理
            newButton.addEventListener('click', function() {
                let currentUrl = window.location.href;
                let ticket_key = document.querySelector(".ticket__key-number").innerText;
                let subject = document.querySelector(".markdown-body").innerText;
                let title = ticket_key + " " + subject;

                let htmlLink = '<a href="' + currentUrl + '">' + title + '</a>';
                const blob = new Blob([htmlLink], { type: 'text/html' });
                const blobPlain = new Blob([title], { type: 'text/plain' });
                const data = [new window.ClipboardItem({ 'text/html': blob, 'text/plain': blobPlain })];

                navigator.clipboard.write(data)
                    .then(function() {
                        console.log('Title copied to clipboard');
                    })
                    .catch(function(error) {
                        console.error('Failed to copy title: ', error);
                    });
            });
        }
    }
}

let htmlLink = '<a href="' + currentUrl + '">' + title + '</a>';
const blob = new Blob([htmlLink], { type: 'text/html' });
const blobPlain = new Blob([title], { type: 'text/plain' });
const data = [new window.ClipboardItem({ 'text/html': blob, 'text/plain': blobPlain })];