從不同的 js 文件調用 function

Question

我一直在檢查一個 chrome 擴展文件的代碼（在網站中添加了幾個按鈕），並注意到這個擴展有單獨的 js 文件“content.js”和“buttons.js”，在 buttons.js 中有返回的函數具有樣式的按鈕元素，並且在 content.js 中使用了它們，當我構建我的擴展時，我必須在 content.js 中創建函數，否則它們將無法工作。 我也沒有注意到他的文件中有任何類型的“導入”——它們似乎就是這樣工作的。 但是我在他的擴展名中也看到了 jquery.min.js 文件，該文件幾乎不可讀，它是否可以從那里以某種方式鏈接？ 如果是的話，我怎么能在我的擴展文件中實現這個？

按鈕.js：

const createButtonOne = () => {
    const button = document.createElement('button')
    button.classList.add("Button")
    const buttonText = document.createTextNode('TEXT')
    button.appendChild(buttonText)
    return button
}

內容.js：

const ButtonOne = createButtonOne()

Answer 1

document.body.appendChild(ButtonOne)

擴展很可能使用導入的庫（例如 jQuery）來創建按鈕。 如果是這種情況，那么您可以通過將 jQuery 庫導入您的擴展來實現相同的功能。 為此，您需要在擴展清單文件中添加一個指向 jQuery 庫的標記，如下所示：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["jquery.min.js", "buttons.js", "content.js"]
  }
]

完成后，您就可以使用 jQuery 庫在 content.js 文件中創建按鈕。 例如：

const createButtonOne = () => {
    return $('<button>TEXT</button>').addClass('Button');
}

const ButtonOne = createButtonOne()
$(document.body).append(ButtonOne)