如何通过 Chrome 扩展程序向网站注入 Javascript
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
原文链接（推荐）：https://gabriellazcano.com/blog/how-to-inject-javascript-to-a-site-from-chrome-extension/
介绍
我看到一个 Twitch 主播在尝试做这件事时遇到了困难。所以我觉得这或许能帮到其他人。
你可以使用 Chrome 扩展程序将 JavaScript 代码注入到任何网站中，这样可以实现很多功能。例如，创建新元素并将其添加到 DOM 中，或者管理某些元素的事件等等。你在应用程序中能做的事情，在注入代码后也能做到。
清单版本 3
如果您希望脚本在您指定的页面集上运行，则 Chrome 扩展程序的清单文件（您可以查看文档）需要添加一些额外的元素，例如 content_scripts 和 host_permissions。
matches 和 host_permissions 都应该指定匹配模式。在本例中，inject.js 仅在站点为 google.com 且您拥有所有 URL 的权限时运行。
{
"name": "inject",
"version": "1.0",
"manifest_version": 3,
"content_scripts": [
{
"matches": ["*://*.google.com/*"],
"js": ["inject.js"],
}
],
"host_permissions": ["<all_urls>"],
}
这是一个可以注入的代码示例。你可以添加事件监听器，也可以像我之前提到的那样，从 DOM 中获取和添加元素。
function init() {
const el = document.createElement("input")
el.setAttribute("type", "checkbox")
document.body.appendChild(el)
el.addEventListener("click", (event) => {
console.log(event.target.checked)
})
}
init()